Added Google Analytics Tracker

Author: ktopchiev

index.html

@@ -10,7 +10,9 @@
     function gtag() { dataLayer.push(arguments); }
     gtag('js', new Date());
 
-    gtag('config', 'G-MED2RQS20T');
+    gtag('config', 'G-XXXXXXXXXX', {
+      send_page_view: false
+    });
   </script>
 
   <meta charset="UTF-8" />

src/analytics/AnalyticsTracker.tsx

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { sendPageView } from '../analytics/analytics';
+
+export const AnalyticsTracker = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    const fullPath = location.pathname + location.search + location.hash;
+    sendPageView(fullPath);
+  }, [location]);
+
+  return null;
+};

src/analytics/analytics.ts

@@ -0,0 +1,15 @@
+declare global {
+  interface Window {
+    gtag?: (...args: any[]) => void;
+  }
+}
+
+export const sendPageView = (url: string) => {
+  if (typeof window.gtag === 'function') {
+    window.gtag('event', 'page_view', {
+      page_path: url,
+    });
+  } else {
+    console.warn('gtag is not defined');
+  }
+};

src/layout/App.tsx

@@ -2,6 +2,7 @@ import { Container, CssBaseline } from "@mui/material"
 import Header from "./Header"
 import { Outlet } from "react-router-dom"
 import { AnimatePresence } from "framer-motion";
+import { AnalyticsTracker } from "../analytics/AnalyticsTracker";
 
 function App() {
 
@@ -11,6 +12,7 @@ function App() {
 			<Header />
 			<AnimatePresence initial={false} mode={"wait"}>
 				<Container sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', m: 0, p: 0, minHeight: '100vh', minWidth: '100vw' }}>
+					<AnalyticsTracker />
 					<Outlet key={window.location.pathname} />
 				</Container>
 			</AnimatePresence>