feat: remove ReactGA and migrate to GA4

Signed-off-by: Eshaan Aggarwal <96648934+EshaanAgg@users.noreply.github.com>
jaegertracing · Dec 25, 2023 · 47ac437 · 47ac437
1 parent 741e23c
commit 47ac437
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 14 deletions.
diff --git a/packages/jaeger-ui/package.json b/packages/jaeger-ui/package.json
@@ -74,7 +74,6 @@
     "react": "^18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
-    "react-ga": "^3.3.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.10.1",
     "react-is": "^18.2.0",

diff --git a/packages/jaeger-ui/src/utils/tracking/ga.tsx b/packages/jaeger-ui/src/utils/tracking/ga.tsx
@@ -13,7 +13,6 @@
 // limitations under the License.
 
 import _get from 'lodash/get';
-import ReactGA from 'react-ga';
 import Raven, { RavenOptions, RavenTransportOptions } from 'raven-js';
 
 import convRavenToGa from './conv-raven-to-ga';
@@ -24,6 +23,40 @@ import { logTrackingCalls } from './utils';
 import { getAppEnvironment, shouldDebugGoogleAnalytics } from '../constants';
 import parseQuery from '../parseQuery';
 
+// Modify the global scope to add the `gtag` function and the `dataLayer` array
+declare global {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  interface Window {
+    dataLayer: object[];
+    gtag: (...args: (string | object)[]) => void;
+  }
+}
+
+// Function to initialize the Google Analytics script
+const initGA = (GA_MEASUREMENT_ID: string, gtagUrl = 'https://www.googletagmanager.com/gtag/js') => {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return;
+  }
+
+  const script = document.createElement('script');
+  script.async = true;
+  script.src = `${gtagUrl}?id=${GA_MEASUREMENT_ID}`;
+  document.body.appendChild(script);
+
+  window.dataLayer = window.dataLayer || [];
+  window.gtag = (...args) => {
+    window.dataLayer.push(args);
+  };
+};
+
+// Function to call the `gtag` function defined on the window object
+const gtag = (...args: (string | object)[]) => {
+  if (typeof window !== 'undefined')
+    if (typeof window.gtag === 'function') {
+      window.gtag(...args);
+    }
+};
+
 const isTruish = (value?: string | string[]) => {
   return Boolean(value) && value !== '0' && value !== 'false';
 };
@@ -56,7 +89,12 @@ const GA: IWebAnalyticsFunc = (config: Config, versionShort: string, versionLong
       msg = `jaeger/${msg}`;
     }
     msg = msg.slice(0, 149);
-    ReactGA.exception({ description: msg, fatal: false });
+
+    gtag('event', 'exception', {
+      description: msg,
+      fatal: false,
+    });
+
     if (isDebugMode) {
       logTrackingCalls();
     }
@@ -90,7 +128,13 @@ const GA: IWebAnalyticsFunc = (config: Config, versionShort: string, versionLong
     if (value != null) {
       event.value = Math.round(value);
     }
-    ReactGA.event(event);
+
+    gtag('event', event.action, {
+      event_category: event.category,
+      event_label: event.label,
+      value: event.value,
+    });
+
     if (isDebugMode) {
       logTrackingCalls();
     }
@@ -107,18 +151,22 @@ const GA: IWebAnalyticsFunc = (config: Config, versionShort: string, versionLong
       return;
     }
 
-    const gaConfig = { testMode: isTest || isDebugMode, titleCase: false, debug: true };
-    ReactGA.initialize(gaID || 'debug-mode', gaConfig);
-    ReactGA.set({
+    initGA(gaID || 'debug-mode');
+    gtag('set', {
       appId: 'github.com/jaegertracing/jaeger-ui',
       appName: 'Jaeger UI',
       appVersion: versionLong,
     });
+
     if (cookiesToDimensions !== undefined) {
       (cookiesToDimensions as unknown as Array<{ cookie: string; dimension: string }>).forEach(
         ({ cookie, dimension }: { cookie: string; dimension: string }) => {
           const match = ` ${document.cookie}`.match(new RegExp(`[; ]${cookie}=([^\\s;]*)`));
-          if (match) ReactGA.set({ [dimension]: match[1] });
+          if (match) {
+            gtag('set', {
+              [dimension]: match[1],
+            });
+          }
           // eslint-disable-next-line no-console
           else console.warn(`${cookie} not present in cookies, could not set dimension: ${dimension}`);
         }
@@ -152,7 +200,9 @@ const GA: IWebAnalyticsFunc = (config: Config, versionShort: string, versionLong
 
   const trackPageView = (pathname: string, search: string | TNil) => {
     const pagePath = search ? `${pathname}${search}` : pathname;
-    ReactGA.pageview(pagePath);
+    gtag('event', 'page_view', {
+      page_path: pagePath,
+    });
     if (isDebugMode) {
       logTrackingCalls();
     }

diff --git a/yarn.lock b/yarn.lock
@@ -8470,11 +8470,6 @@ react-fast-compare@^3.1.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-ga@^3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-3.3.1.tgz#d8e1f4e05ec55ed6ff944dcb14b99011dfaf9504"
-  integrity sha512-4Vc0W5EvXAXUN/wWyxvsAKDLLgtJ3oLmhYYssx+YzphJpejtOst6cbIHCIyF50Fdxuf5DDKqRYny24yJ2y7GFQ==
-
 react-helmet@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"