From 211fbebb11ced215f9dc0ee1714bc1f1bd0f9389 Mon Sep 17 00:00:00 2001
From: Daniel Dobkowski <ddobkowski@trans.eu>
Date: Wed, 11 Dec 2024 22:15:56 +0100
Subject: [PATCH] feat(GoogleAnalytics): added react-ga

---
 package-lock.json                             | 11 ++++--
 package.json                                  |  1 +
 src/App.tsx                                   | 31 ++++++++-------
 src/features/analytics/AnalyticsWrapper.tsx   |  9 +++++
 .../analytics/contexts/AnalyticsContext.tsx   |  4 ++
 src/features/analytics/hooks/index.ts         |  1 +
 .../analytics/hooks/useGoogleAnalytics.ts     | 38 +++++++++++++++++++
 src/features/analytics/index.ts               |  1 +
 src/features/analytics/types.ts               | 14 +++++++
 src/features/service/api/queries/models.ts    |  1 +
 src/features/service/api/queries/queries.ts   |  1 +
 .../service/components/ServiceHeaders.tsx     | 10 ++++-
 src/models/service.ts                         |  1 +
 13 files changed, 105 insertions(+), 18 deletions(-)
 create mode 100644 src/features/analytics/AnalyticsWrapper.tsx
 create mode 100644 src/features/analytics/contexts/AnalyticsContext.tsx
 create mode 100644 src/features/analytics/hooks/index.ts
 create mode 100644 src/features/analytics/hooks/useGoogleAnalytics.ts
 create mode 100644 src/features/analytics/index.ts
 create mode 100644 src/features/analytics/types.ts

diff --git a/package-lock.json b/package-lock.json
index 8039180..7df144c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5789,9 +5789,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001680",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001680.tgz",
-      "integrity": "sha512-rPQy70G6AGUMnbwS1z6Xg+RkHYPAi18ihs47GH0jcxIG7wArmPgY3XbS2sRdBbxJljp3thdT8BIqv9ccCypiPA==",
+      "version": "1.0.30001688",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001688.tgz",
+      "integrity": "sha512-Nmqpru91cuABu/DTCXbM2NSRHzM2uVHfPnhJ/1zEAJx/ILBRVmz3pzH4N7DZqbdG0gWClsCC05Oj0mJ/1AWMbA==",
       "dev": true
     },
     "case-sensitive-paths-webpack-plugin": {
@@ -14635,6 +14635,11 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
       "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
     },
+    "react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ=="
+    },
     "react-helmet-async": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz",
diff --git a/package.json b/package.json
index 1166b75..8c51519 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
     "react-dates": "^21.8.0",
     "react-dates-gte-react-17-21.8.0-version-fixed": "^21.8.0",
     "react-dom": "^18.2.0",
+    "react-ga4": "^2.1.0",
     "react-helmet-async": "^1.3.0",
     "react-i18next": "^11.17.2",
     "react-markdown": "^8.0.0",
diff --git a/src/App.tsx b/src/App.tsx
index 091adf1..f432461 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { apolloClient } from "api/apolloClient";
 import Footer from "components/Footer";
 import Header from "components/Header";
+import { AnalyticsWrapper } from "features/analytics";
 import StateModal from "features/confirmation/components/StateModal";
 import "features/i18n";
 import ThemeWrapper from "features/theme/components/ThemeWrapper";
@@ -15,20 +16,22 @@ import { AppLayoutWrapper } from "./components/layout/AppLayoutWrapper";
 function App() {
   return (
     <RecoilRoot>
-      <Router>
-        <ApolloProvider client={apolloClient}>
-          <ThemeWrapper>
-            <GlobalStyles />
-            <AppLayoutWrapper>
-              <Header />
-              <PageSwitcher>
-                <StateModal />
-              </PageSwitcher>
-              <Footer />
-            </AppLayoutWrapper>
-          </ThemeWrapper>
-        </ApolloProvider>
-      </Router>
+      <AnalyticsWrapper>
+        <Router>
+          <ApolloProvider client={apolloClient}>
+            <ThemeWrapper>
+              <GlobalStyles />
+              <AppLayoutWrapper>
+                <Header />
+                <PageSwitcher>
+                  <StateModal />
+                </PageSwitcher>
+                <Footer />
+              </AppLayoutWrapper>
+            </ThemeWrapper>
+          </ApolloProvider>
+        </Router>
+      </AnalyticsWrapper>
     </RecoilRoot>
   );
 }
