feat(analytics): GA4 tracking on landing and book + WeChat cover

jnMetaCode · jnMetaCode · commit aff82ec2dded · 2026-05-05T23:36:21.000+08:00
Tag G-4QDL6QMBNS attached to:

- landing/index.html (sync inline)

- /book/ all pages via mdbook additional-js (theme/gtag.js)

Pages report will distinguish landing (/) vs book chapters (/book/...).

Also adds 1080x1080 WeChat-friendly cover (cover-wechat-square.png).
diff --git a/book/book.toml b/book/book.toml
@@ -14,6 +14,7 @@ git-repository-icon = "fa-github"
 edit-url-template = "https://github.com/jnMetaCode/ai-coding-guide/edit/main/book/{path}"
 site-url = "/book/"
 additional-css = ["theme/custom.css"]
+additional-js = ["theme/gtag.js"]
 
 [output.html.search]
 enable = true
diff --git a/book/theme/gtag.js b/book/theme/gtag.js
@@ -0,0 +1,22 @@
+// Google Analytics 4 — AI 不止语
+// Loaded for every page in /book/ via mdbook additional-js
+(function() {
+  // Async-load gtag.js
+  var s = document.createElement('script');
+  s.async = true;
+  s.src = 'https://www.googletagmanager.com/gtag/js?id=G-4QDL6QMBNS';
+  document.head.appendChild(s);
+
+  // Initialize dataLayer + gtag
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){ dataLayer.push(arguments); }
+  window.gtag = gtag;
+
+  gtag('js', new Date());
+  gtag('config', 'G-4QDL6QMBNS', {
+    // Tag the book pages so reports can split landing vs book traffic
+    page_path: window.location.pathname,
+    custom_map: { dimension1: 'book_chapter' },
+    book_chapter: document.title || 'unknown'
+  });
+})();
diff --git a/landing/cover-wechat-square.png b/landing/cover-wechat-square.png
diff --git a/landing/index.html b/landing/index.html
@@ -33,6 +33,15 @@
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
 <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=LXGW+WenKai+TC:wght@300;400;700&display=swap" rel="stylesheet"/>
 <link rel="stylesheet" href="styles.css"/>
+
+<!-- Google Analytics 4 -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-4QDL6QMBNS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-4QDL6QMBNS');
+</script>
 </head>
 <body>
 <div id="root"></div>
