欢迎! 别被“数据分析”这四个字吓到了。这一章不需要你写一行代码。
你只需要会按 Ctrl + C (复制) 和 Ctrl + V (粘贴),剩下的交给 AI。
只需 5 分钟,你就能清楚地看到:
- 每天有多少人来看你的网站?
- 他们是从哪里来的(谷歌?推特?)
- 他们到底点了哪个按钮?
🛠️ 准备工作
- 打开你的 AI 编辑器: Cursor, Antigravity, 或者 Windsurf 都可以。
- 注册 PostHog: 去 posthog.com 注册个号(免费的,不用填信用卡)。
- 拿到 Key: 注册好后,复制它的 Project API Key 和 Host 地址。
🟢 第 1 步:让 AI 帮你装好 “监控探头”
我们先给网站装上最基础的监控,这样我就知道谁来过了。 复制下面这段话发送给 AI:
**Role**: Senior Frontend Engineer (资深前端)
**Objective**: 给我的 Next.js (App Router) 项目接入 PostHog 数据分析。
**Context**:
- 我用的是 Next.js App Router。
- 我想用 `posthog-js` 这个库。
- **隐私原则**: 不要一上来就记录用户的名字,默认只记录匿名数据(Privacy First)。
**Action Plan**:
1. **安装**: 帮我运行 `npm install posthog-js`。
2. **环境变量**: 提醒我在 `.env.local` 里填入 `NEXT_PUBLIC_POSTHOG_KEY` 和 `NEXT_PUBLIC_POSTHOG_HOST`。
3. **核心代码**:
- 创建 `lib/analytics/client.ts`:写一个单例模式的初始化函数。
- 创建 `components/analytics/AnalyticsProvider.tsx`:
- 这是一个 Client Component (`use client`)。
- 因为 Next.js 是单页应用,请务必用 `useEffect` 监听 `usePathname` 和 `useSearchParams`,这样用户切换页面时才能记录到 PV (Pageview)。
- 用 `Suspense` 包裹它,防止报错。
4. **最后**: 告诉我如何在 `app/layout.tsx` 引入这个 Provider。
🟡 第 2 步:看看谁点了你的按钮
光知道有人来还不够,最重要的是知道他们有没有点那个“购买”按钮,对吧? 这也是最赚钱的一步。
把这段话发给 AI(记得把“购买按钮”换成你自己想追踪的按钮名字):
**Role**: Product Engineer (产品工程师)
**Objective**: 我想追踪用户点击按钮的行为。
**Task**:
1. 请教我如何用 PostHog 的 `capture` 方法来记录一个事件。
2. 举个例子:我想追踪一个叫 `vote_button` (投票按钮) 的点击事件。
3. 请给我写一段代码,让我在点击按钮时,发送这样一个事件给 PostHog:
- Event Name: `clicked_vote`
- Properties: `{ item_id: '123', item_name: 'My Product' }`
4. 顺便帮我把 PostHog 的导入做成动态的 (Dynamic Import),这样加载速度更快。
✅ 第 3 步:见证奇迹的时刻
好了,代码写完了。现在来看看效果:
- 填好 Key: 确保你的
.env.local文件里已经填了刚才注册的 PostHog Key。 - 关掉拦截插件: 如果你装了 AdBlock 或 uBlock,先关一下,不然它会把 PostHog 拦截掉。
- 去后台看数据: 打开 PostHog 官网的后台,点击左侧的 Activity (活动) 或 Live Events。
- 点一点: 在你自己的网站上随便点几下跳转,在那边应该立马就能看到数据冒出来了!
搞定! 🎉 就这么简单。你现在拥有的数据分析能力,已经超过 90% 的普通网站了。