在 Next.js 中接入 Google Analytics 与 PostHog —— 一场“数据偷窥”的艺术演出

👨‍💻 一名计算机科学家写给想让自己网站带点"大数据味儿"的人们

---

1. 为什么要"偷窥"用户行为？

在信息的海洋里，网站就像一个摇滚乐队，你的页面是舞台，你的用户是观众。

但是尴尬的是：

• 🎸 有人点头？
• 💤 有人睡着？
• 🚪 有人直接走人？

如果我们不知道用户在干嘛，就好像我们拉了一场小提琴独奏会，却不知道是震撼人心还是震耳欲聋。

于是，Google Analytics（以下简称 GA）和 PostHog 出场了，它们是演唱会的"探头摄像机"，

把观众的表情、行为、鼓掌次数都记录下来。

---

2. Next.js 的舞台搭建

Next.js 本质上是 React 的一位"魔术师助手"，它能做 服务端渲染（SSR） ，能做 静态生成（SSG） ，还能在浏览器和服务器之间传送魔法般的数据。

当我们要接入分析工具时，Next.js 有一个天然的挑战：

• 页面并不总是在前端完整生成，它可能来源于服务器生成的 HTML，
• 所以我们得小心------分析工具通常依赖浏览器端的 JS 来"偷窥"。

换句话说：要在适当的地方插入它们，否则我们的"眼睛"可能瞎掉。

---

3. Google Analytics 的"眼睛"

GA 是老牌的舞台监督。接入步骤如下：

3.1. 安装依赖（可选）

GA 的现代方式是用 Google Tag（gtag），不需要额外库。

3.2. 在 _app.js 中加事件监听

// lib/gtag.js
export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

// 基础事件发送
export const pageview = (url) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};

export const event = ({ action, category, label, value }) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

然后在 _app.js 中监听路由变化：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import * as gtag from '../lib/gtag';

export default function MyApp({ Component, pageProps }) {
  const router = useRouter();
  
  useEffect(() => {
    const handleRouteChange = (url) => {
      gtag.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

最后在 pages/_document.js 里塞上 Google 提供的 <script>：

<Head>
  <script
    async
    src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', '${GA_TRACKING_ID}', { page_path: window.location.pathname });
      `,
    }}
  />
</Head>

✔️ 至此，你的网站已经在偷偷记录每位观众的掌声。

---

4. PostHog 的"显微镜"

如果 GA 是 CCTV，那么 PostHog 就是 行为心理学实验室 ------它不仅仅统计页面浏览，还能捕捉按钮点击、用户路径，甚至录屏般还原用户体验。

4.1. 安装

npm install posthog-js

4.2. 初始化

在 _app.js 里：

import { useEffect } from 'react';
import posthog from 'posthog-js';

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    if (typeof window !== 'undefined') {
      posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
        api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
      });
    }
  }, []);

  return <Component {...pageProps} />;
}

4.3. 路径追踪

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import posthog from 'posthog-js';

const usePageTracking = () => {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = () => posthog.capture('$pageview');
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);
};

export default usePageTracking;

然后在 _app.js 中调用：

usePageTracking();

到此，PostHog 会悄无声息地描绘用户的行动轨迹，

就像实验室里的白老鼠 🐁 在迷宫中走来走去。

---

5. GA vs PostHog ------ 谁更像老大？

特性	Google Analytics	PostHog
📊 报表	丰富，套起来像 Excel	灵活，但界面 geek 味更浓
🔍 用户行为重现	❌	✅ 可录制 session
🌐 开源/自托管	❌	✅ 可自托管，隐私友好
🚀 生态	巨大	社区驱动

如果你想"要数据漂亮报表"，选择 GA；

如果你想"搞心理学研究"，选择 PostHog。

---

6. 底层的"小道消息"

• GA 的底层逻辑：浏览器端脚本 -> 往 Google 服务器送事件 -> Google 后台汇总。
• PostHog 的底层逻辑：浏览器端脚本 -> 送事件到自家的 API Host（可自托管） -> 存数据库（通常是 ClickHouse）。

两者都是基于浏览器事件监听：例如监听 history.pushState 的变化，或拦截 onClick。

换句话说，这些分析库并没有什么"黑魔法"，就是在 DOM 和路由变化上加耳朵。

真正的"数学味儿"：

你最后看的报表，本质就是各种"加加减减除以总数"。比如：

• 跳出率：单页访问 ÷ 总访问
• 转化率：完成目标数 ÷ 总人数
• 留存曲线：新用户在第 N 天仍然访问 ÷ 新用户总数

这就是我们所谓的"数据科学"，听起来高大上，本质上是小学算术。😎

---

7. 文学尾声

接入 GA 或 PostHog，就像在舞台上放了一台望远镜：

• 你终于能看到观众眼皮是否开始打架，
• 也能知道哪一首歌他们笑得合不拢嘴。

在互联网世界里，数据分析 ≠ 控制用户，

它更像是 舞台与观众之间的心电感应。

所以，请善用你的"偷窥"，把它当作理解用户、优化体验的桥梁，

而不是"监视"。

---

🎭 本文寓意：Next.js 搭配 GA 与 PostHog，不仅能让你的网站表演更有节奏感，也能帮你在数字世界的剧场里，赢得更多掌声。