npm - @financial-times/dotcom-ui-shell - Versions diffs - 7.3.1 → 7.3.2 - Mend

@financial-times/dotcom-ui-shell 7.3.1 → 7.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/package.json +6 -2
package/src/__test__/components/Content.test.tsx +23 -0
package/src/__test__/components/DocumentHead.test.tsx +38 -0
package/src/__test__/components/GTMBody.test.tsx +36 -0
package/src/__test__/components/GTMHead.test.tsx +27 -0
package/src/__test__/components/LinkedData.test.tsx +31 -0
package/src/__test__/components/OpenGraph.test.tsx +25 -0
package/src/__test__/components/ResourceHints.test.tsx +18 -0
package/src/__test__/components/Shell.test.tsx +29 -0
package/src/__test__/components/Stylesheets.test.tsx +22 -0
package/src/__test__/components/__snapshots__/Content.test.tsx.snap +22 -0
package/src/__test__/components/__snapshots__/DocumentHead.test.tsx.snap +87 -0
package/src/__test__/components/__snapshots__/GTMBody.test.tsx.snap +21 -0
package/src/__test__/components/__snapshots__/GTMHead.test.tsx.snap +17 -0
package/src/__test__/components/__snapshots__/LinkedData.test.tsx.snap +41 -0
package/src/__test__/components/__snapshots__/OpenGraph.test.tsx.snap +42 -0
package/src/__test__/components/__snapshots__/ResourceHints.test.tsx.snap +54 -0
package/src/__test__/components/__snapshots__/Shell.test.tsx.snap +317 -0
package/src/__test__/components/__snapshots__/Stylesheets.test.tsx.snap +50 -0
package/src/__test__/lib/flattenOpenGraphData.spec.ts +37 -0
package/src/__test__/lib/formatAttributeNames.spec.ts +38 -0
package/src/__test__/lib/getResourceType.spec.ts +28 -0
package/src/components/Content.tsx +25 -0
package/src/components/DocumentHead.tsx +103 -0
package/src/components/GTMBody.tsx +29 -0
package/src/components/GTMHead.tsx +23 -0
package/src/components/LinkedData.tsx +38 -0
package/src/components/OpenGraph.tsx +20 -0
package/src/components/ResourceHints.tsx +63 -0
package/src/components/Shell.tsx +97 -0
package/src/components/StyleSheets.tsx +35 -0
package/src/index.ts +1 -0
package/src/lib/flattenOpenGraphData.ts +24 -0
package/src/lib/formatAttributeNames.ts +36 -0
package/src/lib/getResourceType.ts +34 -0
package/src/lib/imageServiceIconURL.ts +24 -0
package/src/lib/loadAsyncStylesheets.ts +27 -0

package/src/__test__/components/__snapshots__/Shell.test.tsx.snap ADDED Viewed

