From d82174f13b6f8b4e16740e9e681e8b9d8af3ec2f Mon Sep 17 00:00:00 2001
From: ishuah <kariuki@ishuah.com>
Date: Thu, 15 Aug 2024 19:23:09 +0300
Subject: [PATCH] Add Google Analytics

---
 package-lock.json | 11 +++++++++++
 package.json      |  1 +
 src/pages/App.tsx |  2 ++
 3 files changed, 14 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 597dc1a..0e83a9e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "polished": "^4.1.4",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-ga4": "^2.1.0",
         "react-scripts": "^5.0.0",
         "recoil": "^0.7.6",
         "styled-components": "^5.3.3",
@@ -14649,6 +14650,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/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=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -28007,6 +28013,11 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "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-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index d505a43..af426f3 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "polished": "^4.1.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-ga4": "^2.1.0",
     "react-scripts": "^5.0.0",
     "recoil": "^0.7.6",
     "styled-components": "^5.3.3",
diff --git a/src/pages/App.tsx b/src/pages/App.tsx
index c3c2fe7..808e42e 100644
--- a/src/pages/App.tsx
+++ b/src/pages/App.tsx
@@ -10,6 +10,7 @@ import {
   Paragraph,
 } from 'grommet';
 import { useRecoilState } from 'recoil';
+import ReactGA from 'react-ga4';
 
 import DataInputStep from '../components/DataInputStep';
 import MapDetailStep from '../components/MapDetailStep';
@@ -32,6 +33,7 @@ const CustomTheme = {
 };
 
 function App() {
+  ReactGA.initialize('G-JB6NTGXKG0');
   const [appState, setAppState] = useRecoilState<AppState>(recoilState);
   const [smallScreenNotify, setSmallScreenNotify] = useState<boolean>(true);