MuseMVP

MuseMVP 同时集成 Google Analytics (GA4) 与百度统计，并通过统一的 useAnalytics hook 向两个平台同步发送自定义埋点事件，适合同时面向国内外市场的产品。

注入策略

src/modules/analytics/index.tsx

src/modules/html-document/Document.tsx

src/config/index.ts

文件	职责
`src/modules/analytics/index.tsx`	统计组件：`AnalyticsScript`、`useAnalytics`
`src/modules/html-document/Document.tsx`	挂载 `AnalyticsScript` 的位置
`src/config/index.ts`	`config.analytics` 配置来源

配置项

// src/config/index.ts
analytics: {
  googleAnalyticsId: "G-XXXXXXXXXX",  // GA4 测量 ID
  baiduTongjiId: "",                   // 百度统计 ID，留空则不同步
}

Google Analytics：使用 @next/third-parties 的 GoogleAnalytics 组件
百度统计：通过 next/script 动态注入百度统计脚本

开发环境行为

开发模式（NODE_ENV === "development"）下不会注入统计脚本
本地环境会输出 [AnalyticsScript] local development, skip analytics. 日志
避免开发与测试流量污染生产数据

事件追踪

通过 useAnalytics() hook 发送自定义事件：

import { useAnalytics } from "@/modules/analytics";

function MyComponent() {
  const { trackEvent } = useAnalytics();

  const handleClick = () => {
    trackEvent("button_click", { button_id: "pricing_cta", page: "home" });
  };

  return <button onClick={handleClick}>升级</button>;
}

事件会同时发送到：

gtag（Google Analytics）
_hmt（百度统计，需配置 baiduTongjiId）

服务端安全

trackEvent 内部会检查 typeof window !== "undefined"，在服务端渲染时不会执行，避免报错。

上线核对清单

检查生产环境统计 ID：确认 googleAnalyticsId、baiduTongjiId 为正式环境 ID。

确认脚本在 hydration 后正确加载：使用浏览器开发者工具 Network 面板验证。

用 Google Analytics Debugger 或百度统计实时报告验证关键转化事件。

站点统计

注入策略

配置项

开发环境行为

事件追踪

上线核对清单

相关文档

On this page