Documentation

Google Analytics

接入 Google Analytics 追踪页面访问和用户行为

Vibe Any 内置了 Google Analytics 支持。配置后,gtag 脚本会自动注入到每个页面。

配置步骤

创建 Google Analytics 媒体资源

前往 Google Analytics 创建新的媒体资源,完成后会获得一个格式为 G-XXXXXXXXXXMeasurement ID

设置环境变量

.env.local 中添加 Measurement ID:

VITE_GA_MEASUREMENT_ID=G-XXXXXXXXXX

部署

配置完成。当 VITE_GA_MEASUREMENT_ID 存在时,分析脚本会自动加载,无需修改任何代码。

实现原理

集成代码位于 src/routes/__root.tsx。当环境变量存在时,两个 script 标签会被注入到 <head> 中:

  1. Google gtag.js 加载器
  2. 初始化脚本,配置你的 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 的请求。

目录