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 consent cookie is already set, so gated scripts activate immediately without waiting for the banner.

React sites

If you’re using the fontdue-js npm package, the data-consent-category attribute pattern works the same way – gated scripts are activated automatically when the visitor accepts.

You can also use the useConsent hook to conditionally run your own code based on consent:

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



function MyAnalytics() {

  const analyticsConsent = useConsent('analytics');



  useEffect(() => {

    if (analyticsConsent) {

      // initialize your analytics here

    }

  }, [analyticsConsent]);



  return null;

}

The hook re-renders your component automatically when the visitor accepts or declines cookies – no manual event listeners or polling needed.