feat: added Google Analytics basic page tracking

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",

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/>

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(

src/utils/analytics.js

@@ -0,0 +1,7 @@
+import ReactGA from "react-ga4";
+
+const initializeAnalytics = () => {
+  ReactGA.initialize("G-MDJYMJ41D2");
+};
+
+export default initializeAnalytics;