应用数据统计

概览

01MVP 默认推荐先用 Cloudflare Web Analytics 看上线后的基础访问数据。这里讲的是应用内统计：自定义事件、注册转化、支付漏斗、按钮点击和产品行为分析。

如果你只想看上线后有没有访问、访问来自哪里、真实用户页面性能如何，先用 上线统计 里的 Cloudflare Web Analytics。

应用内统计可选接入 Google Analytics、百度统计和 Umami，通过环境变量切换。没有配置这些环境变量时，应用不会注入对应统计脚本。

• Google Analytics — 全功能流量分析，通过 VITE_GOOGLE_ANALYTICS_ID 启用
• 百度统计 — 面向国内用户的流量分析，通过 VITE_BAIDU_ANALYTICS_ID 启用
• Umami — 开源、隐私友好的统计方案，通过 VITE_UMAMI_WEBSITE_ID 启用

环境变量

自定义事件追踪

系统提供了统一的 useAnalytics hook，在组件中发送自定义事件：

"use client";

import { useAnalytics } from "@/shared/analytics/analytics-provider";

export function DownloadButton() {
  const { trackEvent } = useAnalytics();

  const handleClick = () => {
    trackEvent("download_click", { file: "guide.pdf" });
    // 开始下载...
  };

  return <button onClick={handleClick}>下载指南</button>;
}

useAnalytics 会根据当前启用的统计服务，自动将事件发送到对应的平台：

• Google Analytics — 使用 gtag("event", ...)
• 百度统计 — 使用 _hmt.push(['_trackEvent', ...])
• Umami — 使用 umami.track()
• 未配置任何服务 — trackEvent 为空操作，不报错

统计服务优先级

如果同时配置了多个统计 ID，系统按以下优先级选择一个统计服务：

1. VITE_GOOGLE_ANALYTICS_ID（优先）
2. VITE_BAIDU_ANALYTICS_ID（次选）
3. VITE_UMAMI_WEBSITE_ID（再次选）
4. 无：useAnalytics 返回空操作

Cloudflare Web Analytics 不在这个优先级里。它由 Cloudflare 在站点层注入或上报，不需要 VITE_* 环境变量，和应用内 provider 可以并存。

架构说明

统计模块位于 products/01mvp/apps/web/src/shared/analytics/，结构如下：

shared/analytics/
  analytics-provider.tsx   # 统一入口，环境变量选择 provider

当前实现集中在 analytics-provider.tsx，对外提供：

• AnalyticsScripts — 组件，渲染统计脚本标签
• useAnalytics — hook，返回 { trackEvent }

如需接入新的统计服务，先在这里新增 provider 选择逻辑，再按需要拆出单独文件。不要在页面里到处手动插脚本。

各统计服务接入指南

早期推荐

对于 01MVP 模板的早期项目，建议按阶段接入，不要一开始就装太多：

第一阶段（必须）：

• Google Search Console — 查看 Google 收录、搜索关键词、Core Web Vitals
• Cloudflare Web Analytics — 基础访问统计、来源、热门页面和真实用户性能，见上线统计

第二阶段（有注册/付费后）：

• Umami / GA4 / PostHog — 用户行为分析、转化漏斗和自定义事件

如果部署在 Zeabur 并通过 Cloudflare 代理，早期可以先用 Cloudflare Web Analytics + PageSpeed Insights；需要自定义事件再启用 Umami、GA4 或其他事件分析工具。