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

Author: oliverturner

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()
+  })
 })

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

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

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 }} />
 }