chore: update to Google Analytics 4 MAASENG-2910

- add @types/google.analytics
canonical · Mar 28, 2024 · 015bf29 · 015bf29
1 parent 3e724e1
commit 015bf29
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-dropzone": "14.2.3",
+    "react-ga4": "2.1.0",
     "react-portal": "4.2.2",
     "react-redux": "8.0.5",
     "react-router-dom": "6.22.3",

diff --git a/src/app/base/hooks/analytics.ts b/src/app/base/hooks/analytics.ts
@@ -1,5 +1,6 @@
 import { useCallback, useEffect } from "react";
 
+import ReactGA from "react-ga4";
 import { useSelector } from "react-redux";
 import { useLocation } from "react-router-dom";
 
@@ -10,7 +11,6 @@ import { version as versionSelectors } from "@/app/store/general/selectors";
 
 declare global {
   interface Window {
-    ga: (...args: unknown[]) => void;
     lightningjs: {
       require: (variable: string, url: string) => Window["usabilla_live"];
     };
@@ -35,8 +35,11 @@ const sendAnalytics = (
   eventAction = "",
   eventLabel = ""
 ) => {
-  window.ga &&
-    window.ga("send", "event", eventCategory, eventAction, eventLabel);
+  ReactGA.event({
+    category: eventCategory,
+    action: eventAction,
+    label: eventLabel,
+  });
 };
 
 /**
@@ -93,66 +96,34 @@ export const useGoogleAnalytics = (): boolean => {
 
   useEffect(() => {
     if (allowGoogleAnalytics) {
-      (function (w, d, s, l, i) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        w[l] = w[l] || [];
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
-        const f = d.getElementsByTagName(s)[0],
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          j = d.createElement(s),
-          dl = l !== "dataLayer" ? "&l=" + l : "";
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        j.async = true;
-        const src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-ignore
-        j.src = src;
-        if (document.querySelectorAll(`script[src="${src}"]`).length === 0) {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          f.parentNode.insertBefore(j, f);
-        }
-      })(window, document, "script", "dataLayer", "GTM-P4TGJR9");
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      window.ga =
-        window.ga ||
-        function () {
-          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-          // @ts-ignore
-          // eslint-disable-next-line prefer-rest-params
-          (window.ga.q = window.ga.q || []).push(arguments);
-          return window.ga;
-        };
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      window.ga.l = +new Date();
-      window.ga("create", "UA-1018242-63", "auto", {
-        userId: `${uuid}-${authUser.id}`,
+      ReactGA.initialize("G-V64NN1TC9B", {
+        gaOptions: {
+          user_id: `${uuid}-${authUser.id}`,
+          dimension1: version,
+          dimension2: uuid,
+        },
+      });
+      ReactGA.send({
+        hitType: "pageview",
+        page: location.pathname + location.search,
+        title: location.pathname,
       });
-      window.ga("set", "dimension1", version);
-      window.ga("set", "dimension2", uuid);
-
-      window.ga(
-        "send",
-        "pageview",
-        window.location.pathname + window.location.search
-      );
     }
-  }, [allowGoogleAnalytics, authUser, uuid, version]);
+  }, [
+    allowGoogleAnalytics,
+    authUser,
+    uuid,
+    version,
+    location.pathname,
+    location.search,
+  ]);
 
   useEffect(() => {
-    window.ga &&
-      window.ga(
-        "send",
-        "pageview",
-        window.location.pathname + window.location.search
-      );
+    ReactGA.send({
+      hitType: "pageview",
+      page: location.pathname + location.search,
+      title: location.pathname,
+    });
   }, [location.pathname, location.search]);
 
   return allowGoogleAnalytics;

diff --git a/yarn.lock b/yarn.lock
@@ -4608,6 +4608,11 @@
   resolved "https://registry.yarnpkg.com/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz#7b959a4b9643a1e6a1a5fe49032693cc36773501"
   integrity sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==
 
+"@types/google.analytics@0.0.46":
+  version "0.0.46"
+  resolved "https://registry.yarnpkg.com/@types/google.analytics/-/google.analytics-0.0.46.tgz#621be217fa21f847df62188fcaa86a7340c689da"
+  integrity sha512-wuMJ3GqLFGsTZdJ315b+uNnH2AwFScyS67NHlKOD4RaPMFt/N0vxdh6fvDgvOFg62a11Fqn2ggJwUypFmIko+A==
+
 "@types/graceful-fs@^4.1.3":
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/@types/graceful-fs/-/graceful-fs-4.1.6.tgz#e14b2576a1c25026b7f02ede1de3b84c3a1efeae"
@@ -11452,6 +11457,11 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+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-is@18.1.0:
   version "18.1.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
@@ -12462,6 +12472,7 @@ string-natural-compare@^3.0.1:
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
 "string-width-cjs@npm:string-width@^4.2.0", string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12545,6 +12556,7 @@ string_decoder@~1.1.1:
     safe-buffer "~5.1.0"
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -13736,6 +13748,7 @@ wordwrap@^1.0.0:
   integrity sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==