From 1ff5e92c1479de1ca9f4d869177c0448268000a8 Mon Sep 17 00:00:00 2001 From: Iris Faraway Date: Thu, 2 Nov 2023 15:12:46 +0000 Subject: [PATCH] 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. --- docker/env/gafl_webapp.env.example | 1 + .../src/__tests__/server.spec.js | 22 +++++++++++++++++++ .../__snapshots__/page-handler.spec.js.snap | 2 ++ .../handlers/__tests__/page-handler.spec.js | 19 ++++++++++++++++ .../src/handlers/page-handler.js | 1 + .../src/pages/layout/layout.njk | 13 ++++++++++- .../__tests__/misc-routes-handlers.spec.js | 19 ++++++++++++++++ .../src/routes/misc-routes.js | 8 +++++++ packages/gafl-webapp-service/src/server.js | 10 +++++++++ 9 files changed, 94 insertions(+), 1 deletion(-) diff --git a/docker/env/gafl_webapp.env.example b/docker/env/gafl_webapp.env.example index ba7290e83f..c06893878f 100644 --- 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 index d7ebdee57a..d5e7c473a2 100644 --- 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 index 6b58fda164..c94703341c 100644 --- 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 index 7411943aae..8e12a68638 100644 --- 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 index a0f86ce43b..bfc58b3182 100644 --- 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 index 8ab18eb601..4263f8c487 100644 --- a/packages/gafl-webapp-service/src/pages/layout/layout.njk +++ b/packages/gafl-webapp-service/src/pages/layout/layout.njk @@ -24,6 +24,11 @@ +{% if gtmContainerId %} + + + +{% endif %} {% endblock %} {% block header %} @@ -170,7 +175,13 @@ {% endif %} {% endblock %} -{% block bodyStart %}{% endblock %} +{% block bodyStart %} +{% if gtmContainerId %} + + + +{% endif %} +{% endblock %} {% set footerHtml %}
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 index 8ac694baf3..846eaa7196 100644 --- 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 index 3fa37ae8e4..40bd95e71c 100644 --- 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 index 90896cb472..c8e7527d6f 100644 --- 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) }