ds

.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

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

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>