Merged PR 1230: update google analytics

Related work items: #12116, #12117

.env.local

@@ -46,7 +46,8 @@ RELAYPATH = "dev-pedw-hc"
 //RELAYPATH = "prod-pedw-hc"
 
 
-GOOGLE_TAG_MANAGER = GTM-T78CBC3
+//GOOGLE_TAG_MANAGER = GTM-T78CBC3
+GOOGLE_TAG_MANAGER = G-GTWW3JT03Z
 SHOWLOGIN = true
 SHOWREPRESENTATIONS = true 
 SHOWFILEUPLOAD = "false"

components/case/documents.js

@@ -7,6 +7,7 @@ import { connect } from "react-redux";
 import transLookup from "../../data/lookuptranslations.json";
 import { formatDates } from "../utils";
 import PaginationControl from "./pagination";
+import { sendGAEvent } from "@next/third-parties/google";
 
 import {
     getSearchDocumentDetails,
@@ -66,9 +67,6 @@ const DocumentDetails = (props) => {
         console.log(currentDate);
 
         var valid = startDate < currentDate && endDate > currentDate;
-
-        console.log(valid);
-
         ShowDocLinks = valid;
     };
 
@@ -307,7 +305,17 @@ const DocumentDetails = (props) => {
                                                 }
                                                 key={key}
                                                 onClick={() => {
-                                                    toggleDownLoadLink(key);
+                                                    toggleDownLoadLink(key),
+                                                        sendGAEvent(
+                                                            "event",
+                                                            "DownloadedFile",
+                                                            {
+                                                                caseReference:
+                                                                    props.caseReference,
+                                                                filename:
+                                                                    detailsObj.pinswg_name,
+                                                            }
+                                                        );
                                                 }}
                                             >
                                                 <span className="results-visually-hidden">

components/homepage/casesearch.js

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, reduxForm } from "redux-form";
+import { sendGAEvent } from "@next/third-parties/google";
 
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
@@ -126,7 +127,19 @@ let CaseSearch = (props) => {
                         />
 
                         <div className="govuk-form-group">
-                            <button type="submit" className="govuk-button">
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                onClick={() => {
+                                    sendGAEvent(
+                                        "event",
+                                        "SearchButtonClicked",
+                                        {
+                                            searchTerm: basicSearch.value,
+                                        }
+                                    );
+                                }}
+                            >
                                 {t("home:casesearch-card-button")}
                             </button>
                         </div>

components/myportal/searchcases.js

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { connect } from "react-redux";
 import { Field, reduxForm } from "redux-form";
+import { sendGAEvent } from "@next/third-parties/google";
 
 const required = (errorMsg) => (value) =>
     value || typeof value === "number" ? undefined : errorMsg;
@@ -132,7 +133,19 @@ let CaseSearch = (props) => {
                         />
 
                         <div className="govuk-form-group">
-                            <button type="submit" className="govuk-button">
+                            <button
+                                type="submit"
+                                className="govuk-button"
+                                onClick={() => {
+                                    sendGAEvent(
+                                        "event",
+                                        "MyPortalSearchButtonClicked",
+                                        {
+                                            searchTerm: basicSearch.value,
+                                        }
+                                    );
+                                }}
+                            >
                                 {t("myportal:searchcases-card-button")}
                             </button>
                         </div>

components/search/searchresults.js

@@ -34,6 +34,8 @@ import {
     getWatchedCasesProxy,
 } from "../../actions";
 
+import { sendGAEvent } from "@next/third-parties/google";
+
 const SearchResults = (props) => {
     const {
         searchString,
@@ -261,6 +263,14 @@ const SearchResults = (props) => {
                                             }
                                             className="govuk-link--no-underline"
                                             onClick={() => {
+                                                sendGAEvent(
+                                                    "event",
+                                                    "CaseViewed",
+                                                    {
+                                                        caseReference:
+                                                            item.ticketnumber,
+                                                    }
+                                                ),
                                                     setCurrentReference({
                                                         "ticketnumber":
                                                             item.ticketnumber,

components/tracking/index.js

@@ -1,21 +1,37 @@
 import Script from "next/script";
 import React, { Fragment } from "react";
+import { GoogleTagManager } from "@next/third-parties/google";
 
 export const Tracking = ({ googleTagManagerID, nonce }) => (
-    <Fragment>
+    <>
+        <Script
+            strategy="afterInteractive"
+            src={`https://www.googletagmanager.com/gtag/js?id=${googleTagManagerID}`}
+        />
         <Script
             id="google-analytics"
             strategy="afterInteractive"
-            nonce={nonce}
             dangerouslySetInnerHTML={{
-                __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+                __html: `
-					new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+                window.dataLayer = window.dataLayer || [];
-					j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+                function gtag(){dataLayer.push(arguments);}
-					'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+                gtag('js', new Date());
-				})(window,document,'script','dataLayer','${googleTagManagerID}');`,
+
+                gtag('consent', 'default', {
+                    'analytics_storage': 'denied'
+                });
+                
+                gtag('config', '${googleTagManagerID}', {
+                    page_path: window.location.pathname,
+                });
+                `,
             }}
         />
-    </Fragment>
+
+        {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}
+
+        {/* <GoogleTagManager gtmId={googleTagManagerID} /> */}
+    </>
 );
 
 export const TrackingNoScript = ({ googleTagManagerID }) => (

package.json

@@ -20,6 +20,7 @@
         "@azure/storage-blob": "^12.17.0",
         "@azure/storage-queue": "^12.16.0",
         "@next-auth/prisma-adapter": "^1.0.7",
+        "@next/third-parties": "latest",
         "@prisma/client": "^5.7.0",
         "@react-pdf/renderer": "^3.1.14",
         "@redux-devtools/extension": "^3.3.0",

pages/_app.js

@@ -6,7 +6,8 @@ import { useStore, Provider } from "react-redux";
 import { persistStore } from "redux-persist";
 import { PersistGate } from "redux-persist/integration/react";
 import { SessionProvider as AuthProvider } from "next-auth/react";
-
+import { Tracking } from "../components/tracking";
+import { GoogleAnalytics } from "@next/third-parties/google";
 const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
     const store = useStore((state) => state);
     const persistor = persistStore(store, {}, function () {
@@ -21,6 +22,7 @@ const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
                     loading={<Loading />}
                 >
                     <Component {...pageProps} />
+                    <GoogleAnalytics gaId="G-GTWW3JT03Z" />
                 </PersistGate>
             </Provider>
         </AuthProvider>

pages/_document.js

@@ -38,11 +38,12 @@ class MyDocument extends Document {
         csp += `base-uri 'self';`;
         csp += `form-action 'self' ` + process.env.NEXTAUTH_URL + ` ;`;
         csp += `object-src 'self' data:;`;
-        csp +=
+        csp += `default-src 'self' https://www.google-analytics.com;`;
-            `script-src 'self' ` +
+        csp += `connect-src 'self' https://region1.google-analytics.com;`;
-            process.env.NEXTAUTH_URL +
+        csp += `script-src 'self' 'unsafe-eval' 'unsafe-inline'  https://region1.google-analytics.com https://www.google-analytics.com/ https://tagmanager.google.com/ https://www.googletagmanager.com/;`;
-            ` 'unsafe-inline' https://www.googletagmanager.com  https://maps.googleapis.com 'nonce-${generatedNonce}' 'unsafe-eval';`;
+        csp += `style-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://www.google-analytics.com https://tagmanager.google.com/ https://www.googletagmanager.com/ https://fonts.googleapis.com/;`;
-        csp += `style-src 'self' https://fonts.googleapis.com 'unsafe-inline' data:;`;
+        csp += `img-src 'self' 'unsafe-inline' https://fonts.gstatic.com https://www.googletagmanager.com https://www.google-analytics.com https://ssl.gstatic.com/ data:;`;
+        csp += `font-src 'self' 'unsafe-inline' https://pro.fontawesome.com/ https://fonts.gstatic.com/ data:;`;
 
         return (
             <Html lang={locale}>
@@ -50,10 +51,11 @@ class MyDocument extends Document {
                     <meta httpEquiv="Content-Security-Policy" content={csp} />
                     {useGATracking && (
                         <Tracking
-                            googleTagManagerID={googleTagManagerID}
+                            googleTagManagerID="G-GTWW3JT03Z"
                             nonce={generatedNonce}
                         />
                     )}
+                    {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}
                 </Head>
                 <body className="js-enabled">
                     {useGATracking && (