DPO Radio

Black Friday: 50% off CMP annual plans for the first year! Use Code BF50

How to Integrate Web Vendors Top 25

documentation
Consent Management Platform
How To Guides
How to Integrate Web Vendors (Top 25)

AesirX CMP Guide: How to Integrate Web Vendors (Top 25)

This guide provides ready-to-use code snippets for integrating the most common web vendors into your site using AesirX Consent Management Platform (CMP) JavaScript.

Each recipe includes:

  • Category mapping (essential, functional, analytics, advertising, custom)
  • Minimal loader with singleton guard
  • Callback function for denied consent
  • Optional fallback

All examples assume:

  • The standalone JS build of AesirX CMP is included.
  • Your site defines window.aesirxHoldBackJS.
  • Optional window.funcAfterReject may be defined for custom actions after consent.

Install and configure AesirX CMP to make sure your integrations work correctly.

How To Set Up Consent Configuration for AesirX CMP JS

Shared Helpers

copy icon
<script>
  // Holdback definitions (executed after user consent)
  // There are 5 available categories:
  //   - essential
  //   - functional
  //   - analytics
  //   - advertising
  //   - custom
  //
  // "name" can be customized to describe your specific integration.
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Google Analytics",
      script: () => {
        // Load google analytics script
        console.log("analytics scripts");
      },
    },
    {
      category: "advertising",
      name: "Google Tag Manager",
      script: () => {
        // Load Google Tag Manager script
        console.log("Tag Manager scripts");
      },
    },
    // Add more vendor entries here...
  ];

  // Optional: custom actions after user rejects consent
  window.funcAfterReject = () => {
    console.log("user rejected consent");
  };
</script>

Legend

Category key suggestions:

  • essential: Required features necessary for the site to function properly
  • functional: UI helpers, chat widgets, etc
  • analytics: Tracking, insights, performance
  • advertising: ads, pixels, remarketing
  • custom: any other custom integration

Consent Flow Overview:

  • window.aesirxHoldBackJS: defines scripts to load after consent is granted
  • window.funcAfterReject: optional callback for custom actions when consent is rejected

See full setup details in the

AesirX CMP JS Developer Guide

example_1.png

1. Google Tag Manager (GTM)

Purpose: advertising (often) or analytics (if tag-only). Prefer not using GTM for privacy; self-host and keep tags first‑party where possible.

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "advertising",
      name: "Google Tag Manager",
      script: () => {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({ "gtm.start": Date.now(), event: "gtm.js" });

        const script = document.createElement("script");
        script.src = "https://www.googletagmanager.com/gtm.js?id=GTM-XXXX";
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_2.png

2. Google Analytics 4 (GA4)

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Google Analytics 4",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX';
        script.async = true;
        script.onload = () => {
          window.dataLayer = window.dataLayer || [];
          function gtag(){ dataLayer.push(arguments); }
          window.gtag = gtag;
          gtag('js', new Date());
          gtag('config', 'G-XXXXXXX', { anonymize_ip: true });
        };
        document.head.appendChild(script);
      }
    }
  ];
</script>

example_3.png

3. Google Maps (JS API)

Purpose: maps

copy icon
<div id="map" style="height:320px"></div>
<div data-consent-fallback="maps" hidden>Map requires consent.</div>

<script>
  window.aesirxHoldBackJS = [
    {
      category: "custom",
      name: "Google Maps",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&libraries=places';
        script.async = true;
        script.onload = () => {
          new google.maps.Map(document.getElementById('map'), {
            center: { lat: 0, lng: 0 },
            zoom: 2
          });
        };
        document.head.appendChild(script);
      }
    }
  ];
</script>

example_4.png

4. YouTube (Privacy‑Enhanced)

Purpose: video

copy icon
<div id="yt"></div>
<div>Video requires consent.</div>

