Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Insert Google Tag Manager snippet in template #1811

Merged
merged 5 commits into from
Nov 2, 2023
Merged

Insert Google Tag Manager snippet in template #1811

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c288a3e
Insert Google Tag Manager snippet in template
irisfaraway Oct 17, 2023
4a06d76
Only insert snippet if container ID is present
irisfaraway Oct 17, 2023
7f10327
Add GTM snippets
irisfaraway Oct 26, 2023
f373d0b
Default to false instead of null
irisfaraway Nov 2, 2023
234ad29
Log container ID status on startup
irisfaraway Nov 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docker/env/gafl_webapp.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 2 additions & 0 deletions packages/gafl-webapp-service/src/handlers/__tests__/__snapshots__/page-handler.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ exports[`The page handler function sets the value of pageData with displayAnalyt
"analyticsSelected": false,
"backRef": null,
"displayAnalytics": false,
"gtmContainerId": null,
"mssgs": undefined,
"pageLanguageSetToWelsh": false,
"uri": Object {
Expand Down Expand Up @@ -41,6 +42,7 @@ exports[`The page handler function sets the value of pageData with displayAnalyt
"analyticsSelected": false,
"backRef": null,
"displayAnalytics": true,
"gtmContainerId": null,
jaucourt marked this conversation as resolved.
Show resolved Hide resolved
"mssgs": undefined,
"pageLanguageSetToWelsh": false,
"uri": Object {
Expand Down
19 changes: 19 additions & 0 deletions packages/gafl-webapp-service/src/handlers/__tests__/page-handler.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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],
Expand Down
1 change: 1 addition & 0 deletions packages/gafl-webapp-service/src/handlers/page-handler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || null

pageData.displayAnalytics = displayAnalytics(request)

Expand Down
13 changes: 12 additions & 1 deletion packages/gafl-webapp-service/src/pages/layout/layout.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
jaucourt marked this conversation as resolved.
Show resolved Hide resolved
{% endblock %}

{% block header %}
Expand Down Expand Up @@ -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>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tiny point, but we don't need visibility:hidden if there's already display:none

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was the code Google provided so I'm wary of messing with it!

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, whoever wrote it doesn't understand CSS!

<!-- End Google Tag Manager (noscript) -->
{% endif %}
{% endblock %}

{% set footerHtml %}
<div class="no-print">
Expand Down
19 changes: 19 additions & 0 deletions packages/gafl-webapp-service/src/routes/__tests__/misc-routes-handlers.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,7 @@ describe('guidance page handlers', () => {

expect(mockToolkit.view).toHaveBeenCalledWith(uri.NEW_PRICES.page, {
altLang: ['that-locale'],
gtmContainerId: null,
mssgs: catalog,
uri: {
back: mockUri
Expand Down Expand Up @@ -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 = '') => {
Expand Down
8 changes: 8 additions & 0 deletions packages/gafl-webapp-service/src/routes/misc-routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 || null

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)
Expand Down Expand Up @@ -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: {
Expand All @@ -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: {
Expand Down
Loading