集成应用数据统计
00 / 00
Google Analytics
Google Analytics 4 接入指南
默认情况下,01MVP 推荐先使用 Cloudflare Web Analytics 做早期上线统计。需要 GA4 的渠道归因、转化漏斗或广告生态数据时,再打开 Google Analytics。
创建 GA4 媒体资源
在 Google Analytics 中创建媒体资源,获取衡量 ID(格式为 G-XXXXXXXXXX)。
配置环境变量
在 products/01mvp/packages/config/.env 或部署平台的环境变量里配置:
VITE_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX重新启动或重新部署
本地开发时重启 vpr @01mvp/product#dev。生产环境修改变量后重新部署,让 Vite 重新注入公开环境变量。
不配置 VITE_GOOGLE_ANALYTICS_ID 时,模板不会加载 Google Analytics 脚本。配置后,系统会在 TanStack Start 根文档中加载 gtag,并在前端路由变化时上报页面访问。
事件追踪
页面和组件里使用统一的 useAnalytics:
"use client";
import { useAnalytics } from "@/shared/analytics/analytics-provider";
export function UpgradeButton() {
const { trackEvent } = useAnalytics();
return (
<button onClick={() => trackEvent("upgrade_click", { plan: "pro" })}>
升级
</button>
);
}当 VITE_GOOGLE_ANALYTICS_ID 存在时,事件会通过 gtag("event", ...) 发到 GA4。环境变量为空时,这个调用不会报错,也不会发请求。
和 Cloudflare Web Analytics 一起用
Cloudflare Web Analytics 负责基础访问统计和真实用户性能,Google Analytics 负责更细的渠道、转化和广告生态分析。两者可以同时启用;如果只是早期验证有没有访问,先用 Cloudflare 就够了。
相关资源
这篇文档有问题?