<script>
  window.aesirxHoldBackJS = [
    {
      category: "custom",
      name: "YouTube Video",
      script: () => {
        const iframe = document.createElement('iframe');
        iframe.src = 'https://www.youtube-nocookie.com/embed/VIDEO_ID';
        iframe.width = '560';
        iframe.height = '315';
        iframe.title = 'YouTube';
        iframe.frameBorder = '0';
        iframe.allow =
          'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share';
        iframe.referrerPolicy = 'strict-origin-when-cross-origin';
        document.getElementById('yt').replaceChildren(iframe);
      },
    },
  ];
</script>

example_5.png

5. Vimeo

Purpose: video

copy icon
<div id="vimeo"></div>
<div data-consent-fallback="video" hidden>Video requires consent.</div>

<script>
  window.aesirxHoldBackJS = [
    {
      category: "custom",
      name: "Vimeo Video",
      script: () => {
        const i = document.createElement('iframe');
        i.src = 'https://player.vimeo.com/video/VIDEO_ID?h=HASH';
        i.width = '560';
        i.height = '315';
        i.frameBorder = '0';
        i.allow = 'autoplay; fullscreen; picture-in-picture';
        i.referrerPolicy = 'strict-origin-when-cross-origin';
        document.getElementById('vimeo').replaceChildren(i);
      },
    },
  ];
</script>

example_6.png

6. Meta Pixel (Facebook)

Purpose: advertising

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "advertising",
      name: "Meta Pixel",
      script: () => {
        !(function (f, b, e, v, n, t, s) {
          if (f.fbq) return;
          n = f.fbq = function () {
            n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
          };
          if (!f._fbq) f._fbq = n;
          n.push = n;
          n.loaded = !0;
          n.version = "2.0";
          n.queue = [];
          t = b.createElement(e);
          t.async = !0;
          t.src = v;
          s = b.getElementsByTagName(e)[0];
          s.parentNode.insertBefore(t, s);
        })(window, document, "script", "https://connect.facebook.net/en_US/fbevents.js");

        fbq("init", "PIXEL_ID");
        fbq("track", "PageView");
      },
    },
  ];
</script>

example_7.png 

7. TikTok Pixel

Purpose: advertising

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "advertising",
      name: "TikTok Pixel",
      script: () => {
        !(function (w, d, t) {
          w.TiktokAnalyticsObject = t;
          var ttq = (w[t] = w[t] || []);
          ttq.methods = [
            "page",
            "track",
            "identify",
            "instances",
            "debug",
            "on",
            "off",
            "upload",
          ];
          ttq.setAndDefer = function (t, e) {
            t[e] = function () {
              t.push([e].concat(Array.prototype.slice.call(arguments, 0)));
            };
          };
          for (var i = 0; i < ttq.methods.length; i++)
            ttq.setAndDefer(ttq, ttq.methods[i]);
          ttq.instance = function (t) {
            var e = ttq._i[t] || [];
            return function () {
              ttq.push([t].concat(Array.prototype.slice.call(arguments, 0)));
            };
          };
          ttq.load = function (e) {
            var i = "https://analytics.tiktok.com/i18n/pixel/events.js";
            ttq._i = ttq._i || {};
            ttq._i[e] = [];
            var n = d.createElement("script");
            n.async = !0;
            n.src = i;
            if (window.__cspNonce) n.nonce = window.__cspNonce;
            var a = d.getElementsByTagName("script")[0];
            a.parentNode.insertBefore(n, a);
          };
        })(window, document, "ttq");

        ttq.load("YOUR_PIXEL_ID");
        ttq.page();
      },
    },
  ];
</script>

example_8.png

8. LinkedIn Insight Tag

Purpose: advertising

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "advertising",
      name: "LinkedIn Insight Tag",
      script: () => {
        window._linkedin_partner_id = "XXXXXX";
        window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
        window._linkedin_data_partner_ids.push(window._linkedin_partner_id);

        const s = document.createElement("script");
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
        if (window.__cspNonce) s.nonce = window.__cspNonce;
        document.head.appendChild(s);
      },
    },
  ];
</script>

example_9.png

9. X / Twitter Pixel

