Insert Google Tag Manager snippet in template (#1811)

https://eaflood.atlassian.net/browse/IWTF-3732 This PR adds the snippet for Google Tag Manager to the default layout. This snippet should only be inserted when the container ID is present.
DEFRA · Nov 2, 2023 · 1ff5e92 · 1ff5e92
1 parent 6b7bc62
commit 1ff5e92
Show file tree

Hide file tree

Showing 9 changed files with 94 additions and 1 deletion.
diff --git a/docker/env/gafl_webapp.env.example b/docker/env/gafl_webapp.env.example
@@ -27,6 +27,7 @@ DEBUG=webapp:*
 
 # Tracking
 #ANALYTICS_PRIMARY_PROPERTY=G-DJMSHRPMW8 // this is the non-prod tracking update as required
+#GTM_CONTAINER_ID=GTM-ABC1234
 
 # Welsh language feature switch
 SHOW_WELSH_CONTENT=true

diff --git a/packages/gafl-webapp-service/src/__tests__/server.spec.js b/packages/gafl-webapp-service/src/__tests__/server.spec.js
@@ -150,6 +150,28 @@ describe('The server', () => {
       expect(request.response.source.context._uri[element]).toEqual(expect.stringMatching(regexMatch))
     })
 
+    describe('logGtmConfig', () => {
+      it('should log the gtmContainerId value if it is set', async () => {
+        const expectedId = 'GTM-ABC1234'
+        process.env.GTM_CONTAINER_ID = expectedId
+        const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(jest.fn())
+        createServer(catboxOptions)
+        await init()
+        expect(consoleLogSpy).toHaveBeenCalledWith(`gtmContainerId is set to ${expectedId}`)
+        await server.stop()
+        delete process.env.GTM_CONTAINER_ID
+      })
+
+      it('should log that gtmContainerId is not set if it is not set', async () => {
+        delete process.env.GTM_CONTAINER_ID
+        const consoleLogSpy = jest.spyOn(console, 'log').mockImplementation(jest.fn())
+        createServer(catboxOptions)
+        await init()
+        expect(consoleLogSpy).toHaveBeenCalledWith('gtmContainerId is not set')
+        await server.stop()
+      })
+    })
+
     const getSampleRequest = (overrides = {}) => ({
       auth: {},
       method: 'get',

diff --git a/packages/gafl-webapp-service/src/handlers/__tests__/__snapshots__/page-handler.spec.js.snap b/packages/gafl-webapp-service/src/handlers/__tests__/__snapshots__/page-handler.spec.js.snap
@@ -12,6 +12,7 @@ exports[`The page handler function sets the value of pageData with displayAnalyt
         "analyticsSelected": false,
         "backRef": null,
         "displayAnalytics": false,
+        "gtmContainerId": false,
         "mssgs": undefined,
         "pageLanguageSetToWelsh": false,
         "uri": Object {
@@ -41,6 +42,7 @@ exports[`The page handler function sets the value of pageData with displayAnalyt
         "analyticsSelected": false,
         "backRef": null,
         "displayAnalytics": true,
+        "gtmContainerId": false,
         "mssgs": undefined,
         "pageLanguageSetToWelsh": false,
         "uri": Object {

diff --git a/packages/gafl-webapp-service/src/handlers/__tests__/page-handler.spec.js b/packages/gafl-webapp-service/src/handlers/__tests__/page-handler.spec.js
@@ -156,6 +156,25 @@ describe('The page handler function', () => {
     expect(toolkit.view).toMatchSnapshot()
   })
 
+  it('sets the value of gtmContainerId to the GTM_CONTAINER_ID env var', async () => {
+    const expectedValue = 'expected'
+    process.env.GTM_CONTAINER_ID = expectedValue
+
+    const { get } = pageHandler('', 'view', '/next/page')
+    const toolkit = getMockToolkit()
+
+    await get(getMockRequest(), toolkit)
+
+    expect(toolkit.view).toHaveBeenCalledWith(
+      expect.any(String),
+      expect.objectContaining({
+        gtmContainerId: expectedValue
+      })
+    )
+
+    delete process.env.GTM_CONTAINER_ID
+  })
+
   it.each([
     ['payment cancelled', PAYMENT_CANCELLED.uri],
     ['payment failed', PAYMENT_FAILED.uri],

diff --git a/packages/gafl-webapp-service/src/handlers/page-handler.js b/packages/gafl-webapp-service/src/handlers/page-handler.js
@@ -130,6 +130,7 @@ export default (path, view, completion, getData) => ({
     pageData.analyticsMessageDisplayed = analytics ? analytics[ANALYTICS.seenMessage] : false
     pageData.analyticsSelected = analytics ? analytics[ANALYTICS.selected] : false
     pageData.acceptedTracking = analytics ? analytics[ANALYTICS.acceptTracking] : false
+    pageData.gtmContainerId = process.env.GTM_CONTAINER_ID || false
 
     pageData.displayAnalytics = displayAnalytics(request)
 

diff --git a/packages/gafl-webapp-service/src/pages/layout/layout.njk b/packages/gafl-webapp-service/src/pages/layout/layout.njk
@@ -24,6 +24,11 @@
 <meta http-equiv="Cache-Control" content="no-store" />
 <meta http-equiv="Pragma" content="no-cache">
 <meta http-equiv="Expires" content="-1">
+{% if gtmContainerId %}
+    <!-- Google Tag Manager -->
+    <script>(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','{{gtmContainerId}}');</script>
+    <!-- End Google Tag Manager -->
+{% endif %}
 {% endblock %}
 
 {% block header %}
@@ -170,7 +175,13 @@
    {% endif %}
 {% endblock %}
 
-{% block bodyStart %}{% endblock %}
+{% block bodyStart %}
+{% if gtmContainerId %}
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{gtmContainerId}}" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+{% endif %}
+{% endblock %}
 
 {% set footerHtml %}
     <div class="no-print">

diff --git a/packages/gafl-webapp-service/src/routes/__tests__/misc-routes-handlers.spec.js b/packages/gafl-webapp-service/src/routes/__tests__/misc-routes-handlers.spec.js
@@ -205,6 +205,7 @@ describe('guidance page handlers', () => {
 
     expect(mockToolkit.view).toHaveBeenCalledWith(uri.NEW_PRICES.page, {
       altLang: ['that-locale'],
+      gtmContainerId: false,
       mssgs: catalog,
       uri: {
         back: mockUri
@@ -262,6 +263,24 @@ describe('guidance page handlers', () => {
         })
       )
     })
+
+    it('sets the value of gtmContainerId to the GTM_CONTAINER_ID env var', async () => {
+      const expectedValue = 'expected'
+      process.env.GTM_CONTAINER_ID = expectedValue
+
+      const toolkit = getMockToolkit()
+      const request = getMockRequest()
+      await pageHandler(request, toolkit)
+
+      expect(toolkit.view).toHaveBeenCalledWith(
+        expect.any(String),
+        expect.objectContaining({
+          gtmContainerId: expectedValue
+        })
+      )
+
+      delete process.env.GTM_CONTAINER_ID
+    })
   })
 
   const getMockRequest = (i18nValues, search = '') => {

diff --git a/packages/gafl-webapp-service/src/routes/misc-routes.js b/packages/gafl-webapp-service/src/routes/misc-routes.js
@@ -26,16 +26,20 @@ import { addLanguageCodeToUri } from '../processors/uri-helper.js'
 import analytics from '../handlers/analytics-handler.js'
 import { welshEnabledAndApplied } from '../processors/page-language-helper.js'
 
+const gtmContainerIdOrNull = () => process.env.GTM_CONTAINER_ID || false
+
 const simpleView = view => ({
   method: 'GET',
   path: view.uri,
   handler: async (request, h) => {
     const mssgs = request.i18n.getCatalog()
     const altLang = request.i18n.getLocales().filter(locale => locale !== request.i18n.getLocale())
+    const gtmContainerId = gtmContainerIdOrNull()
     const pageLanguageSetToWelsh = welshEnabledAndApplied(request)
     return h.view(view.page, {
       mssgs,
       altLang,
+      gtmContainerId,
       pageLanguageSetToWelsh,
       uri: {
         back: addLanguageCodeToUri(request, CONTROLLER.uri)
@@ -95,10 +99,12 @@ export default [
     path: COOKIES.uri,
     handler: async (request, h) => {
       const altLang = request.i18n.getLocales().filter(locale => locale !== request.i18n.getLocale())
+      const gtmContainerId = gtmContainerIdOrNull()
       const pageLanguageSetToWelsh = welshEnabledAndApplied(request)
 
       return h.view(COOKIES.page, {
         altLang,
+        gtmContainerId,
         pageLanguageSetToWelsh,
         mssgs: request.i18n.getCatalog(),
         cookie: {
@@ -118,10 +124,12 @@ export default [
     path: NEW_PRICES.uri,
     handler: async (request, h) => {
       const altLang = request.i18n.getLocales().filter(locale => locale !== request.i18n.getLocale())
+      const gtmContainerId = gtmContainerIdOrNull()
       const pageLanguageSetToWelsh = welshEnabledAndApplied(request)
 
       return h.view(NEW_PRICES.page, {
         altLang,
+        gtmContainerId,
         pageLanguageSetToWelsh,
         mssgs: request.i18n.getCatalog(),
         uri: {

diff --git a/packages/gafl-webapp-service/src/server.js b/packages/gafl-webapp-service/src/server.js
@@ -109,6 +109,14 @@ const addDefaultHeaders = (request, h) => {
   return h.continue
 }
 
+const logGtmConfig = gtmContainerId => {
+  if (gtmContainerId) {
+    console.log(`gtmContainerId is set to ${gtmContainerId}`)
+  } else {
+    console.log('gtmContainerId is not set')
+  }
+}
+
 const init = async () => {
   await server.register(getPlugins())
   const viewPaths = [...new Set(find.fileSync(/\.njk$/, path.join(Dirname, './src/pages')).map(f => path.dirname(f)))]
@@ -194,6 +202,8 @@ const init = async () => {
   server.route(routes)
   await server.start()
 
+  logGtmConfig(process.env.GTM_CONTAINER_ID)
+
   console.log('Server running on %s', server.info.uri)
 }