hof 20.3.5-beta-gtm → 20.3.5

package/config/hof-defaults.js

@@ -22,7 +22,14 @@ 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,
+  // added to allow support for multiple HOF forms using GTM to customize how they track page views
+  gtm: {
+    tagId: process.env.GTM_TAG || false,
+    config: {},
+    composePageName: function (page, convertPage) {
+      return convertPage(page);
+    }
+  },
   gaCrossDomainTrackingTagId: process.env.GDS_CROSS_DOMAIN_GA_TAG,
   loglevel: process.env.LOG_LEVEL || 'info',
   ignoreMiddlewareLogs: ['/healthz'],

package/frontend/template-partials/views/partials/head.html

@@ -1,18 +1,13 @@
 {{#gtmTagId}}
 {{#cookiesAccepted}}
-{{#isETA}}
-<!-- Google Tag Manager Data Layer for ETA -->
+<!-- Google Tag Manager Data Layer  -->
 <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}}'
-  });
+  dataLayer.push(
+    {{{gtmConfig}}}
+  );
 </script>
-<!-- End Google Tag Manager Data Layer for ETA -->
-{{/isETA}}
+<!-- End Google Tag Manager Data Layer  -->
 
 <!-- Google Tag Manager -->
 <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>

package/lib/ga-tag.js

@@ -52,26 +52,35 @@ 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 gtm = config.gtm;
   const gaCrossDomainTrackingTagId = config.gaCrossDomainTrackingTagId;
   const routes = config.routes;
 
-  if (gaTagId || ga4TagId) {
+  if (gaTagId || ga4TagId || gtm.tagId) {
     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.includes('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'] = page;
-      res.locals['gtm-page'] = convertToGTMPage(page);
+
+      // Preparing common res.locals properties
+      const properties = {
+        gaAllowDebug: config.env === 'development',
+        gaTagId: gaTagId,
+        ga4TagId: ga4TagId,
+        gaCrossDomainTrackingTagId: gaCrossDomainTrackingTagId,
+        'ga-id': gaTagId,
+        'ga-page': page
+      };
+
+      // Adding extra properties if a GTM TAG is available
+      if (gtm.tagId) {
+        gtm.config.pageName = gtm.composePageName(page, convertToGTMPage);
+        Object.assign(properties, {
+          gtmConfig: JSON.stringify(gtm.config),
+          gtmTagId: gtm.tagId
+        });
+      }
+      res.locals = Object.assign(res.locals, properties);
       next();
     });
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hof",
   "description": "A bootstrap for HOF projects",
-  "version": "20.3.5-beta-gtm",
+  "version": "20.3.5",
   "license": "MIT",
   "main": "index.js",
   "author": "HomeOffice",