From 3c859d07d18c33b2e44fe245a6ef21149bdbf0c2 Mon Sep 17 00:00:00 2001
From: Oliver Turner <oliverturner@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:10:36 +0000
Subject: [PATCH 1/2] Correct proxy URL to include traling slash

---
 .../src/__test__/components/__snapshots__/GTMHead.test.tsx.snap | 2 +-
 packages/dotcom-ui-shell/src/components/GTMHead.tsx             | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/GTMHead.test.tsx.snap b/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/GTMHead.test.tsx.snap
index b8ae656e1..931566ad6 100644
--- a/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/GTMHead.test.tsx.snap
+++ b/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/GTMHead.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`dotcom-ui-shell/src/components/GTMHead renders the first party gtm scri
     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.ft.com/page-resources'+dl;
+    j.src='https://www.ft.com/page-resources/'+dl;
     f.parentNode.insertBefore(j,f);
   })(window,document,'script','dataLayer');",
     }
diff --git a/packages/dotcom-ui-shell/src/components/GTMHead.tsx b/packages/dotcom-ui-shell/src/components/GTMHead.tsx
index a06c7f4d8..fc3c4e222 100644
--- a/packages/dotcom-ui-shell/src/components/GTMHead.tsx
+++ b/packages/dotcom-ui-shell/src/components/GTMHead.tsx
@@ -8,7 +8,7 @@ const GTMHead = ({ flags }: { flags: TFlagsData }) => {
   }
 
   const src = flags['ads-first-party-gtm']
-    ? 'https://www.ft.com/page-resources'
+    ? 'https://www.ft.com/page-resources/'
     : 'https://www.googletagmanager.com/gtm.js?id=GTM-NWQJW68'
 
   const tagManager = `(function(w,d,s,l){

From 1f69707d6484a4e8039a3fe2dab706e2f4db6d7e Mon Sep 17 00:00:00 2001
From: Oliver Turner <oliverturner@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:11:13 +0000
Subject: [PATCH 2/2] Add integration tests

---
 examples/ft-ui/__test__/gtm.test.js        | 23 ++++++++++++++++++++++
 examples/ft-ui/server/controllers/home.jsx | 14 ++++++++++++-
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 examples/ft-ui/__test__/gtm.test.js

diff --git a/examples/ft-ui/__test__/gtm.test.js b/examples/ft-ui/__test__/gtm.test.js
new file mode 100644
index 000000000..b488889e6
--- /dev/null
+++ b/examples/ft-ui/__test__/gtm.test.js
@@ -0,0 +1,23 @@
+const baseUrl = 'http://localhost:3456'
+
+describe('examples/ft-ui/gtm', () => {
+  let response
+
+  it('By default it loads GTM from googletagmanager.com', async () => {
+    await page.goto(baseUrl, { waitUntil: 'load' })
+    await expect(page).toMatchElement('script[src="https://www.googletagmanager.com/gtm.js?id=GTM-NWQJW68"]')
+  })
+
+  // Remove this once "ads-first-party-gtm" Toggler flag is removed
+  if (!process.env.CI) {
+    it('Behind a flag it loads GTM from first-party proxy', async () => {
+      await page.goto(`${baseUrl}?ads-first-party-gtm=true`, { waitUntil: 'load' })
+
+      // Since the query sets the appName to "home-page", the PG load is triggered
+      // This acts as a proxy for verifying GTM's behaviour
+      await page.waitForSelector('script[src^="https://www.ft.com/__assets/hashed/pg-ads/adapters"]')
+
+      await expect(page).toMatchElement('script[src="https://www.ft.com/page-resources/"]')
+    })
+  }
+})
diff --git a/examples/ft-ui/server/controllers/home.jsx b/examples/ft-ui/server/controllers/home.jsx
index cbb615353..68f419259 100644
--- a/examples/ft-ui/server/controllers/home.jsx
+++ b/examples/ft-ui/server/controllers/home.jsx
@@ -3,6 +3,12 @@ import ReactDOM from 'react-dom/server'
 import { Shell } from '@financial-times/dotcom-ui-shell'
 import { Layout } from '@financial-times/dotcom-ui-layout'
 
+const flags = {
+  ads: true,
+  enableGTM: true,
+  adsEnableTestCreatives: true
+}
+
 export function homeController(request, response, next) {
   const appContext = {
     appName: 'ft-ui',
@@ -14,11 +20,17 @@ export function homeController(request, response, next) {
     contents: '<div align="center"><p>Hello, welcome to Page Kit.</p></div>'
   }
 
+  if (request.query['ads-first-party-gtm']) {
+    flags['ads-first-party-gtm'] = true
+    appContext.appName = 'home-page'
+  }
+
   const shellProps = {
     scripts: ['public/scripts.bundle.js'],
     stylesheets: ['public/page-kit-layout-styles.css', 'public/styles.css'],
     pageTitle: pageData.title,
-    appContext: appContext
+    appContext,
+    flags
   }
 
   const userIsLoggedIn = request.query.userIsLoggedIn