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

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