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 就够了。

相关资源

这篇文档有问题?