diff --git a/src/features/analytics/AnalyticsWrapper.tsx b/src/features/analytics/AnalyticsWrapper.tsx
new file mode 100644
index 0000000..66ed3e0
--- /dev/null
+++ b/src/features/analytics/AnalyticsWrapper.tsx
@@ -0,0 +1,9 @@
+import React, { PropsWithChildren } from "react";
+import { AnalyticsContext } from "./contexts/AnalyticsContext";
+import { useGoogleAnalytics } from "./hooks";
+
+export const AnalyticsWrapper: React.FC<PropsWithChildren> = ({ children }) => {
+  const googleAnalytics = useGoogleAnalytics();
+
+  return <AnalyticsContext.Provider value={googleAnalytics}>{children}</AnalyticsContext.Provider>;
+};
diff --git a/src/features/analytics/contexts/AnalyticsContext.tsx b/src/features/analytics/contexts/AnalyticsContext.tsx
new file mode 100644
index 0000000..67f1ae6
--- /dev/null
+++ b/src/features/analytics/contexts/AnalyticsContext.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import { UseGoogleAnalyticsReturn } from "../types";
+
+export const AnalyticsContext = React.createContext({} as UseGoogleAnalyticsReturn);
diff --git a/src/features/analytics/hooks/index.ts b/src/features/analytics/hooks/index.ts
new file mode 100644
index 0000000..2fa7f11
--- /dev/null
+++ b/src/features/analytics/hooks/index.ts
@@ -0,0 +1 @@
+export { useGoogleAnalytics } from "./useGoogleAnalytics";
diff --git a/src/features/analytics/hooks/useGoogleAnalytics.ts b/src/features/analytics/hooks/useGoogleAnalytics.ts
new file mode 100644
index 0000000..035e271
--- /dev/null
+++ b/src/features/analytics/hooks/useGoogleAnalytics.ts
@@ -0,0 +1,38 @@
+import { useState } from "react";
+import ReactGA from "react-ga4";
+import { GoogleAnalyticsEvent, UseGoogleAnalytics } from "../types";
+
+export const useGoogleAnalytics: UseGoogleAnalytics = () => {
+  const [trackingId, setTrackingId] = useState<string>("");
+
+  const init = (id: string) => {
+    if (!id) {
+      throw new Error("Google Analytics tracking ID is required");
+    }
+    ReactGA.initialize(id);
+    setTrackingId(id);
+    console.log(`Google Analytics initialized with tracking ID: ${id}`);
+  };
+
+  const sendEvent = (event: GoogleAnalyticsEvent) => {
+    if (!trackingId) {
+      throw new Error("Google Analytics is not initialized");
+    }
+    ReactGA.event(event);
+    console.log(`Google Analytics event sent: ${JSON.stringify(event)}`);
+  };
+
+  const send = (path: any) => {
+    if (!trackingId) {
+      throw new Error("Google Analytics is not initialized");
+    }
+    ReactGA.send(path);
+    console.log(`Google Analytics pageview sent: ${path}`);
+  };
+
+  return {
+    init,
+    sendEvent,
+    send,
+  };
+};
diff --git a/src/features/analytics/index.ts b/src/features/analytics/index.ts
new file mode 100644
index 0000000..ce37b5f
--- /dev/null
+++ b/src/features/analytics/index.ts
@@ -0,0 +1 @@
+export { AnalyticsWrapper } from "./AnalyticsWrapper";
diff --git a/src/features/analytics/types.ts b/src/features/analytics/types.ts
new file mode 100644
index 0000000..562b65d
--- /dev/null
+++ b/src/features/analytics/types.ts
@@ -0,0 +1,14 @@
+export interface UseGoogleAnalyticsReturn {
+  init: (trackingId: string) => void;
+  sendEvent: (event: any) => void;
+  send: (fieldObject: any) => void;
+}
+
+export type UseGoogleAnalytics = () => UseGoogleAnalyticsReturn;
+
+export interface GoogleAnalyticsEvent {
+  category: string;
+  action: string;
+  label?: string;
+  value?: number;
+}
diff --git a/src/features/service/api/queries/models.ts b/src/features/service/api/queries/models.ts
index 98ac134..cc57e7c 100644
--- a/src/features/service/api/queries/models.ts
+++ b/src/features/service/api/queries/models.ts
@@ -11,6 +11,7 @@ export interface ServiceQueryResult {
     theme: "DARK" | "LIGHT";
     defaultLocale: string;
     localTimeZone: string;
+    googleTagId: string | null;
   };
   title: string;
   description: string;
diff --git a/src/features/service/api/queries/queries.ts b/src/features/service/api/queries/queries.ts
index 4d2aa55..f288f12 100644
--- a/src/features/service/api/queries/queries.ts
+++ b/src/features/service/api/queries/queries.ts
@@ -11,6 +11,7 @@ export const GET_SERVICE = gql`
         theme
         defaultLocale
         localTimeZone
+        googleTagId
       }
       title
       description
diff --git a/src/features/service/components/ServiceHeaders.tsx b/src/features/service/components/ServiceHeaders.tsx
index b94ca09..d582ea8 100644
--- a/src/features/service/components/ServiceHeaders.tsx
+++ b/src/features/service/components/ServiceHeaders.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useContext, useEffect } from "react";
+import { AnalyticsContext } from "features/analytics/contexts/AnalyticsContext";
 import { Helmet, HelmetProvider } from "react-helmet-async";
 import { useRecoilValue } from "recoil";
 import { serviceAtom } from "state/atoms/service";
@@ -7,6 +8,13 @@ import { headerSelector } from "state/selectors/headerSelector";
 const ServiceHeaders = () => {
   const icon = useRecoilValue(headerSelector)?.logoUrl;
   const service = useRecoilValue(serviceAtom);
+  const { init } = useContext(AnalyticsContext);
+
+  useEffect(() => {
+    if (service?.project?.googleTagId) {
+      init(service.project.googleTagId);
+    }
+  }, [init, service?.project?.googleTagId]);
 
   if (service === undefined) return null;
 
diff --git a/src/models/service.ts b/src/models/service.ts
index 08f2739..a5455dd 100644
--- a/src/models/service.ts
+++ b/src/models/service.ts
@@ -77,6 +77,7 @@ export interface Service {
     theme: "DARK" | "LIGHT";
     defaultLocale: string;
     localTimeZone: string;
+    googleTagId: string | null;
   };
   title: string;
   description: string;