@@ -0,0 +1,317 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`dotcom-ui-shell/src/components/Shell renders the GTM script when the enableGTM flag is on 1`] = `
+<html
+  className="no-js core o-typography--loading-sans o-typography--loading-sans-bold o-typography--loading-display o-typography--loading-display-bold"
+  data-o-component="o-typography"
+  lang="en-GB"
+  style={
+    Object {
+      "backgroundColor": "#fff1e5",
+      "color": "#33302e",
+      "overflowX": "hidden",
+    }
+  }
+>
+  <head>
+    <meta
+      charSet="utf-8"
+    />
+    <meta
+      content="IE=edge"
+      httpEquiv="X-UA-Compatible"
+    />
+    <meta
+      content="width=device-width, initial-scale=1"
+      name="viewport"
+    />
+    <title>
+      Foo | Financial Times
+    </title>
+    <meta
+      content="News, analysis and comment from the Financial Times, the worldʼs leading global business publication"
+      name="description"
+    />
+    <meta
+      content="index,follow,max-snippet:200,max-image-preview:large"
+      name="robots"
+    />
+    <meta
+      content="4-t8sFaPvpO5FH_Gnw1dkM28CQepjzo8UjjAkdDflTw"
+      name="google-site-verification"
+    />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "{\\"@context\\":\\"http://schema.org\\",\\"@type\\":\\"WebSite\\",\\"name\\":\\"Financial Times\\",\\"alternateName\\":\\"FT.com\\",\\"url\\":\\"http://www.ft.com\\"}",
+        }
+      }
+      type="application/ld+json"
+    />
+    <meta
+      content="8860325749"
+      property="fb:pages"
+    />
+    <meta
+      content="@FinancialTimes"
+      property="twitter:site"
+    />
+    <meta
+      content="app-id=1200842933"
+      name="apple-itunes-app"
+    />
+    <link
+      href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=svg"
+      rel="icon"
+      type="image/svg+xml"
+    />
+    <link
+      href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png&width=32&height=32"
+      rel="alternate icon"
+      sizes="32x32"
+      type="image/png"
+    />
+    <link
+      href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png&width=194&height=194"
+      rel="alternate icon"
+      sizes="194x194"
+      type="image/png"
+    />
+    <link
+      href="https://www.ft.com/__origami/service/image/v2/images/raw/ftlogo-v1%3Abrand-ft-logo-square-coloured?source=update-logos&format=png&width=180&height=180"
+      rel="apple-touch-icon"
+      sizes="180x180"
+    />
+    <link
+      href="https://www.ft.com/__assets/creatives/manifest/manifest-v6.json"
+      rel="manifest"
+    />
+    <link
+      href="https://spoor-api.ft.com"
+      rel="preconnect"
+    />
+    <link
+      crossOrigin="use-credentials"
+      href="https://session-next.ft.com"
+      rel="preconnect"
+    />
+    <link
+      href="https://ads-api.ft.com"
+      rel="preconnect"
+    />
+    <link
+      href="https://securepubads.g.doubleclick.net"
+      rel="preconnect"
+    />
+    <link
+      as="script"
+      href="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces5%2Ces2015%2Ces2016%2Ces2017%2CEventSource%2Cfetch%2CHTMLPictureElement%2CIntersectionObserver%2CNodeList.prototype.forEach&source=next"
+      rel="preload"
+      type={null}
+    />
+    <link
+      as="font"
+      crossOrigin="anonymous"
+      href="https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=MetricWeb-Regular&system_code=origami&version=1.12"
+      rel="preload"
+      type="font/woff2"
+    />
+    <link
+      as="font"
+      crossOrigin="anonymous"
+      href="https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=MetricWeb-Semibold&system_code=origami&version=1.12"
+      rel="preload"
+      type="font/woff2"
+    />
+    <link
+      as="font"
+      crossOrigin="anonymous"
+      href="https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Regular&system_code=origami&version=1.12"
+      rel="preload"
+      type="font/woff2"
+    />
+    <link
+      as="font"
+      crossOrigin="anonymous"
+      href="https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Bold&system_code=origami&version=1.12"
+      rel="preload"
+      type="font/woff2"
+    />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": undefined,
+        }
+      }
+      id="initial-props"
+      type="application/json"
+    />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "{\\"trackErrors\\":true,\\"core\\":[\\"https://polyfill.io/v3/polyfill.min.js?features=HTMLPictureElement&source=next\\"],\\"enhanced\\":[\\"https://polyfill.io/v3/polyfill.min.js?features=default%2Ces5%2Ces2015%2Ces2016%2Ces2017%2CEventSource%2Cfetch%2CHTMLPictureElement%2CIntersectionObserver%2CNodeList.prototype.forEach&source=next\\"]}",
+        }
+      }
+      id="page-kit-bootstrap-config"
+      type="application/json"
+    />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": ";(function () {
+  var doc = document.documentElement
+  var isEnhanced = isEnhancedBrowser()
+  var scriptsConfig = getScriptsConfig()
+  var scriptsToLoad = []
+  var currentScript = document.scripts[document.scripts.length - 1]
+  doc.className = doc.className.replace('no-js', 'js')
+  if (isEnhanced) {
+    doc.className = doc.className.replace('core', 'enhanced')
+    Array.prototype.push.apply(scriptsToLoad, scriptsConfig.enhanced)
+  } else {
+    Array.prototype.push.apply(scriptsToLoad, scriptsConfig.core)
+  }
+  for (var i = 0, len = scriptsToLoad.length; i < len; i++) {
+    loadScript(scriptsToLoad[i])
+  }
+  function scriptLoadError(error) {
+    var script = error.target ? error.target.src : null
+    if (script) {
+      console.error('The script ' + script + ' failed to load') // eslint-disable-line no-console
+    }
+    if (/enhanced/.test(doc.className)) {
+      console.warn('Script loading failed, reverting to core experience') // eslint-disable-line no-console
+      doc.className = doc.className.replace('enhanced', 'core')
+    }
+    if (scriptsConfig.trackErrors) {
+      addErrorTrackingPixel(script)
+    }
+  }
+  function loadScript(src) {
+    var script = document.createElement('script')
+    script.onerror = scriptLoadError
+    script.async = false
+    script.src = src
+    currentScript.parentNode.insertBefore(script, currentScript)
+  }
+  // \\"Cut the mustard\\" test
+  // by Maggie Allen and Matt Hinchliffe November 2018
+  function isEnhancedBrowser() {
+    var script = document.createElement('script')
+    var input = document.createElement('input')
+    return (
+      'visibilityState' in document && // not supported by old Android (4.0-4.4) without a prefix
+      'indeterminate' in input && // not supported by BB 10
+      'flex' in doc.style && // not supported by old Safari (< 9) or IE 6-10
+      'async' in script // not supported by old Opera (Presto engine < 15)
+    )
+  }
+  function getScriptsConfig() {
+    var scriptsConfigEl = document.getElementById('page-kit-bootstrap-config')
+    var scriptsConfig = { core: [], enhanced: [], trackErrors: false }
+    if (scriptsConfigEl) {
+      try {
+        scriptsConfig = JSON.parse(scriptsConfigEl.innerHTML)
+      } catch (error) {
+        console.error('Bootstrap configuration error', error) // eslint-disable-line no-console
+      }
+    }
+    return scriptsConfig
+  }
+  function addErrorTrackingPixel(script) {
+    var img = new Image()
+    var data = JSON.stringify({
+      category: 'javascript',
+      action: 'load-error',
+      system: {
+        source: 'page-kit'
+      },
+      context: {
+        script: script
+      }
+    })
+    img.src = 'https://spoor-api.ft.com/px.gif?data=' + encodeURIComponent(data)
+  }
+})()
+",
+        }
+      }
+    />
+    <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');",
+        }
+      }
+    />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "(function loadCustomFonts() {
+    var rootElement = document.documentElement;
+    if (/(^|\\\\s)o-typography-fonts-loaded=1(;|$)/.test(document.cookie)) {
+        var fontLabels = ['sans', 'sans-bold', 'display', 'display-bold'];
+        for (var i = 0; i < fontLabels.length; i++) {
+            rootElement.className = rootElement.className.replace('o-typography--loading-' + fontLabels[i], '');
+        }
+    }
+}());",
+        }
+      }
+    />
+  </head>
+  <body>
+    <noscript>
+      <iframe
+        height="0"
+        src="https://www.googletagmanager.com/ns.html?id=GTM-NWQJW68"
+        style={
+          Object {
+            "display": "none",
+            "visibility": "hidden",
+          }
+        }
+        width="0"
+      />
+    </noscript>
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": undefined,
+        }
+      }
+      id="page-kit-app-context"
+      type="application/json"
+    />
+    <script
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "{\\"enableGTM\\":true}",
+        }
+      }
+      id="page-kit-flags-embed"
+      type="application/json"
+    />
+  </body>
+</html>
+`;

