From b2347034d791b6c42cf6a948e2c2929e1e632a2e Mon Sep 17 00:00:00 2001
From: Oliver Turner <oliverturner@users.noreply.github.com>
Date: Mon, 28 Oct 2024 11:40:56 +0000
Subject: [PATCH 1/2] Switch source of GTM based on flag

---
 .../src/__test__/components/GTMHead.test.tsx     | 12 ++++++++++++
 .../dotcom-ui-shell/src/components/GTMHead.tsx   | 16 +++++++++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/packages/dotcom-ui-shell/src/__test__/components/GTMHead.test.tsx b/packages/dotcom-ui-shell/src/__test__/components/GTMHead.test.tsx
index ca264db58..91c977c16 100644
--- a/packages/dotcom-ui-shell/src/__test__/components/GTMHead.test.tsx
+++ b/packages/dotcom-ui-shell/src/__test__/components/GTMHead.test.tsx
@@ -24,4 +24,16 @@ describe('dotcom-ui-shell/src/components/GTMHead', () => {
     const tree = renderer.create(<GTMHead {...props} />).toJSON()
     expect(tree).toMatchSnapshot()
   })
+
+  it('renders the first party gtm script when the ads-first-party-gtm flag is on', () => {
+    const props = {
+      flags: {
+        enableGTM: true,
+        'ads-first-party-gtm': true
+      }
+    }
+
+    const tree = renderer.create(<GTMHead {...props} />).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
 })
diff --git a/packages/dotcom-ui-shell/src/components/GTMHead.tsx b/packages/dotcom-ui-shell/src/components/GTMHead.tsx
index dc97521ce..a06c7f4d8 100644
--- a/packages/dotcom-ui-shell/src/components/GTMHead.tsx
+++ b/packages/dotcom-ui-shell/src/components/GTMHead.tsx
@@ -7,11 +7,17 @@ const GTMHead = ({ flags }: { flags: TFlagsData }) => {
     return null
   }
 
-  const tagManager = `(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','GTM-NWQJW68');`
+  const src = flags['ads-first-party-gtm']
+    ? 'https://www.ft.com/page-resources'
+    : 'https://www.googletagmanager.com/gtm.js?id=GTM-NWQJW68'
+
+  const tagManager = `(function(w,d,s,l){
+    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='${src}'+dl;
+    f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer');`
 
   return <script dangerouslySetInnerHTML={{ __html: tagManager }} />
 }

From 2a7df5932aa64d186b17289c695b930e5efe81dd Mon Sep 17 00:00:00 2001
From: Oliver Turner <oliverturner@users.noreply.github.com>
Date: Mon, 28 Oct 2024 12:01:23 +0000
Subject: [PATCH 2/2] Update snapshots

---
 .../__snapshots__/GTMHead.test.tsx.snap       | 28 +++++++++++++++----
 .../__snapshots__/Shell.test.tsx.snap         | 12 ++++----
 2 files changed, 30 insertions(+), 10 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 16f44b91b..b8ae656e1 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
@@ -2,15 +2,33 @@
 
 exports[`dotcom-ui-shell/src/components/GTMHead renders null when the enableGTM flag is off 1`] = `null`;
 
+exports[`dotcom-ui-shell/src/components/GTMHead renders the first party gtm script when the ads-first-party-gtm flag is on 1`] = `
+<script
+  dangerouslySetInnerHTML={
+    Object {
+      "__html": "(function(w,d,s,l){
+    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;
+    f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer');",
+    }
+  }
+/>
+`;
+
 exports[`dotcom-ui-shell/src/components/GTMHead renders the gtm head script when the enableGTM flag is on 1`] = `
 <script
   dangerouslySetInnerHTML={
     Object {
-      "__html": "(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','GTM-NWQJW68');",
+      "__html": "(function(w,d,s,l){
+    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=GTM-NWQJW68'+dl;
+    f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer');",
     }
   }
 />
diff --git a/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap b/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap
index 3b4d9f50e..c890386cf 100644
--- a/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap
+++ b/packages/dotcom-ui-shell/src/__test__/components/__snapshots__/Shell.test.tsx.snap
@@ -246,11 +246,13 @@ exports[`dotcom-ui-shell/src/components/Shell renders the GTM script when the en
     <script
       dangerouslySetInnerHTML={
         Object {
-          "__html": "(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','GTM-NWQJW68');",
+          "__html": "(function(w,d,s,l){
+    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=GTM-NWQJW68'+dl;
+    f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer');",
         }
       }
     />