add gtag

mythz · mythz · commit c42918ac078d · 2025-12-03T22:35:35.000+08:00
diff --git a/index.html b/index.html
@@ -6,6 +6,15 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@servicestack/react - Component Gallery</title>
     <meta name="description" content="A comprehensive React component library for building modern web applications with ServiceStack" />
+
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-1F83FL4LLC"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-1F83FL4LLC');
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/analytics.ts b/src/analytics.ts
@@ -0,0 +1,14 @@
+// Google Analytics utility functions
+declare global {
+  interface Window {
+    gtag?: (...args: any[]) => void;
+  }
+}
+
+export const trackPageView = (url: string) => {
+  if (typeof window.gtag !== 'undefined') {
+    window.gtag('config', 'G-1F83FL4LLC', {
+      page_path: url,
+    });
+  }
+};
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,7 +1,8 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import ReactDOM from 'react-dom/client'
-import { BrowserRouter, Routes, Route } from 'react-router-dom'
+import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom'
 import { GalleryProvider } from './gallery/context'
+import { trackPageView } from './analytics'
 import Gallery from './gallery'
 import AlertsPage from './gallery/pages/Alerts'
 import DataGridPage from './gallery/pages/DataGrid'
@@ -42,10 +43,22 @@ if (colorScheme === 'dark') {
 
 console.log('HTML classList after:', document.documentElement.classList.toString())
 
+// Analytics component to track page views
+function Analytics() {
+  const location = useLocation()
+
+  useEffect(() => {
+    trackPageView(location.pathname + location.search)
+  }, [location])
+
+  return null
+}
+
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <GalleryProvider>
       <BrowserRouter>
+        <Analytics />
         <Routes>
           <Route path="/" element={<Gallery />} />
           <Route path="/gallery" element={<Gallery />} />