Purpose: advertising

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "advertising",
      name: "Twitter Pixel",
      script: () => {
        !(function (e, t, n, s, u, a) {
          if (!e.twq) {
            s = e.twq = function () {
              s.exe ? s.exe.apply(s, arguments) : s.queue.push(arguments);
            };
            s.version = "1.1";
            s.queue = [];
            u = t.createElement(n);
            u.async = true;
            u.src = "https://static.ads-twitter.com/uwt.js";
            a = t.getElementsByTagName(n)[0];
            a.parentNode.insertBefore(u, a);
          }
        })(window, document, "script");

        twq("config", "TW-XXXX");
        twq("track", "PageView");
      },
    },
  ];
</script>

example_10.png

10. Microsoft Clarity

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Microsoft Clarity",
      script: () => {
        (function (c, l, a, r, i, t, y) {
          c[a] = c[a] || function () {
            (c[a].q = c[a].q || []).push(arguments);
          };
          t = l.createElement(r);
          t.async = 1;
          t.src = 'https://www.clarity.ms/tag/' + i;
          if (window.__cspNonce) t.nonce = window.__cspNonce;
          y = l.getElementsByTagName(r)[0];
          y.parentNode.insertBefore(t, y);
        })(window, document, 'clarity', 'script', 'YOUR_ID');
      },
    },
  ];
</script>

example_11.png

11. Hotjar

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Hotjar",
      script: () => {
        (function (h, o, t, j, a, r) {
          h.hj = h.hj || function () {
            (h.hj.q = h.hj.q || []).push(arguments);
          };
          h._hjSettings = { hjid: YOUR_ID, hjsv: 6 };
          a = o.createElement('script');
          a.async = 1;
          a.src = 'https://static.hotjar.com/c/hotjar-' + h._hjSettings.hjid + '.js?sv=' + h._hjSettings.hjsv;
          if (window.__cspNonce) a.nonce = window.__cspNonce;
          r = o.getElementsByTagName('script')[0];
          r.parentNode.insertBefore(a, r);
        })(window, document, 'https://static.hotjar.com');
      },
    },
  ];
</script>

example_12.png

12. Intercom (Chat)

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Intercom Chat",
      script: () => {
        window.intercomSettings = { app_id: 'APP_ID' };

        const script = document.createElement('script');
        script.src = 'https://widget.intercom.io/widget/APP_ID';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_13.png

13. HubSpot Forms

Purpose: forms

copy icon
<div id="hs-form"></div>
<div data-consent-fallback="forms" hidden>Form requires consent.</div>

<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "HubSpot Forms",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://js.hsforms.net/forms/v2.js';
        script.async = true;
        script.onload = () => {
          if (window.hbspt) {
            window.hbspt.forms.create({
              portalId: 'PORTAL_ID',
              formId: 'FORM_GUID',
              target: '#hs-form'
            });
          }
        };
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_13.png

14. HubSpot Chat

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "HubSpot Chat",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://js.usemessages.com/conversations-embed.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_14.png

15. Drift Chat

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Drift Chat",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://js.driftt.com/include/YEAR-MONTH/ORG_ID.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_15.png

16. Zendesk Web Widget

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Zendesk Web Widget",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://static.zdassets.com/ekr/snippet.js?key=YOUR_KEY';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_16.png

17. Crisp Chat

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Crisp Chat",
      script: () => {
        window.$crisp = [];
        window.CRISP_WEBSITE_ID = 'WEBSITE_ID';

        const script = document.createElement('script');
        script.src = 'https://client.crisp.chat/l.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_17.png

18. Tawk.to

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Tawk.to Chat",
      script: () => {
        const s1 = document.createElement('script');
        s1.async = true;
        s1.src = 'https://embed.tawk.to/PROPERTY_ID/DEFAULT';
        if (window.__cspNonce) s1.nonce = window.__cspNonce;
        document.head.appendChild(s1);
      },
    },
  ];
</script>

example_18.png

19. LiveChat

Purpose: chat

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "LiveChat",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://cdn.livechatinc.com/tracking.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_19.png

