Switch from Universal Analytics to Google Analytics 4

app/assets/scripts/components/documents/document-changelog-modal.js

@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
 
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { Modal as BaseModal } from '@devseed-ui/modal';
 import { glsp } from '@devseed-ui/theme-provider';
 
@@ -121,7 +121,7 @@ export default function DocumentChangelogModal(props) {
 
   useEffect(() => {
     if (revealed) {
-      ReactGA.modalview('document-changelog');
+      ReactGA.send({ hitType: 'modalview', page: '/modal/document-changelog' });
     }
   }, [revealed]);
 

app/assets/scripts/components/documents/document-download-menu.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import T from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { Auth } from 'aws-amplify';
 import { saveAs } from 'file-saver';
 

app/assets/scripts/components/documents/document-info-modal.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { FormTextarea } from '@devseed-ui/form';
 import { Modal } from '@devseed-ui/modal';
 import { Button } from '@devseed-ui/button';
@@ -41,7 +41,7 @@ export default function DocumentInfoModal(props) {
 
   useEffect(() => {
     if (revealed) {
-      ReactGA.modalview('document-info');
+      ReactGA.send({ hitType: 'modalview', page: '/modal/document-info' });
     }
   }, [revealed]);
 

app/assets/scripts/components/documents/document-tracker-modal.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo } from 'react';
 import T from 'prop-types';
 import qs from 'qs';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import styled, { css } from 'styled-components';
 import { useLocation } from 'react-router';
 import { Modal, ModalFooter } from '@devseed-ui/modal';
@@ -140,7 +140,10 @@ export default function DocumentTrackerModal(props) {
 
   useEffect(() => {
     if (revealed) {
-      ReactGA.modalview('document-progress-tracker');
+      ReactGA.send({
+        hitType: 'modalview',
+        page: '/modal/document-progress-tracker'
+      });
     }
   }, [revealed]);
 

app/assets/scripts/components/documents/hub/document-hub-entry.js

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 import T from 'prop-types';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { VerticalDivider } from '@devseed-ui/toolbar';
 import { BsFilePdf } from 'react-icons/bs';
 

app/assets/scripts/components/home/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import { glsp, rgba, themeVal } from '@devseed-ui/theme-provider';
 import { Heading } from '@devseed-ui/typography';
 import { Button } from '@devseed-ui/button';

app/assets/scripts/config/staging.js

@@ -1,6 +1,6 @@
 // module exports is required to be able to load from gulpfile.
 module.exports = {
-  gaTrackingCode: 'UA-163103126-1',
+  gaTrackingCode: 'G-K4DQR9HTZH',
   apiUrl: 'https://af7f32q2kh.execute-api.us-east-1.amazonaws.com/v2',
   auth: {
     // DOCS: https://docs.amplify.aws/lib/auth/start/q/platform/js#re-use-existing-authentication-resource

app/assets/scripts/main.js

@@ -13,7 +13,7 @@ import {
   useLocation,
   useHistory
 } from 'react-router-dom';
-import ReactGA from 'react-ga';
+import ReactGA from 'react-ga4';
 import qs from 'qs';
 import { DevseedUiThemeProvider } from '@devseed-ui/theme-provider';
 import { CollecticonsGlobalStyle } from '@devseed-ui/collecticons';
@@ -84,9 +84,15 @@ const { gaTrackingCode } = config;
 // Google analytics
 if (gaTrackingCode) {
   ReactGA.initialize(gaTrackingCode);
-  ReactGA.pageview(window.location.pathname + window.location.search);
+  ReactGA.send({
+    hitType: 'pageview',
+    page: window.location.pathname + window.location.search
+  });
   history.listen((location) =>
-    ReactGA.pageview(location.pathname + location.search)
+    ReactGA.send({
+      hitType: 'pageview',
+      page: location.pathname + location.search
+    })
   );
 }
 

package.json

@@ -129,6 +129,7 @@
     "react-cool-dimensions": "^1.3.2",
     "react-dom": "^17.0.1",
     "react-ga": "^3.3.0",
+    "react-ga4": "^2.1.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.8.0",
     "react-katex": "^2.0.2",

yarn.lock

@@ -10038,6 +10038,11 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-ga4@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-ga4/-/react-ga4-2.1.0.tgz#56601f59d95c08466ebd6edfbf8dede55c4678f9"
+  integrity sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==
+
 react-ga@^3.3.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"