package/src/__test__/components/__snapshots__/Stylesheets.test.tsx.snap ADDED Viewed

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`dotcom-ui-shell/src/components/StyleSheets renders JavaScript for adding asyncronous stylesheets if appropriate 1`] = `
+Array [
+  <noscript>
+    <link
+      href="path/to/async-styles.css"
+      rel="stylesheet"
+    />
+  </noscript>,
+  <script
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "(function loadAsyncStylesheets() {
+    var currentScript = document.scripts[document.scripts.length - 1];
+    var stylesheets = currentScript.getAttribute('data-stylesheets').split(',');
+    for (var i = 0, len = stylesheets.length; i < len; i++) {
+        var link = document.createElement('link');
+        link.href = stylesheets[i];
+        link.rel = 'stylesheet';
+        link.media = 'print'; // <-- 'print' is intentional; on load, it changes to 'all'.
+        link.onload = function (event) {
+            var target = event.target;
+            target.media = 'all';
+        };
+        currentScript.parentNode.insertBefore(link, currentScript);
+    }
+})()",
+      }
+    }
+    data-stylesheets="path/to/async-styles.css"
+  />,
+]
+`;
+exports[`dotcom-ui-shell/src/components/StyleSheets renders the given stylesheets and critical styles 1`] = `
+Array [
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "html { margin: 0 } body { font-family: \\"Comic Sans\\" }",
+      }
+    }
+  />,
+  <link
+    href="path/to/styles.css"
+    rel="stylesheet"
+  />,
+]
+`;

package/src/__test__/lib/flattenOpenGraphData.spec.ts ADDED Viewed

