How to Block Scripts Until Cookie Consent

1
<!-- Before: this script runs immediately on page load -->
2
<script>
3
  console.log('Tracking user...');
4
</script>
5
6
<!-- After: blocked until user accepts "analytics" -->
7
<script type="text/plain" data-category="analytics">
8
  console.log('Tracking user...');
9
</script>

1
<!-- Before: browser downloads and executes immediately -->
2
<script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
3
4
<!-- After: not even downloaded until consent -->
5
<script type="text/plain" data-category="analytics"
6
  data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX">
7
</script>

1
<!-- Google Analytics GA4 -->
2
<script type="text/plain" data-category="analytics"
3
  data-service="Google Analytics"
4
  data-src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX">
5
</script>
6
<script type="text/plain" data-category="analytics"
7
  data-service="Google Analytics">
8
  window.dataLayer = window.dataLayer || [];
9
  function gtag(){dataLayer.push(arguments);}
10
  gtag('js', new Date());
11
  gtag('config', 'G-XXXXXXX');
12
</script>

1
<!-- Facebook Pixel -->
2
<script type="text/plain" data-category="marketing"
3
  data-service="Facebook Pixel">
4
  !function(f,b,e,v,n,t,s)
5
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
6
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
7
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
8
  n.queue=[];t=b.createElement(e);t.async=!0;
9
  t.src=v;s=b.getElementsByTagName(e)[0];
10
  s.parentNode.insertBefore(t,s)}(window, document,'script',
11
  'https://connect.facebook.net/en_US/fbevents.js');
12
  fbq('init', 'YOUR_PIXEL_ID');
13
  fbq('track', 'PageView');
14
</script>

1
<!-- Hotjar -->
2
<script type="text/plain" data-category="analytics"
3
  data-service="Hotjar">
4
  (function(h,o,t,j,a,r){
5
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
6
    h._hjSettings={hjid:YOUR_HJID,hjsv:6};
7
    a=o.getElementsByTagName('head')[0];
8
    r=o.createElement('script');r.async=1;
9
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
10
    a.appendChild(r);
11
  })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
12
</script>

1
<!-- LinkedIn Insight Tag -->
2
<script type="text/plain" data-category="marketing"
3
  data-service="LinkedIn Insight">
4
  _linkedin_partner_id = "YOUR_PARTNER_ID";
5
  window._linkedin_data_partner_ids =
6
    window._linkedin_data_partner_ids || [];
7
  window._linkedin_data_partner_ids.push(_linkedin_partner_id);
8
</script>
9
<script type="text/plain" data-category="marketing"
10
  data-service="LinkedIn Insight"
11
  data-src="https://snap.licdn.com/li.lms-analytics/insight.min.js">
12
</script>

1
<!-- TikTok Pixel -->
2
<script type="text/plain" data-category="marketing"
3
  data-service="TikTok Pixel">
4
  !function (w, d, t) {
5
    w.TiktokAnalyticsObject=t;
6
    var ttq=w[t]=w[t]||[];
7
    ttq.methods=["page","track","identify","instances",
8
      "debug","on","off","once","ready","alias",
9
      "group","enableCookie","disableCookie"];
10
    ttq.setAndDefer=function(t,e){
11
      t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}};
12
    for(var i=0;i<ttq.methods.length;i++)
13
      ttq.setAndDefer(ttq,ttq.methods[i]);
14
    ttq.instance=function(t){
15
      for(var e=ttq._i[t]||[],n=0;n<ttq.methods.length;n++)
16
        ttq.setAndDefer(e,ttq.methods[n]);return e};
17
    ttq.load=function(e,n){
18
      var i="https://analytics.tiktok.com/i18n/pixel/events.js";
19
      ttq._i=ttq._i||{};ttq._i[e]=[];ttq._i[e]._u=i;
20
      ttq._t=ttq._t||{};ttq._t[e]=+new Date;
21
      ttq._o=ttq._o||{};ttq._o[e]=n||{};
22
      var o=document.createElement("script");
23
      o.type="text/javascript";o.async=!0;o.src=i+"?sdkid="+e+"&lib="+t;
24
      var a=document.getElementsByTagName("script")[0];
25
      a.parentNode.insertBefore(o,a)};
26
    ttq.load('YOUR_PIXEL_ID');
27
    ttq.page();
28
  }(window, document, 'ttq');
29
</script>

1
<!-- Google Ads Conversion Tracking -->
2
<script type="text/plain" data-category="marketing"
3
  data-service="Google Ads"
4
  data-src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXX">
5
</script>
6
<script type="text/plain" data-category="marketing"
7
  data-service="Google Ads">
8
  window.dataLayer = window.dataLayer || [];
9
  function gtag(){dataLayer.push(arguments);}
10
  gtag('js', new Date());
11
  gtag('config', 'AW-XXXXXXX');
12
</script>

1
<!-- This runs when user ACCEPTS analytics -->
2
<script type="text/plain" data-category="analytics">
3
  gtag('config', 'G-XXXXXXX');
4
</script>
5
6
<!-- This runs when user DISABLES analytics -->
7
<script type="text/plain" data-category="!analytics">
8
  window['ga-disable-G-XXXXXXX'] = true;
9
  document.cookie = '_ga=; Max-Age=0; path=/;';
10
  document.cookie = '_ga_XXXXXXX=; Max-Age=0; path=/;';
11
</script>