Merge pull request #1092 from Financial-Times/ADSDEV-2064/gtm-first-party-mode--example

Author: oliverturner

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/"]')
+    })
+  }
+})

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

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');",
     }

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){