@@ -0,0 +1,37 @@
+import subject from '../../lib/flattenOpenGraphData'
+const fixture = Object.freeze({
+  og: {
+    title: 'Open Graph title',
+    video: 'https://my.site/video.mp4',
+    'video:type': 'video/mp4',
+    'video:width': 640,
+    'video:height': 360
+  },
+  article: {
+    published_time: '2019-02-27T06:59:35.000Z',
+    modified_time: '2019-02-27T16:01:21.000Z',
+    author: ['Joe Bloggs', 'Jane Doe']
+  }
+})
+describe('dotcom-ui-shell/src/lib/flattenOpenGraphData', () => {
+  it('returns an array', () => {
+    const result = subject(fixture)
+    expect(result).toEqual(expect.any(Array))
+  })
+  it('flattens the given object into property/value pairs', () => {
+    const result = subject(fixture)
+    expect(result[1]).toEqual(['og:video', fixture.og.video])
+    expect(result[5]).toEqual(['article:published_time', fixture.article.published_time])
+  })
+  it('can handle nested data', () => {
+    const result = subject(fixture)
+    expect(result[7]).toEqual(['article:author', fixture.article.author[0]])
+    expect(result[8]).toEqual(['article:author', fixture.article.author[1]])
+  })
+})

package/src/__test__/lib/formatAttributeNames.spec.ts ADDED Viewed

@@ -0,0 +1,38 @@
+import subject from '../../lib/formatAttributeNames'
+const fixture = Object.freeze({
+  dataVersion: 123,
+  dataAppName: 'test',
+  userLoggedIn: true,
+  lang: 'en-GB'
+})
+describe('dotcom-ui-shell/src/lib/formatAttributeNames', () => {
+  it('returns a new object', () => {
+    const result = subject(fixture)
+    expect(result).not.toBe(fixture)
+  })
+  it('converts camelCase property names to kebab-case', () => {
+    const result = subject(fixture)
+    expect(result).toHaveProperty('data-version', 123)
+    expect(result).toHaveProperty('data-app-name', 'test')
+    expect(result).toHaveProperty('user-logged-in', true)
+    expect(result).toHaveProperty('lang', 'en-GB')
+  })
+  it('converts boolean data properties to boolean data attributes', () => {
+    const fixture = { dataIsProduction: true, dataIsDevelopment: false, userIsLoggedIn: true }
+    const result = subject(fixture)
+    // where react is concerned, a `true` boolean data attribute
+    // is one where the attribute value is an empty string (because
+    // it is not possible to render the attribute without a value),
+    // and a `false` boolean data attribute is one where the attribute
+    // has not been specified altogether
+    expect(result).toEqual({
+      'data-is-production': '',
+      'user-is-logged-in': true
+    })
+  })
+})

package/src/__test__/lib/getResourceType.spec.ts ADDED Viewed

@@ -0,0 +1,28 @@
+import subject from '../../lib/getResourceType'
+describe('dotcom-ui-shell/src/lib/getResourceType', () => {
+  it('uses the file extension to match to a resource type', () => {
+    expect(subject('style.css')).toEqual('style')
+    expect(subject('script.js')).toEqual('script')
+    expect(subject('image.png')).toEqual('image')
+    expect(
+      subject(
+        'https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=MetricWeb-Regular&system_code=origami&version=1.12'
+      )
+    ).toEqual('font')
+  })
+  it('throws if the file extension cannot be matched', () => {
+    expect(() => subject('style.doc')).toThrow()
+  })
+  it('supports URLs', () => {
+    expect(subject('www.example.com/assets/style.css')).toEqual('style')
+    expect(subject('www.example.com/images/graphic.svg#icon')).toEqual('image')
+    expect(subject('http://polyfill.io/v3/bundle.min.js?features=es5,es6')).toEqual('script')
+  })
+  it('supports file paths', () => {
+    expect(subject('/assets/public/style.as83hd99.css')).toEqual('style')
+  })
+})

package/src/components/Content.tsx ADDED Viewed

@@ -0,0 +1,25 @@
+import React from 'react'
+export type TContentProps = {
+  contents?: string | React.ReactNode
+}
+const styles = {
+  display: 'contents'
+}
+function Content({ contents }: TContentProps) {
+  if (typeof contents === 'string') {
+    return <div style={styles} dangerouslySetInnerHTML={{ __html: contents }} />
+  }
+  // We could try and validate this but there are so many possibilities
+  // of node types and potentially nested arrays etc.
+  if (contents) {
+    return <React.Fragment>{contents}</React.Fragment>
+  }
+  return null
+}
+export default Content

package/src/components/DocumentHead.tsx ADDED Viewed

