How to Block Analytics Scripts Until Cookie Consent

The most common GDPR violation isn't the absence of a cookie banner — it's having a banner that doesn't actually block anything. If Google Analytics fires on page load regardless of what the visitor clicks, your banner is decorative, not functional.

This guide shows you how to conditionally load analytics and marketing scripts based on actual consent, using the consent event API.

The Consent Event Pattern

When a visitor makes a consent choice on a getconsent.io banner, the script dispatches a consent custom event on window. The event's detail property contains the categories the visitor accepted:

window.addEventListener("consent", function (e) {
  console.log(e.detail);
  // { analytics: true, marketing: false, functional: true }
});

Each key corresponds to a consent category you've configured in your dashboard. The value is true if the visitor opted in, false if they didn't.

This event fires both when the visitor first makes a choice and on subsequent page loads where a prior choice exists. So you only need one listener — it covers both scenarios.

Google Analytics (GA4)

The standard GA4 snippet loads a script and initializes the gtag function. To gate it behind consent:

window.addEventListener("consent", function (e) {
  if (e.detail.analytics) {
    // Load the GA4 script
    var s = document.createElement("script");
    s.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX";
    s.async = true;
    document.head.appendChild(s);

    // Initialize gtag
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag("js", new Date());
    gtag("config", "G-XXXXXXX");
  }
});

This way, the GA4 script never loads, and no cookies are set, until the visitor explicitly accepts the analytics category. If they reject, nothing happens — no network requests, no cookies, no tracking.

Facebook Pixel

The Facebook Pixel follows the same pattern. Gate the entire initialization behind the marketing category:

window.addEventListener("consent", function (e) {
  if (e.detail.marketing) {
    !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", "YOUR_PIXEL_ID");
    fbq("track", "PageView");
  }
});

Notice this is under the marketing category, not analytics. Facebook Pixel is primarily used for ad targeting and retargeting, which makes it a marketing cookie under GDPR classification.

Hotjar

Hotjar records user sessions and generates heatmaps. It sets several cookies and should be gated behind the analytics category:

window.addEventListener("consent", function (e) {
  if (e.detail.analytics) {
    (function(h,o,t,j,a,r) {
      h.hj = h.hj || function() {
        (h.hj.q = h.hj.q || []).push(arguments);
      };
      h._hjSettings = { hjid: YOUR_HJID, hjsv: 6 };
      a = o.getElementsByTagName("head")[0];
      r = o.createElement("script");
      r.async = 1;
      r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
      a.appendChild(r);
    })(window, document,
      "https://static.hotjar.com/c/hotjar-", ".js?sv=");
  }
});

Multiple Scripts in One Listener

You don't need a separate listener for each script. Combine them in one handler:

window.addEventListener("consent", function (e) {
  var c = e.detail;

  if (c.analytics) {
    loadGoogleAnalytics();
    loadHotjar();
  }

  if (c.marketing) {
    loadFacebookPixel();
    loadLinkedInInsight();
  }

  if (c.functional) {
    loadIntercom();
    loadCrisp();
  }
});

Wrap each third-party script in a function and call it when the relevant category is accepted. This keeps your consent logic clean and easy to maintain.

Testing Your Implementation

To verify that scripts are properly gated:

1. Open your site in an incognito window
2. Open the browser DevTools Network tab
3. Before interacting with the consent banner, confirm that no requests are made to third-party analytics/marketing domains
4. Reject all cookies — confirm that no third-party requests appear
5. Clear the incognito session, reload, and this time accept analytics — confirm that the GA/Hotjar scripts load
6. Check the Application tab to verify cookies are only set after consent

Common Mistakes

• Loading scripts in the HTML and trying to "block" them retroactively. You can't unset a cookie that's already been set on page load. The script must not be in the HTML at all — load it dynamically after consent.
• Using Google Tag Manager's built-in consent mode as a substitute. GTM consent mode sends cookieless pings by default, which some DPAs have ruled still constitutes tracking. Fully blocking the script is the safest approach.
• Forgetting to handle returning visitors. The consent event fires on every page load if a prior choice exists, so dynamically loaded scripts will re-initialize correctly on return visits.

Conditional script loading is the core of real GDPR compliance. A banner without it is just a notification — and notifications don't satisfy the regulation.