歡迎！ 別被「數據分析」這四個字嚇到了。這一章不需要你寫一行代碼。
你只需要會按 Ctrl + C (複製) 和 Ctrl + V (貼上)，剩下的交給 AI。
只需 5 分鐘，你就能清楚地看到：
- 每天有多少人來看你的網站？
- 他們是從哪裡來的（Google？Twitter？）
- 他們到底點了哪個按鈕？
🛠️ 準備工作
- 打開你的 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% 的普通網站了。