👨💻 一名计算机科学家写给想让自己网站带点"大数据味儿"的人们
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 中加事件监听
javascript
// 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 中监听路由变化：
javascript
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>：
ini
<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-js4.2. 初始化
在 _app.js 里：
javascript
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. 路径追踪
javascript
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 中调用：
scss
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，不仅能让你的网站表演更有节奏感，也能帮你在数字世界的剧场里，赢得更多掌声。