WIP

Author: JPelletierNOAA

client/package.json

@@ -38,7 +38,7 @@
     "react-aria-live": "^2.0.4",
     "react-browser-detection": "^1.2.1",
     "react-dom": "^16.7.0",
-    "react-ga": "^2.6.0",
+    "react-ga4": "^2.1.0",
     "react-grid-system": "^4.4.1",
     "react-helmet": "^5.2.1",
     "react-redux": "^7.1.1",

client/src/components/analytics/GoogleAnalytics.jsx

@@ -1,7 +1,7 @@
 // utils/GoogleAnalytics.js
 import React from 'react'
 import PropTypes from 'prop-types'
-import * as ReactGA from 'react-ga'
+import ReactGA from 'react-ga4'
 import {Route} from 'react-router-dom'
 
 export default class GoogleAnalytics extends React.Component {
@@ -54,7 +54,7 @@ export default class GoogleAnalytics extends React.Component {
       },
       profileNames
     )
-    ReactGA.pageview(page, profileNames)
+    ReactGA.send({ hitType: 'pageview', page: page, title: 'Custom Title' });
   }
 
   render() {

docs/operator/deployment/v2/onestop/feature-toggles.md

@@ -70,8 +70,8 @@ There are two *new* sections to the search API UI config YML.
 
 1. If the cart feature is desired, simply add the `features` config section as seen below. Without it, the UI will default to not showing a cart feature.
 
-1. Google Analytics can be configured by replacing the following parts with the appropriate IDs for the test and prod environments. When using multiple trackers, you **must** provide a name for additional trackers. There can only be one default (without a name), and the one without a name will only receive updates depending on `reactGaOptions.alwaysSendToDefaultTracker`. See Google Analytics and react-ga documentation for more details.   
-    - `trackingId: 'UA-XXXXXXXXX-X'`
+1. Google Analytics can be configured by replacing the following parts with the appropriate IDs for the test and prod environments. When using multiple trackers, you **must** provide a name for additional trackers. There can only be one default (without a name), and the one without a name will only receive updates depending on `reactGaOptions.alwaysSendToDefaultTracker`. See Google Analytics and react-ga4 documentation for more details.   
+    - `trackingId: 'XXXXXXXXX'`
     - `name: XXXXXXXXX`
 
 

docs/operator/deployment/v3/feature-toggles.md

@@ -64,8 +64,8 @@ There are two *new* sections to the search API UI config YML.
 
 1. If the cart feature is desired, simply add the `features` config section as seen below. Without it, the UI will default to not showing a cart feature.
 
-1. Google Analytics can be configured by replacing the following parts with the appropriate IDs for the test and prod environments. When using multiple trackers, you **must** provide a name for additional trackers. There can only be one default (without a name), and the one without a name will only receive updates depending on `reactGaOptions.alwaysSendToDefaultTracker`. See Google Analytics and react-ga documentation for more details.   
-    - `trackingId: 'UA-XXXXXXXXX-X'`
+1. Google Analytics can be configured by replacing the following parts with the appropriate IDs for the test and prod environments. When using multiple trackers, you **must** provide a name for additional trackers. There can only be one default (without a name), and the one without a name will only receive updates depending on `reactGaOptions.alwaysSendToDefaultTracker`. See Google Analytics and react-ga4 documentation for more details.   
+    - `trackingId: 'XXXXXXXXX'`
     - `name: XXXXXXXXX`
 
 ```

helm/onestop-search/values.yaml

@@ -30,9 +30,9 @@ config: |-
   ui:
     googleAnalytics:
       profiles:
-        - trackingId: 'UA-127993388-1'
+        - trackingId: '358541492'
           gaOptions:
-            name: 127993388
+            name: 358541492
       reactGaOptions:
         alwaysSendToDefaultTracker: false
     features: