Gate third-party scripts on consent

Block analytics scripts until the visitor accepts cookies, then activate them automatically

If you’ve enabled cookie consent and use third-party analytics services like Google Analytics or Meta Pixel, those scripts still run immediately by default – the consent banner only gates Fontdue’s own tracking. To block third-party scripts until the visitor consents, you need to modify the script tags wherever they appear – in your site’s <head>, in Fontdue’s HTML head setting, or anywhere else you include them.

Fontdue’s consent system works by looking for scripts marked with type="text/plain" and a data-consent-category attribute. These scripts are inert (the browser ignores text/plain scripts), and Fontdue activates them when the visitor clicks Accept all.

How to gate a script

For any analytics script tag, make two changes:

  1. Change type to "text/plain" (or add it if there’s no type attribute)
  2. Add data-consent-category="analytics"

This works for scripts in Fontdue’s HTML head setting and for scripts in your own site’s markup. See the examples below for common services.

Examples

How to gate the most common third-party scripts.

Google Analytics (gtag.js)

A standard Google Analytics setup has two script tags. Gate both of them:

<!-- Load the gtag.js library -->

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"

  type="text/plain"

  data-consent-category="analytics"></script>



<!-- Initialize gtag -->

<script type="text/plain" data-consent-category="analytics">

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  gtag('config', 'G-XXXXXXXXXX');

</script>

Google Tag Manager

<script type="text/plain" data-consent-category="analytics">

  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],

  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=

  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);

  })(window,document,'script','dataLayer','GTM-XXXXXXX');

</script>

Meta Pixel

<script type="text/plain" data-consent-category="analytics">

  !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', 'XXXXXXXXXXXXXXXX');

  fbq('track', 'PageView');

</script>

How it works

When the consent banner loads, any <script type="text/plain" data-consent-category="analytics"> tags on the page are ignored by the browser – text/plain is not an executable script type.

When a visitor clicks Accept all, Fontdue:

  1. Sets the _fontdue_cc consent cookie with the accepted categories
  2. Finds all scripts with data-consent-category="analytics"
  3. Replaces each one with an executable copy (removing the type and data-consent-category attributes)

The scripts then run as if they had been on the page from the start. On subsequent page loads the banner no longer appears; Fontdue reads the consent cookie when it loads and activates gated scripts for the categories the visitor already accepted.

React sites

If you’re using the fontdue-js npm package, gate your own scripts with the useConsent hook rather than the data-consent-category attribute. For the Meta Pixel, the equivalent of the snippet above:

'use client';

import { useEffect } from 'react';

import { useConsent } from 'fontdue-js/useConsent';



export default function MetaPixel() {

  const analyticsConsent = useConsent('analytics');



  useEffect(() => {

    const w = window as any;

    if (!analyticsConsent || w.fbq) return;



    // The standard pixel bootstrap: an fbq stub that queues calls

    // until fbevents.js loads and takes over.

    const fbq: any = function (...args: any[]) {

      if (fbq.callMethod) {

        fbq.callMethod.apply(fbq, args);

      } else {

        fbq.queue.push(args);

      }

    };

    fbq.push = fbq;

    fbq.loaded = true;

    fbq.version = '2.0';

    fbq.queue = [];

    w.fbq = fbq;

    if (!w._fbq) w._fbq = fbq;



    const script = document.createElement('script');

    script.async = true;

    script.src = 'https://connect.facebook.net/en_US/fbevents.js';

    document.head.appendChild(script);



    fbq('init', 'XXXXXXXXXXXXXXXX');

    fbq('track', 'PageView');

  }, [analyticsConsent]);



  return null;

}

The hook returns true when the visitor granted consent on an earlier visit, and re-renders the component when consent changes (e.g. the visitor clicks Accept all) – no manual event listeners or polling needed.