@@ -0,0 +1,103 @@
+import React from 'react'
+import imageServiceIconURL from '../lib/imageServiceIconURL'
+import OpenGraph, { TOpenGraphProps } from './OpenGraph'
+import LinkedData, { TLinkedDataProps } from './LinkedData'
+export type TDocumentHeadProps = TOpenGraphProps &
+  TLinkedDataProps & {
+    description?: string
+    facebookPage?: string
+    googleSiteVerification?: string
+    metaTags?: Array<{ [key: string]: any }>
+    pageTitle: string
+    robots?: string
+    siteTitle?: string
+    twitterSite?: string
+    canonicalURL?: string
+    manifestFile?: string
+    additionalMetadata?: React.ReactNode,
+    showSmartBanner?: boolean
+  }
+const DocumentHead = (props: TDocumentHeadProps) => (
+  <React.Fragment>
+    <meta charSet="utf-8" />
+    <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{props.pageTitle ? `${props.pageTitle} | ${props.siteTitle}` : props.siteTitle}</title>
+    {props.description && <meta name="description" content={props.description} />}
+    {props.canonicalURL && <link rel="canonical" href={props.canonicalURL} />}
+    {/* SEO */}
+    <meta name="robots" content={props.robots} />
+    <meta name="google-site-verification" content={props.googleSiteVerification} />
+    {props.metaTags.map((attributes, i) => (
+      <meta key={`meta-${i}`} {...attributes} />
+    ))}
+    <LinkedData jsonLd={props.jsonLd} />
+    {/* social media */}
+    <meta property="fb:pages" content={props.facebookPage} />
+    <meta property="twitter:site" content={props.twitterSite} />
+    <OpenGraph openGraph={props.openGraph} />
+    {/* native apps */}
+    {props.showSmartBanner &&
+      (
+        <meta
+          name="apple-itunes-app"
+          content={props.canonicalURL ? `app-id=1200842933, app-argument=${props.canonicalURL}` : 'app-id=1200842933'}
+        />
+      )
+    }
+    {/* packaging */}
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 0, 'svg')}
+    />
+    <link
+      rel="alternate icon"
+      type="image/png"
+      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 32)}
+      sizes="32x32"
+    />
+    <link
+      rel="alternate icon"
+      type="image/png"
+      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 194)}
+      sizes="194x194"
+    />
+    <link
+      rel="apple-touch-icon"
+      href={imageServiceIconURL('ftlogo-v1:brand-ft-logo-square-coloured', 180)}
+      sizes="180x180"
+    />
+    {props.manifestFile ? <link rel="manifest" href={props.manifestFile} /> : null}
+    {/* We can't add an option for every single metadata option so allow custom elements to be inserted*/}
+    {props.additionalMetadata}
+  </React.Fragment>
+)
+DocumentHead.defaultProps = {
+  description:
+    'News, analysis and comment from the Financial Times, the worldʼs leading global business publication',
+  facebookPage: '8860325749',
+  googleSiteVerification: '4-t8sFaPvpO5FH_Gnw1dkM28CQepjzo8UjjAkdDflTw',
+  metaTags: [],
+  jsonLd: [],
+  robots: 'index,follow,max-snippet:200,max-image-preview:large',
+  siteTitle: 'Financial Times',
+  twitterSite: '@FinancialTimes',
+  manifestFile: 'https://www.ft.com/__assets/creatives/manifest/manifest-v6.json',
+  additionalMetadata: null,
+  showSmartBanner: true
+}
+export default DocumentHead

package/src/components/GTMBody.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react'
+import { TFlagsData } from '@financial-times/dotcom-ui-flags/src/types'
+// This component is maintained by the ads team
+const GTMBody = ({ flags }: { flags: TFlagsData }) => {
+  if (!flags.enableGTM) {
+    return null
+  }
+  return (
+    <noscript>
+      <iframe
+        src="https://www.googletagmanager.com/ns.html?id=GTM-NWQJW68"
+        height="0"
+        width="0"
+        style={{
+          display: 'none',
+          visibility: 'hidden'
+        }}
+      />
+    </noscript>
+  )
+}
+GTMBody.defaultProps = {
+  flags: {}
+}
+export default GTMBody

package/src/components/GTMHead.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import React from 'react'
+import { TFlagsData } from '@financial-times/dotcom-ui-flags/src/types'
+// This component is maintained by the ads team
+const GTMHead = ({ flags }: { flags: TFlagsData }) => {
+  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');`
+  return <script dangerouslySetInnerHTML={{ __html: tagManager }} />
+}
+GTMHead.defaultProps = {
+  flags: {}
+}
+export default GTMHead