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

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.