@financial-times/dotcom-ui-shell 11.1.0 → 11.2.0

package/dist/node/components/GTMHead.js

@@ -9,11 +9,16 @@ const GTMHead = ({ flags }) => {
     if (!flags.enableGTM) {
         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 react_1.default.createElement("script", { dangerouslySetInnerHTML: { __html: tagManager } });
 };
 GTMHead.defaultProps = {

package/dist/tsconfig.tsbuildinfo

@@ -292,7 +292,7 @@
         "affectsGlobalScope": false
       },
       "../src/components/GTMHead.tsx": {
-        "version": "e31c080c54a82d396a1c61617c923e6866b3cf7e706dda178ca0cd905c50376c",
+        "version": "5733c3cdecbf7c1730e584de72463644d1deb36ef67e41dcbcb8f377d28606fd",
         "signature": "1249c5957984b42592b9f0859f51602874351c427acf3813b59524ce9946c065",
         "affectsGlobalScope": false
       },
@@ -317,8 +317,8 @@
         "affectsGlobalScope": false
       },
       "../../../node_modules/@babel/types/lib/index.d.ts": {
-        "version": "e74998d5cefc2f29d583c10b99c1478fb810f1e46fbb06535bfb0bbba3c84aa5",
-        "signature": "e74998d5cefc2f29d583c10b99c1478fb810f1e46fbb06535bfb0bbba3c84aa5",
+        "version": "87141a0e8e193478dc3f1c33d380d899acd2df86a4e119e774df0156204d88cc",
+        "signature": "87141a0e8e193478dc3f1c33d380d899acd2df86a4e119e774df0156204d88cc",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/babel__generator/index.d.ts": {
@@ -327,8 +327,8 @@
         "affectsGlobalScope": false
       },
       "../../../node_modules/@babel/parser/typings/babel-parser.d.ts": {
-        "version": "43d058146b002d075f5d0033a6870321048297f1658eb0db559ba028383803a6",
-        "signature": "43d058146b002d075f5d0033a6870321048297f1658eb0db559ba028383803a6",
+        "version": "9d16476349353974716bd2ad745830d0542c18c9edad4566d77ccd9d61c6cfb2",
+        "signature": "9d16476349353974716bd2ad745830d0542c18c9edad4566d77ccd9d61c6cfb2",
         "affectsGlobalScope": false
       },
       "../../../node_modules/@types/babel__template/index.d.ts": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-ui-shell",
-  "version": "11.1.0",
+  "version": "11.2.0",
   "description": "",
   "main": "component.js",
   "browser": "browser.js",
@@ -20,10 +20,10 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@financial-times/dotcom-ui-app-context": "^11.1.0",
-    "@financial-times/dotcom-ui-base-styles": "^11.1.0",
-    "@financial-times/dotcom-ui-bootstrap": "^11.1.0",
-    "@financial-times/dotcom-ui-flags": "^11.1.0",
+    "@financial-times/dotcom-ui-app-context": "^11.2.0",
+    "@financial-times/dotcom-ui-base-styles": "^11.2.0",
+    "@financial-times/dotcom-ui-bootstrap": "^11.2.0",
+    "@financial-times/dotcom-ui-flags": "^11.2.0",
     "mime-types": "^2.1.26"
   },
   "peerDependencies": {

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

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

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

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