From 531460228ce8203d705839eeaf1ba4520a7ae0fb Mon Sep 17 00:00:00 2001
From: Mirko Racz <123543210+raczmirko@users.noreply.github.com>
Date: Thu, 1 Aug 2024 21:48:55 +0200
Subject: [PATCH] feat: added Google Analytics basic page tracking

---
 package-lock.json      |  6 ++++++
 package.json           |  1 +
 src/app/App.js         | 29 +++++++++++++++++++++--------
 src/index.js           |  3 +++
 src/utils/analytics.js |  7 +++++++
 5 files changed, 38 insertions(+), 8 deletions(-)
 create mode 100644 src/utils/analytics.js

diff --git a/package-lock.json b/package-lock.json
index 39b8536..18a67ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "i18next-http-backend": "^2.5.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-ga4": "^2.1.0",
         "react-i18next": "^15.0.0",
         "react-router-dom": "^6.24.0",
         "react-scripts": "^5.0.1",
@@ -16093,6 +16094,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-i18next": {
       "version": "15.0.0",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.0.0.tgz",
diff --git a/package.json b/package.json
index f0335eb..94d909b 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "i18next-http-backend": "^2.5.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-i18next": "^15.0.0",
     "react-router-dom": "^6.24.0",
     "react-scripts": "^5.0.1",
diff --git a/src/app/App.js b/src/app/App.js
index faf33b4..8ce1769 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -1,19 +1,32 @@
 import { Box } from '@mui/material';
 import CssBaseline from '@mui/material/CssBaseline';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import ReactGA from 'react-ga4';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import '../assets/App.css';
 import Sidebar from '../components/common/Sidebar';
-import Home from './pages/Home';
-import Contact from './pages/Contact';
-import Academic from './pages/Academic';
-import Skills from './pages/Skills';
 import About from './pages/About';
-import Resources from './pages/Resources';
+import Academic from './pages/Academic';
+import Contact from './pages/Contact';
+import Home from './pages/Home';
 import Projects from './pages/Projects';
+import Resources from './pages/Resources';
+import Skills from './pages/Skills';
+import { useEffect } from 'react';
+
+const usePageTracking = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    ReactGA.send({ hitType: 'pageview', page: location.pathname + location.search });
+  }, [location]);
+};
+
+
+const App = () => {
+  usePageTracking();
 
-function App() {
   return (
     <ThemeProvider theme={createTheme({palette: {mode: 'dark'}})}>
       <CssBaseline/>
diff --git a/src/index.js b/src/index.js
index ada4c39..379a893 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,9 @@ import { HashRouter } from 'react-router-dom';
 import App from './app/App';
 import NotificationProvider from '../src/components/common/NotificationProvider';
 import i18n from './i18n';
+import initializeAnalytics from './utils/analytics';
+
+initializeAnalytics();
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
diff --git a/src/utils/analytics.js b/src/utils/analytics.js
new file mode 100644
index 0000000..bb8d615
--- /dev/null
+++ b/src/utils/analytics.js
@@ -0,0 +1,7 @@
+import ReactGA from "react-ga4";
+
+const initializeAnalytics = () => {
+  ReactGA.initialize("G-MDJYMJ41D2");
+};
+
+export default initializeAnalytics;
\ No newline at end of file