From 4a60e5e7c2edbc46b5db3bb27eb58c9f1e14c1cb Mon Sep 17 00:00:00 2001
From: Joseph Lemaitre <jo.lemaitresamra@gmail.com>
Date: Mon, 9 Feb 2026 14:22:13 +0100
Subject: [PATCH] tracking

---
 .github/workflows/build-deploy.yml |  2 ++
 app/index.html                     |  8 ++++++++
 app/src/App.jsx                    | 18 +++++++++++++++++-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/build-deploy.yml b/.github/workflows/build-deploy.yml
index b56afc20..64274902 100644
--- a/.github/workflows/build-deploy.yml
+++ b/.github/workflows/build-deploy.yml
@@ -91,6 +91,8 @@ jobs:
         run: npm ci
       - name: Build website
         working-directory: ./app
+        env:
+          VITE_GA_MEASUREMENT_ID: ${{ secrets.VITE_GA_MEASUREMENT_ID }}
         run: |
           if [ "${{ github.repository }}" = "ACCIDDA/RespiLens-staging" ]; then
             npm run build:staging
diff --git a/app/index.html b/app/index.html
index 3bc62b8e..f2009be5 100644
--- a/app/index.html
+++ b/app/index.html
@@ -7,6 +7,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>RespiLens</title>
     <meta name="description" content="Explore the latest forecasts of respiratory disease activity across every U.S.  state. RespiLens provides intuitive and consolidated visualization of influenza, COVID-19, and RSV forecasts from CDC-led competitions." />
+    <!-- Google Analytics (GA4) -->
+    <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>
     <script type="application/ld+json">
     {
       "@context": "https://schema.org",
diff --git a/app/src/App.jsx b/app/src/App.jsx
index 4f8f3ddb..84f4c5b4 100644
--- a/app/src/App.jsx
+++ b/app/src/App.jsx
@@ -1,4 +1,5 @@
-import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, useNavigate, useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
 import { HelmetProvider } from 'react-helmet-async';
 import { ViewProvider } from './contexts/ViewContext';
 import { useView } from './hooks/useView';
@@ -53,9 +54,24 @@ const AppLayout = () => {
 };
 
 const App = () => {
+  const AnalyticsTracker = () => {
+    const location = useLocation();
+
+    useEffect(() => {
+      if (typeof window !== 'undefined' && window.gtag) {
+        window.gtag('config', import.meta.env.VITE_GA_MEASUREMENT_ID, {
+          page_path: location.pathname + location.search,
+        });
+      }
+    }, [location]);
+
+    return null;
+  };
+
   return (
     <HelmetProvider>
       <Router>
+        <AnalyticsTracker />
         <ViewProvider>
           <AppLayout />
         </ViewProvider>