Merged PR 1232: update ga4 consent

update ga4 consent

Related work items: #12123

components/cookieBanner.js

@@ -26,6 +26,7 @@ const CookieBanner = () => {
             "usage": "accepted",
             "communications": "accepted",
             "settings": "accepted",
+            "analytics_storage": "granted",
         };
 
         cookie.set("CookiePolicy", JSON.stringify(cookieStr).toString(), {

components/cookiemanager/index.js

@@ -20,6 +20,8 @@ const CookieManagementMain = (props) => {
         Object.assign(values, {
             "essential": "accepted",
             "usage": usageState,
+            "analytics_storage":
+                usageState == "accepted" ? "granted" : "denied",
             // "communications": communicationsState,
             "settings": settingsState,
         });

components/tracking/index.js

@@ -1,38 +1,50 @@
 import Script from "next/script";
 import React, { Fragment } from "react";
-import { GoogleTagManager } from "@next/third-parties/google";
+import { GoogleTagManager, GoogleAnalytics } from "@next/third-parties/google";
 
-export const Tracking = ({ googleTagManagerID, nonce }) => (
+export const Tracking = ({ googleTagManagerID, nonce, cookieObj }) => {
-    <>
+    return (
-        <Script
+        <Fragment>
-            strategy="afterInteractive"
+            <script
-            src={`https://www.googletagmanager.com/gtag/js?id=${googleTagManagerID}`}
+                strategy="afterInteractive"
-        />
+                src={`https://www.googletagmanager.com/gtag/js?id=${googleTagManagerID}`}
-        <Script
+            />
-            id="google-analytics"
+            <script
-            strategy="afterInteractive"
+                id="google-analytics"
-            dangerouslySetInnerHTML={{
+                strategy="afterInteractive"
-                __html: `
+                dangerouslySetInnerHTML={{
+                    __html: `
                 window.dataLayer = window.dataLayer || [];
                 function gtag(){dataLayer.push(arguments);}
                 gtag('js', new Date());
 
                 gtag('consent', 'default', {
-                    'analytics_storage': 'denied'
+                    'analytics_storage': 'granted',
+                    'ad_storage': 'denied',
+                    'ad_user_data': 'denied',
+                    'ad_personalization': 'denied'
                 });
                 
                 gtag('config', '${googleTagManagerID}', {
                     page_path: window.location.pathname,
                 });
+                
+                gtag('consent', 'update', {'analytics_storage': '${
+                    typeof cookieObj == "string" &&
+                    JSON.parse(cookieObj).hasOwnProperty("analytics_storage")
+                        ? JSON.parse(cookieObj).analytics_storage
+                        : "denied"
+                }'});
                 `,
-            }}
+                }}
-        />
+            />
 
-        {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}
+            {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}
 
-        {/* <GoogleTagManager gtmId={googleTagManagerID} /> */}
+            {/* <GoogleTagManager gtmId={googleTagManagerID} /> */}
-    </>
+        </Fragment>
-);
+    );
+};
 
 export const TrackingNoScript = ({ googleTagManagerID }) => (
     <Fragment>

pages/_document.js

@@ -21,16 +21,19 @@ class MyDocument extends Document {
             useGATracking = false;
         }
 
+        const cookieObj = ctx.req.cookies.CookiePolicy || {};
+
+        console.log("useGATracking: ", useGATracking);
         setCookie(ctx, "pedw_locale", ctx.locale, {
             path: "/",
         });
 
-        return { ...initialProps, useGATracking };
+        return { ...initialProps, useGATracking, cookieObj };
     }
 
     render() {
         const googleTagManagerID = process.env.GOOGLE_TAG_MANAGER || null;
-        const { useGATracking, locale } = this.props;
+        const { useGATracking, locale, cookieObj } = this.props;
 
         const generatedNonce = nanoid();
 
@@ -51,10 +54,12 @@ class MyDocument extends Document {
                     <meta httpEquiv="Content-Security-Policy" content={csp} />
                     {useGATracking && (
                         <Tracking
-                            googleTagManagerID="G-GTWW3JT03Z"
+                            googleTagManagerID={"G-GTWW3JT03Z"}
                             nonce={generatedNonce}
+                            cookieObj={cookieObj}
                         />
                     )}
+
                     {/* <GoogleAnalytics gaId={googleTagManagerID} /> */}
                 </Head>
                 <body className="js-enabled">