hof 20.3.6-beta-gtm → 20.3.8-beta-gtm

package/config/hof-defaults.js

@@ -22,7 +22,20 @@ 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, serviceName) {
+      switch (serviceName) {
+        case 'ETA':
+          return 'ETA | Customer Contact | ' + convertPage(page);
+        // Add other services here...
+        default:
+          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

@@ -3,12 +3,9 @@
 <!-- Google Tag Manager Data Layer  -->
 <script {{#nonce}}nonce="{{nonce}}"{{/nonce}}>
   var dataLayer = window.dataLayer || [];
-  dataLayer.push({
-    'event': '{{pageEvent}}',
-    'pageName': '{{pageName}}',
-    'applicationType': '{{applicationType}}',
-    'environmentType': '{{environmentType}}'
-  });
+  dataLayer.push(
+    {{{gtmConfig}}}
+  );
 </script>
 <!-- End Google Tag Manager Data Layer  -->
 

package/lib/ga-tag.js

@@ -52,12 +52,11 @@ 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 || gtmTagId) {
+  if (gaTagId || ga4TagId || gtm.tagId) {
     const pageMap = setupPageMap(routes);
 
     app.use((req, res, next) => {
@@ -74,47 +73,17 @@ module.exports = (app, config) => {
       };
 
       // Adding extra properties if a GTM TAG is available
-      if (gtmTagId) {
+      if (gtm.tagId) {
+        gtm.config.pageName = gtm.composePageName(page, convertToGTMPage);
         Object.assign(properties, {
-          gtmTagId: gtmTagId,
-          'gtm-page': convertToGTMPage(page),
-          eventName: 'pageLoad',
-          pageName: `ETA | Customer Contact Webform | ${convertToGTMPage(page)}`,
-          applicationType: 'ETA | Customer Contact',
-          environmentType: environmentType
+          gtmConfig: JSON.stringify(gtm.config),
+          gtmTagId: gtm.tagId
         });
       }
-
       res.locals = Object.assign(res.locals, properties);
       next();
     });
   }
 
-  /*
-   if (gaTagId || ga4TagId || gtmTagId) {
-    const pageMap = setupPageMap(routes);
-
-    app.use((req, res, next) => {
-      const page = pageView(req.path, pageMap);
-      res.locals.gaAllowDebug = config.env === 'development';
-
-      if (gtmTagId) {
-        res.locals.gtmTagId = gtmTagId;
-        res.locals['gtm-page'] = convertToGTMPage(page);
-        res.locals.eventName = "pageLoad"
-        res.locals.pageName = `ETA | Customer Contact Webform | ${res.locals['gtm-page']}`
-        res.locals.applicationType = "ETA | Customer Contact"
-        res.locals.environmentType = environmentType;
-      }
-      res.locals.gaTagId = gaTagId;
-      res.locals.ga4TagId = ga4TagId;
-      res.locals.gaCrossDomainTrackingTagId = gaCrossDomainTrackingTagId;
-      res.locals['ga-id'] = gaTagId;
-      res.locals['ga-page'] = page;
-      next();
-    });
-  }
-  */
-
   return app;
 };

package/package.json

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