20. Segment

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Segment",
      script: () => {
        !function(){
          var analytics = window.analytics = window.analytics || [];
          if (!analytics.initialize) {
            if (analytics.invoked) {
              window.console && console.error && console.error('Segment snippet included twice.');
            } else {
              analytics.invoked = !0;
              analytics.methods = [
                'trackSubmit','trackClick','trackLink','trackForm','pageview','identify','reset','group','track','ready','alias','debug','page','once','off','on'
              ];
              analytics.factory = function(t){
                return function(){
                  var e = Array.prototype.slice.call(arguments);
                  e.unshift(t);
                  analytics.push(e);
                  return analytics;
                };
              };
              for (var t = 0; t < analytics.methods.length; t++) {
                var e = analytics.methods[t];
                analytics[e] = analytics.factory(e);
              }
              analytics.load = function(key){
                var script = document.createElement('script');
                script.async = !0;
                script.src = 'https://cdn.segment.com/analytics.js/v1/' + key + '/analytics.min.js';
                if (window.__cspNonce) script.nonce = window.__cspNonce;
                var first = document.getElementsByTagName('script')[0];
                first.parentNode.insertBefore(script, first);
              };
              analytics.SNIPPET_VERSION = '4.13.2';
              analytics.load('WRITE_KEY');
              analytics.page();
            }
          }
        }();
      },
    },
  ];
</script>

example_20.png

21. Mixpanel

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Mixpanel",
      script: () => {
        (function(e, a){
          if (!a.__SV) {
            var b = window;
            try {
              var c, l, i, j = b.location, g = j.hash;
              c = function(a, b){ return (l = a.match(RegExp(b+'=([^&]*)'))) ? l[1] : null; };
              g && c(g,'state') && (i = JSON.parse(decodeURIComponent(c(g,'state'))), 'mpeditor' === i.action && (b.sessionStorage.setItem('_mpcehash', g), history.replaceState(i.desiredHash||'', e.title, j.pathname+j.search)));
            } catch(m){}
            var k, h;
            window.mixpanel = a;
            a._i = [];
            a.init = function(b, c, f){
              function e(b, a){
                var c = a.split('.');
                2==c.length && (b = b[c[0]], a=c[1]);
                b[a] = function(){ b.push([a].concat(Array.prototype.slice.call(arguments,0))); };
              }
              var d = a;
              'undefined' !== typeof f ? d = a[f] = [] : f='mixpanel';
              d.people = d.people || [];
              var g = 'disable time_event track track_pageview track_links track_forms register register_once alias unregister identify name_tag set_config reset people.set people.set_once people.unset people.increment people.append people.union people.track_charge people.clear_charges people.delete_user'.split(' ');
              for(k=0; k<g.length; k++) e(d, g[k]);
              a._i.push([b,c,f]);
            };
            a.__SV = 1.2;
            var s = e.createElement('script');
            s.type='text/javascript';
            s.async = !0;
            s.src = 'https://cdn.mxpnl.com/libs/mixpanel-2-latest.min.js';
            if (window.__cspNonce) s.nonce = window.__cspNonce;
            var x = e.getElementsByTagName('script')[0];
            x.parentNode.insertBefore(s, x);
          }
        })(document, window.mixpanel || []);
        mixpanel.init('TOKEN');
      },
    },
  ];
</script>

example_21.png

22. Plausible (self‑host or cloud)

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Plausible",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://plausible.io/js/plausible.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_22.png

23. Matomo

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Matomo",
      script: () => {
        var _paq = window._paq = window._paq || [];
        _paq.push(['trackPageView']);
        _paq.push(['enableLinkTracking']);
        (function(){
          var u = 'https://MATOMO_HOST/';
          _paq.push(['setTrackerUrl', u + 'matomo.php']);
          _paq.push(['setSiteId', 'SITE_ID']);
          var d = document, g = d.createElement('script');
          g.async = true;
          g.src = u + 'matomo.js';
          if (window.__cspNonce) g.nonce = window.__cspNonce;
          d.head.appendChild(g);
        })();
      },
    },
  ];
