Ga4 mc

.github/workflows/pull-request-check.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/[email protected]
       - uses: actions/[email protected]
         with:
-          node-version: '12'
+          node-version: '14'
       - name: npm install, build, and test
         run: |
           npm ci

csp.config.js

@@ -7,7 +7,7 @@ const PRODUCTION = '*.core.ac.uk core.ac.uk'
 const config = {
   'default-src': [SELF, PRODUCTION],
   // PDF.js worker sadly uses unsafe-eval
-  'script-src': [SELF, '*.google-analytics.com', "'unsafe-eval'"],
+  'script-src': [SELF, '*.google-analytics.com', "'unsafe-eval'", '*.googletagmanager.com'],
   'style-src': [
     SELF,
     'fonts.googleapis.com',
@@ -26,6 +26,7 @@ const config = {
     // https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#transport
     '*.google-analytics.com',
     'stats.g.doubleclick.net',
+    '*.googletagmanager.com',
   ],
   'connect-src': ['*'],
 }

package.json

@@ -57,7 +57,7 @@
     "postcss-preset-env": "^7.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-ga": "^3.3.0",
+    "react-ga4": "^2.1.0",
     "react-to-print": "^2.12.1",
     "smoothscroll-polyfill": "^0.4.4",
     "webpack": "^4.44.2",

utils/analytics.jsx

@@ -1,42 +1,24 @@
 import React, { createElement } from 'react'
-import ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 
 const isProduction = process.env.NODE_ENV === 'production'
-const trackers = (process.env.GA_TRACKING_CODE || '').split(',')
 let isGAInitialized = false
 
-if (isProduction && trackers[0] !== '') {
-  if (trackers.length === 2) {
-    ReactGA.initialize([
-      {
-        trackingId: trackers[0],
-        gaOptions: {
-          name: 'prod',
-          siteSpeedSampleRate: 10,
-        },
-      },
-      {
-        trackingId: trackers[1],
-        gaOptions: {
-          name: 'dev',
-          siteSpeedSampleRate: 10,
-        },
-      },
-    ])
-    isGAInitialized = true
-  } else {
-    ReactGA.initialize(trackers[0])
-    isGAInitialized = true
-  }
+if (isProduction && process.env.GA_TRACKING_CODE) {
+  ReactGA.initialize(process.env.GA_TRACKING_CODE, {
+    siteSpeedSampleRate: 2,
+  })
+  isGAInitialized = true
 }
 
 const logPageView = () => {
   if (!isGAInitialized) return
-  ReactGA.set({ page: window.location.pathname })
-  ReactGA.pageview(
-    window.location.pathname,
-    trackers.length === 2 ? ['prod', 'dev'] : undefined
-  )
+
+  ReactGA.send({
+    hitType: 'Reader',
+    page: `Reader. ${window.location.pathname}`,
+    title: `Reader. ${window.location.pathname}`,
+  })
 }
 
 export const logEvent = ({
@@ -47,21 +29,21 @@ export const logEvent = ({
 }) => {
   if (!isGAInitialized) return
 
-  ReactGA.event(
-    {
-      category,
-      action,
-      label: 'reader',
-      value,
-      nonInteraction,
-    },
-    trackers.length === 2 ? ['prod', 'dev'] : undefined
-  )
+  const valueCategory = category ?? 'Default category'
+  const valueAction = action ?? 'Default action'
+  ReactGA.event({
+    category: `Reader. ${valueCategory}`,
+    action: `Reader. ${valueAction}`,
+    label: 'Reader',
+    value: value ?? 99,
+    nonInteraction: nonInteraction ?? true,
+  })
 }
 
 export const logTiming = (options) => {
   if (!isGAInitialized) return
-  ReactGA.timing(options, trackers.length === 2 ? ['prod', 'dev'] : undefined)
+  // eslint-disable-next-line no-console
+  console.log(JSON.stringify(options))
 }
 
 export const withGoogleAnalytics = (Page) => {