add GTM script tag (#399)

* add scripts for gtm tags for eta * update hof version to 20.2.19 * 20.2.20 * small fix to gtm tag script * update hof version 20.2.21 * - add missing comma in dataLayer push payload - add function to sanitize page pathnames in dataLayer payload events * 20.2.22 * add scripts for gtm tags for eta * 20.2.20 * small fix to gtm tag script * update hof version 20.2.21 * - add missing comma in dataLayer push payload - add function to sanitize page pathnames in dataLayer payload events * 20.2.22 * - fix linting errors - add environmentType template variable for pageLoad event * - upgrade beta version to 20.2.24 - add validation that cookies are accepted before running GTM snippets * - upgrade beta version to 20.2.26 - move gtm snippet from body to head in gov-uk html template - validate cookies accepted before running gtm * fix linting errors * remove slash * 20.2.28 - fix gtm datalayer snippet * apply conditional logic for "dataLayer" snippet to only show in ETA and not other forms * set hof version to 20.2.20
UKHomeOfficeForms · Nov 2, 2023 · 3a2fe40 · 3a2fe40
1 parent 9ed6e9f
commit 3a2fe40
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 21 deletions.
diff --git a/config/hof-defaults.js b/config/hof-defaults.js
@@ -22,6 +22,7 @@ const defaults = {
   env: process.env.NODE_ENV || 'development',
   gaTagId: process.env.GA_TAG || 'Test-GA-Tag',
   ga4TagId: process.env.GA_4_TAG,
+  gtmTagId: process.env.GTM_TAG || false,
   gaCrossDomainTrackingTagId: process.env.GDS_CROSS_DOMAIN_GA_TAG,
   loglevel: process.env.LOG_LEVEL || 'info',
   ignoreMiddlewareLogs: ['/healthz'],

diff --git a/frontend/govuk-template/build/govuk_template.html b/frontend/govuk-template/build/govuk_template.html
@@ -5,39 +5,38 @@
   <head>
     <meta charset="utf-8" />
     <title>{{ pageTitle }}</title>
+    {{{ head }}}
 
     <link rel="shortcut icon" sizes="16x16 32x32 48x48" href="{{assetPath}}images/favicon.ico" type="image/x-icon">
-      <link rel="mask-icon" href="{{assetPath}}images/govuk-mask-icon.svg" color="#0b0c0c"> 
+      <link rel="mask-icon" href="{{assetPath}}images/govuk-mask-icon.svg" color="#0b0c0c">
       <link rel="apple-touch-icon" sizes="180x180" href="{{assetPath}}images/govuk-apple-touch-icon-180x180.png">
       <link rel="apple-touch-icon" sizes="167x167" href="{{assetPath}}images/govuk-apple-touch-icon-167x167.png">
       <link rel="apple-touch-icon" sizes="152x152" href="{{assetPath}}images/govuk-apple-touch-icon-152x152.png">
       <link rel="apple-touch-icon" href="{{assetPath}}images/govuk-apple-touch-icon.png">
-    
-    
+
+
     <meta name="theme-color" content="#0b0c0c" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    {{{ head }}}
-
-
+
     <meta property="og:image" content="{{assetPath}}images/opengraph-image.png">
   </head>
 
   <body class="{{ bodyClasses }} govuk-template__body  js-enabled" >
     <script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
 
-    
+
 
     <div id="global-cookie-message" class="gem-c-cookie-banner govuk-clearfix" data-module="cookie-banner" role="region" aria-label="cookie banner" data-nosnippet="">
        {{{ cookieMessage }}}
     </div>
-	
-	{{{ bodyStart }}}  
-	
+
+	{{{ bodyStart }}}
+
     <header role="banner" id="govuk-header" class="{{{ headerClass }}}">
       <div class="govuk-header__container govuk-width-container">
-        
+
           <div class="govuk-header__logo">
             <a href="{{{ homepageUrl }}}" title="{{ logoLinkTitle }}" id="logo" class="govuk-header__link govuk-header__link--homepage" target="_blank" data-module="track-click" data-track-category="homeLinkClicked" data-track-action="homeHeader">
 			<span class="govuk-header__logotype">
@@ -57,11 +56,11 @@
             </a>
           </div>
           {{{ insideHeader }}}
-        
+
         {{{ propositionHeader }}}
       </div>
     </header>
-    
+
 
     {{{ afterHeader }}}
 
@@ -81,7 +80,7 @@ <h2 class="govuk-visually-hidden">Support links</h2>
 			      <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
                 <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145"></path>
             </svg>
-            
+
 			      <span class="govuk-footer__licence-description">{{{ licenceMessage }}}</span>
           </div>
 
@@ -93,12 +92,12 @@ <h2 class="govuk-visually-hidden">Support links</h2>
     </footer>
 
     <div id="global-app-error" class="app-error hidden"></div>
-	
+
 
     {{{ bodyEnd }}}
-	
-	
+
+
     <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>if (typeof window.GOVUK === 'undefined') document.body.className = document.body.className.replace('js-enabled', '');</script>
-	
+
   </body>
 </html>
diff --git a/frontend/template-partials/views/partials/gatag.html b/frontend/template-partials/views/partials/gatag.html
@@ -34,7 +34,6 @@
           ga('govuk_shared.send', 'pageview')
         {{/gaCrossDomainTrackingTagId}}
       }
-
     </script>
 {{/gaTagId}}
 

diff --git a/frontend/template-partials/views/partials/head.html b/frontend/template-partials/views/partials/head.html
@@ -1,2 +1,30 @@
+{{#gtmTagId}}
+{{#cookiesAccepted}}
+{{#isETA}}
+<!-- Google Tag Manager Data Layer for ETA -->
+<script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>
+  var dataLayer = window.dataLayer || [];
+  dataLayer.push({
+    'event': 'pageLoad',
+    'pageName': 'ETA | Customer Contact Webform | {{gtm-page}}',
+    'applicationType': 'ETA | Customer Contact',
+    'environmentType': '{{environmentType}}'
+  });
+</script>
+<!-- End Google Tag Manager Data Layer for ETA -->
+{{/isETA}}
+
+<!-- Google Tag Manager -->
+<script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>
+  (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','{{gtmTagId}}');
+</script>
+<!-- End Google Tag Manager -->
+{{/cookiesAccepted}}
+{{/gtmTagId}}
+
 <meta name="format-detection" content="telephone=no">
 <link rel="stylesheet" href="{{assetPath}}/css/app.css">
diff --git a/lib/ga-tag.js b/lib/ga-tag.js
@@ -2,6 +2,16 @@
 
 const _ = require('lodash');
 
+const convertToGTMPage = text => {
+  // Remove leading and trailing slashes
+  let str = text.replace(/^\/|\/$/g, '');
+  // Replace hyphens with spaces and capitalize each word
+  str = str.replace(/-+/g, ' ').replace(/(^|\s)\S/g, function (match) {
+    return match.toUpperCase();
+  });
+  return str;
+};
+
 const pageView = (path, pageMap) => pageMap.get(path) || path;
 
 const createUris = routes => {
@@ -42,19 +52,26 @@ const setupPageMap = routes => {
 module.exports = (app, config) => {
   const gaTagId = config.gaTagId;
   const ga4TagId = config.ga4TagId;
+  const gtmTagId = config.gtmTagId;
+  const environmentType = config.environmentType ? config.environmentType : 'dev';
   const gaCrossDomainTrackingTagId = config.gaCrossDomainTrackingTagId;
   const routes = config.routes;
 
   if (gaTagId || ga4TagId) {
     const pageMap = setupPageMap(routes);
 
     app.use((req, res, next) => {
+      const page = pageView(req.path, pageMap);
       res.locals.gaAllowDebug = config.env === 'development';
+      res.locals.isETA = config.appName === 'ETA';
       res.locals.gaTagId = gaTagId;
       res.locals.ga4TagId = ga4TagId;
+      res.locals.gtmTagId = gtmTagId;
+      res.locals.environmentType = environmentType;
       res.locals.gaCrossDomainTrackingTagId = gaCrossDomainTrackingTagId;
       res.locals['ga-id'] = gaTagId;
-      res.locals['ga-page'] = pageView(req.path, pageMap);
+      res.locals['ga-page'] = page;
+      res.locals['gtm-page'] = convertToGTMPage(page);
       next();
     });
   }

diff --git a/middleware/cookies.js b/middleware/cookies.js
@@ -22,6 +22,8 @@ module.exports = options => {
     const reqIsCookieCheckRedirect = req.query[paramName] !== undefined;
 
     if (reqIncludesCookies || isHealthcheckUrl(req.path, healthcheckUrls)) {
+      const prefs = 'cookie_preferences' in req.cookies ? JSON.parse(req.cookies.cookie_preferences) : {};
+      res.locals.cookiesAccepted = Boolean(prefs.usage);
       next();
     } else if (req.cookies === undefined || (!Object.keys(req.cookies).length && reqIsCookieCheckRedirect)) {
       const err = new Error('Cookies required');

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.2.21",
+  "version": "20.3.0",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",