added tracking snippet with env variable

2021-10-15 15:59:06 +01:00
parent 1dc5a8563a
commit 74b7a15c8e
4 changed files with 43 additions and 7 deletions
@@ -19,3 +19,6 @@ I18N_DOMAIN = "cymru.local"
 //RELAYPATH = "test-pedw-hc"
 //SASKEY = "kTLrs9UHwuW9Msc9uNfjf+89qLYT6ly80lK0zdTYJW4="
 //SASKEYNAME = "testpedwhcpolicy"
+
+
+GOOGLE_TAG_MANAGER = GTM-T78CBC3
@@ -40,12 +40,10 @@ const RenderTextfield = ({
                <div id="basicSearch-hint" className="govuk-hint ">
                    <span className="govuk-body-s">{hint1}</span>

-                    <p>
-                        <ul className="govuk-body-s">
-                            <li>{hint2} </li>
-                            <li>{hint3}</li>
-                        </ul>
-                    </p>
+                    <ul className="govuk-body-s govuk-!-margin-top-3">
+                        <li>{hint2} </li>
+                        <li>{hint3}</li>
+                    </ul>
                </div>
                <label className="govuk-label " htmlFor={id} id={id + "_label"}>
                    {label}
@@ -0,0 +1,29 @@
+import React, { Fragment } from "react";
+
+export const Tracking = ({ googleTagManagerID }) => (
+    <Fragment>
+        <script
+            dangerouslySetInnerHTML={{
+                __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','${googleTagManagerID}');`,
+            }}
+        />
+    </Fragment>
+);
+
+export const TrackingNoScript = ({ googleTagManagerID }) => (
+    <Fragment>
+        <noscript>
+            <iframe
+                title="google analytics"
+                src={`https://www.googletagmanager.com/ns.html?id=${googleTagManagerID}`}
+                height="0"
+                width="0"
+                style={{ display: "none", visibility: "hidden" }}
+            />
+        </noscript>
+    </Fragment>
+);
@@ -1,5 +1,6 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import SkipLink from "../components/skiplink";
+import { Tracking, TrackingNoScript } from "../components/tracking";
 //import basicAuthMiddleware from "nextjs-basic-auth-middleware";

 class MyDocument extends Document {
@@ -19,10 +20,15 @@ class MyDocument extends Document {
    //   }

    render() {
+        const googleTagManagerID = process.env.GOOGLE_TAG_MANAGER || null;
+
        return (
            <Html lang="en">
-                <Head />
+                <Head>
+                    <Tracking googleTagManagerID={googleTagManagerID} />
+                </Head>
                <body className="js-enabled">
+                    <TrackingNoScript googleTagManagerID={googleTagManagerID} />
                    {!process.browser && (
                        <script>
                            window.apiRoot = `{process.env.API_ROOT}`