Add Google Analytics tracking for page views and course clicks

River@devbox · River@devbox · commit 4d1041612547 · 2026-03-31T11:04:06.000+08:00
diff --git a/index.html b/index.html
@@ -5,6 +5,14 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>QPython+ - Personalized Programming Learning Community</title>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-JH6WGHX4M2"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-JH6WGHX4M2');
+    </script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/src/pages/CoursesPage.tsx b/src/pages/CoursesPage.tsx
@@ -291,6 +291,12 @@ export function CoursesPage() {
                     rel="noopener noreferrer"
                     className="block bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow"
                     onClick={(e) => {
+                      if (typeof window.gtag !== 'undefined') {
+                        window.gtag('event', 'select_content', {
+                          content_type: 'course',
+                          item_id: course.id,
+                        })
+                      }
                       if (typeof window !== 'undefined' && (window as any).milib) {
                         e.preventDefault()
                         ;(window as any).milib.openUrl(course.url)
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
@@ -0,0 +1,3 @@
+interface Window {
+  gtag: (...args: any[]) => void
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+interface Window {`
	`2`	`+ gtag: (...args: any[]) => void`
	`3`	`+}`