feat(docs): Add Google Analytics tracking to VitePress documentation #214
Description
Summary
Add Google Analytics 4 tracking to our VitePress documentation site for usage analytics.
Tracking ID: G-RY1XJ7LR5F
Options
Option 1: Plugin (Recommended)
Use vitepress-plugin-google-analytics:
yarn add -D vitepress-plugin-google-analytics// docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import googleAnalytics from 'vitepress-plugin-google-analytics'
export default {
...DefaultTheme,
enhanceApp({ app }) {
googleAnalytics({
id: 'G-RY1XJ7LR5F'
})
}
}Pros:
- Clean, minimal code
- Handles SPA navigation correctly
- Community maintained
Option 2: Native VitePress Config
Add gtag.js directly in docs/.vitepress/config.ts:
export default defineConfig({
head: [
[
'script',
{ async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-RY1XJ7LR5F' }
],
[
'script',
{},
`window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-RY1XJ7LR5F');`
]
],
// ... rest of config
})Pros:
- No additional dependency
- Official VitePress approach
Cons:
- More boilerplate
- May need manual SPA navigation handling
Environment Variable
Consider using env variable for the tracking ID:
id: process.env.VITEPRESS_GA_ID || 'G-RY1XJ7LR5F'