Add initial GA4 implementation (GoogleChrome#9168)

* Add initial GA4 implementation

* Address review feedback

* Switch to exceptions name instead of error

* Update pageshow event

* guard loading GTM script on user cookies consent

* Update cookie bar functionality

* Fix lint issue

* Address review feedback

Co-authored-by: Ewa Gasperowicz <[email protected]>

Author: philipwalton

.eslintrc.js

@@ -14,7 +14,9 @@ module.exports = {
   globals: {
     customElements: true,
     firebase: true,
-    ga: true,
+    gtag: true,
+    loadScript: true,
+    dataLayer: true,
   },
   rules: {
     indent: [

package-lock.json

@@ -122,8 +122,8 @@
     "@percy/cli": "^1.0.0-beta.71",
     "@percy/puppeteer": "^2.0.0",
     "@types/chai": "^4.3.0",
-    "@types/google.analytics": "0.0.40",
     "@types/grecaptcha": "^3.0.3",
+    "@types/gtag.js": "^0.0.12",
     "@types/gulp": "^4.0.8",
     "@types/markdown-it": "^12.0.3",
     "@types/mocha": "^9.0.0",

package.json

@@ -29,7 +29,10 @@ const isProd = process.env.ELEVENTY_ENV === 'prod';
 const buildVirtualJSON = require('./src/build/virtual-json');
 const virtualImports = {
   webdev_analytics: {
-    id: isProd ? site.analytics.ids.prod : site.analytics.ids.staging,
+    ids: {
+      UA: site.analytics.ids.ua,
+      GA4: site.analytics.ids.ga4,
+    },
     dimensions: site.analytics.dimensions,
     version: site.analytics.version,
   },

rollup.config.js

@@ -4,6 +4,8 @@ import {runPsi} from './psi-service';
 import lang from './utils/language';
 import {localStorage} from './utils/storage';
 import cookies from 'js-cookie';
+import {ids} from 'webdev_analytics';
+import {isProd} from 'webdev_config';
 
 export const clearSignedInState = store.action(() => {
   const {isSignedIn} = store.getState();
@@ -156,26 +158,45 @@ export const closeModal = store.action(() => {
   return {isModalOpen: false};
 });
 
-export const checkIfUserAcceptsCookies = store.action(
-  ({userAcceptsCookies}) => {
-    if (userAcceptsCookies) {
-      return;
-    }
+export const checkIfUserAcceptsCookies = store.action(({cookiePreference}) => {
+  if (cookiePreference) {
+    return;
+  }
 
-    if (localStorage['web-accepts-cookies']) {
-      return {
-        userAcceptsCookies: true,
-      };
-    }
+  // If set, this will be either the string '1' or '0' based on whether
+  // the user has accepted or rejected the use of cookies.
+  // If not set it means the user has not made a choice (or cleared storage).
+  const storedWebAcceptsCookiesValue = localStorage['web-accepts-cookies'];
 
-    return {showingSnackbar: true, snackbarType: 'cookies'};
-  },
-);
+  if (typeof storedWebAcceptsCookiesValue === 'string') {
+    cookiePreference =
+      storedWebAcceptsCookiesValue === '1' ? 'accepts' : 'rejects';
+  } else {
+    cookiePreference = null;
+  }
+
+  // Only show the cookie snack-bar if the user hasn't set a preference.
+  const showingSnackbar = cookiePreference === null;
+
+  return {cookiePreference, showingSnackbar, snackbarType: 'cookies'};
+});
 
 export const setUserAcceptsCookies = store.action(() => {
   localStorage['web-accepts-cookies'] = '1';
   return {
-    userAcceptsCookies: true,
+    cookiePreference: 'accepts',
+    showingSnackbar: false,
+    // Note we don't set the snackbarType to null because that would cause the
+    // snackbar to re-render and break the animation.
+    // Instead, snackbarType is allowed to stick around and future updates can
+    // overwrite it.
+  };
+});
+
+export const setUserRejectsCookies = store.action(() => {
+  localStorage['web-accepts-cookies'] = '0';
+  return {
+    cookiePreference: 'rejects',
     showingSnackbar: false,
     // Note we don't set the snackbarType to null because that would cause the
     // snackbar to re-render and break the animation.
@@ -200,3 +221,13 @@ export const setLanguage = store.action((state, language) => {
     currentLanguage: language,
   };
 });
+
+export const loadAnalyticsScript = store.action(() => {
+  const {g4ScriptLoaded} = store.getState();
+  if (!g4ScriptLoaded && isProd) {
+    loadScript(`https://www.googletagmanager.com/gtag/js?id=${ids.GA4}`, null);
+    return {
+      g4ScriptLoaded: true,
+    };
+  }
+});