</script>

example_23.png

24. Stripe.js

Purpose: analytics

copy icon
<div>Payment is unavailable until you provide consent.</div>

<script>
  window.aesirxHoldBackJS = [
    {
      category: "custom",
      name: "Stripe.js",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://js.stripe.com/v3/';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

example_25.png

25. Calendly (Embeds)

Purpose: forms (or scheduling if you define it)

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Calendly",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://assets.calendly.com/assets/external/widget.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

Bonus: Typeform, Sentry, LogRocket

Typeform

Purpose: forms

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "functional",
      name: "Typeform",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://embed.typeform.com/embed.js';
        script.async = true;
        document.head.appendChild(script);
      },
    },
  ];
</script>

Sentry (Browser)

Purpose: typically essential for error monitoring if configured privacy‑safe; otherwise gate under analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "Sentry",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://browser.sentry-cdn.com/7.x/bundle.min.js';
        script.async = true;
        script.onload = () => {
          if (window.Sentry) {
            Sentry.init({ dsn: 'DSN', tracesSampleRate: 0 });
          }
        };
        document.head.appendChild(script);
      },
    },
  ];
</script>

LogRocket

Purpose: analytics

copy icon
<script>
  window.aesirxHoldBackJS = [
    {
      category: "analytics",
      name: "LogRocket",
      script: () => {
        const script = document.createElement('script');
        script.src = 'https://cdn.lr-ingest.com/LogRocket.min.js';
        script.async = true;
        script.onload = () => {
          if (window.LogRocket) {
            window.LogRocket.init('org/id');
          }
        };
        document.head.appendChild(script);
      },
    },
  ];
</script>

Notes & Teardown Guidance

  • Many ad/analytics vendors lack explicit teardown APIs; withdrawal should block future usage and hide UI/features. For chat/players, remove iframes/widgets from DOM on withdrawal.
  • Keep purpose names stable and audited.
  • Always prefer self‑hosting where vendors allow it and keep network to first‑party when feasible.

Final Tip

Need an expert review to make sure your setup complies with GDPR, ePrivacy Directive, and other global laws?
Request a Privacy Review from the AesirX team to validate your banner settings, consent logic, and tracker configuration. Book a Privacy Review here.

Enjoyed this read? Share the blog!

TABLE OF CONTENTS

  1. Shared Helpers
  2. 1. Google Tag Manager (GTM)
  3. 2. Google Analytics 4 (GA4)
  4. 3. Google Maps (JS API)
  5. 4. YouTube (Privacy‑Enhanced)
  6. 5. Vimeo
  7. 6. Meta Pixel (Facebook)
  8. 7. TikTok Pixel
  9. 8. LinkedIn Insight Tag
  10. 9. X / Twitter Pixel
  11. 10. Microsoft Clarity
  12. 11. Hotjar
  13. 12. Intercom (Chat)
  14. 13. HubSpot Forms
  15. 14. HubSpot Chat
  16. 15. Drift Chat
  17. 16. Zendesk Web Widget
  18. 17. Crisp Chat
  19. 18. Tawk.to
  20. 19. LiveChat
  21. 20. Segment
  22. 21. Mixpanel
  23. 22. Plausible (self‑host or cloud)
  24. 23. Matomo
  25. 24. Stripe.js
  26. 25. Calendly (Embeds)
  27. Bonus: Typeform, Sentry, LogRocket
  28. Notes & Teardown Guidance
  29. Final Tip

share icon

Share Story

Symbol Image
Footer logo

The evolution of Aesir is Aesir + AesirX Icon (the Norse symbol for Necessity)"Needed in order to achieve a particular result"

♥Join the AesirX Privacy Newsletter. Stay Informed. Stay Compliant.

Solutions

Resources

Support

Partnership Opportunities

Terms of ServicePrivacy PolicyRefund Policy

Copyright @ 2025 AesirX
My Data Awards TechMy Data Awards BusinessUNEED LogoMicrosoft Logo
Join our Community