Google Analytics
接入 Google Analytics 追踪页面访问和用户行为
Vibe Any 内置了 Google Analytics 支持。配置后,gtag 脚本会自动注入到每个页面。
配置步骤
创建 Google Analytics 媒体资源
前往 Google Analytics 创建新的媒体资源,完成后会获得一个格式为 G-XXXXXXXXXX 的 Measurement ID。
部署
配置完成。当 VITE_GA_MEASUREMENT_ID 存在时,分析脚本会自动加载,无需修改任何代码。
实现原理
集成代码位于 src/routes/__root.tsx。当环境变量存在时,两个 script 标签会被注入到 <head> 中:
- Google gtag.js 加载器
- 初始化脚本,配置你的 Measurement ID
{import.meta.env.VITE_GA_MEASUREMENT_ID && (
<>
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${import.meta.env.VITE_GA_MEASUREMENT_ID}`}
/>
<script
dangerouslySetInnerHTML={{
__html: `window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}gtag('js',new Date());gtag('config','${import.meta.env.VITE_GA_MEASUREMENT_ID}');`,
}}
/>
</>
)}如果未设置 VITE_GA_MEASUREMENT_ID,不会加载任何分析脚本,零开销。
验证
部署后,打开网站并查看 Google Analytics 中的实时报告,确认数据正常接收。
也可以打开浏览器开发者工具 → 网络标签页,查看是否有发往 googletagmanager.com 的请求。