feat: integrate google analytics to track page views across all react routes

Author: elainefan331

public/index.html

@@ -125,7 +125,7 @@
       }
       gtag("js", new Date());
 
-      gtag("config", "G-F0BKEF4Y2R");
+      gtag("config", "G-F0BKEF4Y2R", { send_page_view: false });
     </script>
   </body>
 </html>

src/App.tsx

@@ -2,8 +2,14 @@ import { GlobalStyles } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import Routes from "components/Routes";
 import theme from "design/theme";
+import { useGAPageviews } from "hooks/useGAPageviews";
 import { BrowserRouter } from "react-router-dom";
 
+function GATracker() {
+  useGAPageviews();
+  return null;
+}
+
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
@@ -15,6 +21,7 @@ const App = () => {
         }}
       />
       <BrowserRouter basename={process.env.PUBLIC_URL}>
+        <GATracker />
         <Routes />
       </BrowserRouter>
     </ThemeProvider>

src/components/SearchPage/SubjectCard.tsx

@@ -42,7 +42,12 @@ const SubjectCard: React.FC<SubjectCardProps> = ({
 
   if (genderCode) {
     if (genderCode === "000F") genderDisplay = "Female";
-    else if (genderCode === "000M") genderDisplay = "Male";
+    else if (
+      genderCode === "000M" ||
+      genderCode === ",M,F" ||
+      genderCode === ",M,M"
+    )
+      genderDisplay = "Male";
   }
 
   // cover age string to readable format

src/hooks/useGAPageviews.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+declare global {
+  interface Window {
+    gtag?: (...args: any[]) => void;
+  }
+}
+
+export function useGAPageviews(measurementId = "G-F0BKEF4Y2R") {
+  const location = useLocation();
+
+  useEffect(() => {
+    // guard for dev or if gtag not yet loaded
+    if (typeof window.gtag !== "function") return;
+
+    const path = location.pathname + location.search + location.hash;
+
+    // GA4 recommended SPA approach: call config on each route change
+    window.gtag("config", measurementId, {
+      page_path: path,
+      page_title: document.title,
+    });
+  }, [location, measurementId]);
+}