Reorganize Google Tag Manager snipped and initialization

so that Export Wins Review and the rest of Data Hub have their own gtag initialization.
uktrade · Sep 17, 2024 · 8fe5802 · 8fe5802
1 parent 3e039e5
commit 8fe5802
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 47 deletions.
diff --git a/src/apps/__export-wins-review/view.njk b/src/apps/__export-wins-review/view.njk
@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>DBT Export Wins</title>
     <link href="{{ getAssetPath('shared.css') }}" media="screen, print" rel="stylesheet">
-    {% include "_includes/google-tag-manager-snippet.njk" %}
+    {% include "_includes/google-tag-manager/consent-needed.njk" %}
   </head>
   <body>
+    {% include "_includes/google-tag-manager/no-script.njk" %}
     {% include "_includes/csp-nonce.njk" %}
     <div id="react-app">
       <noscript>Please enable JavaScript in your browser to see the content.</noscript>

diff --git a/src/templates/_includes/google-tag-manager-no-script.njk b/src/templates/_includes/google-tag-manager-no-script.njk
diff --git a/src/templates/_includes/google-tag-manager-snippet.njk b/src/templates/_includes/google-tag-manager-snippet.njk
diff --git a/src/templates/_includes/google-tag-manager/consent-needed.njk b/src/templates/_includes/google-tag-manager/consent-needed.njk
@@ -0,0 +1,18 @@
+{#
+This is a set-up of Google Tag Manager for external users
+(currently anyone who accessess /exportwins/review/*),
+for whom we need to manage consent to use Google Analytics cookies.
+#}
+{% if GOOGLE_TAG_MANAGER_KEY %}
+{% include "_includes/google-tag-manager/gtag-definition.njk" %}
+<script nonce='{{ cspNonce }}'>
+  window.gtag('consent', 'default', {
+    ad_storage: 'denied',
+    analytics_storage: localStorage.getItem('cookie-consent') || 'denied',
+    ad_user_data: 'denied',
+    ad_personalization: 'denied',
+    wait_for_update: 500
+  });
+</script>
+{% include "_includes/google-tag-manager/snippet.njk" %}
+{% endif %}
diff --git a/src/templates/_includes/google-tag-manager/consent-not-needed.njk b/src/templates/_includes/google-tag-manager/consent-not-needed.njk
@@ -0,0 +1,22 @@
+{#
+This is a set-up of Google Tag Manager for internal users,
+who are assumed that they have given consent for using
+Google Analytics cookies.
+#}
+{% if GOOGLE_TAG_MANAGER_KEY %}
+{% include "_includes/google-tag-manager/gtag-definition.njk" %}
+<script nonce='{{ cspNonce }}'>
+  window.gtag({
+    userId: '{{user.id}}',
+    userUserId: '{{user.sso_user_id}}',
+  })
+
+  if ('{{userFeatureGTMEvent}}') {
+    window.gtag({
+      name: '{{userFeatureGTMEvent.name}}',
+      event: '{{userFeatureGTMEvent.event}}',
+    })
+  }
+</script>
+{% include "_includes/google-tag-manager/snippet.njk" %}
+{% endif %}
diff --git a/src/templates/_includes/google-tag-manager/gtag-definition.njk b/src/templates/_includes/google-tag-manager/gtag-definition.njk
@@ -0,0 +1,4 @@
+<script nonce='{{ cspNonce }}'>
+  window.dataLayer = window.dataLayer || []
+  window.gtag = function() { dataLayer.push(arguments); }
+</script>
diff --git a/src/templates/_includes/google-tag-manager/no-script.njk b/src/templates/_includes/google-tag-manager/no-script.njk
@@ -0,0 +1,6 @@
+{% if GOOGLE_TAG_MANAGER_KEY %}
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GOOGLE_TAG_MANAGER_KEY }}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->
+{% endif %}
diff --git a/src/templates/_includes/google-tag-manager/snippet.njk b/src/templates/_includes/google-tag-manager/snippet.njk
@@ -0,0 +1,8 @@
+<!-- Google Tag Manager -->
+<meta property="WTF" content="window,document,'script','dataLayer','{{ GOOGLE_TAG_MANAGER_KEY }}')"/>
+<script nonce='{{ cspNonce }}'>(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','{{ GOOGLE_TAG_MANAGER_KEY }}');</script>
+<!-- End Google Tag Manager -->
diff --git a/src/templates/_layouts/template.njk b/src/templates/_layouts/template.njk
@@ -68,7 +68,7 @@
   <link href="{{ getAssetPath('shared.css') }}" media="screen, print" rel="stylesheet">
 
   <!-- Google Tag Manager (GTM) -->
-  {% include "_includes/google-tag-manager-snippet.njk" %}
+  {% include "_includes/google-tag-manager/consent-not-needed.njk" %}
 
   <script nonce="{{ cspNonce }}">
     (function (d) {d.className = d.className.replace (/\bno-js\b/, 'js-enabled')}) (document.documentElement)
@@ -78,7 +78,7 @@
 {% endblock %}
 
 {% block bodyStart %}
-  {% include "_includes/google-tag-manager-no-script.njk" %}
+  {% include "_includes/google-tag-manager/no-script.njk" %}
 
   <div class="notification-banner u-js-hidden u-print-hide" id="global-cookies-banner" role="alert">
     <p class="notification-banner__inner">

diff --git a/src/templates/react.njk b/src/templates/react.njk
@@ -27,7 +27,7 @@
   <!-- styles -->
   <link href="{{ getAssetPath('shared.css') }}" media="screen, print" rel="stylesheet">
 
-  {% include "_includes/google-tag-manager-snippet.njk" %}
+  {% include "_includes/google-tag-manager/consent-not-needed.njk" %}
   {% include "_includes/csp-nonce.njk" %}
 {% endblock %}