Add GA tracking (#22)

ewaldhofman-sf · web-flow · commit 2bea2113999c · 2025-07-25T15:53:30.000-07:00
diff --git a/index.html b/index.html
@@ -5,6 +5,15 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>E-Bikes Portal</title>
+    
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=%VITE_GA_MEASUREMENT_ID%"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '%VITE_GA_MEASUREMENT_ID%');
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/client/App.tsx b/src/client/App.tsx
@@ -11,8 +11,8 @@ import { LicenseType, User } from '../db/users';
 import Analyze from './components/analytics/Analyze';
 import AIAssistent from './components/analytics/AIAssistent';
 import DemoScript from './components/auth/DemoScript';
-import { useMobile } from './hooks/useMobile';
 import MobileRouteGuard from './components/MobileRouteGuard';
+import { useGA } from './hooks/useGA';
 
 interface AppContextType {
   notifications: NotificationItem[];
@@ -76,6 +76,8 @@ export const UserProvider = ({ children }: { children: ReactNode }) => {
 }
 
 function App() {
+  // Initialize Google Analytics tracking
+  useGA();
 
   return (
     <div className={styles.root}>
diff --git a/src/client/hooks/useGA.ts b/src/client/hooks/useGA.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+declare global {
+  interface Window {
+    gtag: (command: string, targetId: string, config?: any) => void;
+  }
+}
+
+export const useGA = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Track page view when location changes
+    if (window.gtag && import.meta.env.VITE_GA_MEASUREMENT_ID) {
+      window.gtag('config', import.meta.env.VITE_GA_MEASUREMENT_ID, {
+        page_path: location.pathname + location.search,
+      });
+    }
+  }, [location]);
+}; 
