第二章：洞察你的使用者行為 - 埋設 Google Analytics 4 (GA4) 數據追蹤

在經營 SaaS 平台或任何知識付費網站時，有一句商業名言： 「你無法優化的東西，就是你沒有在追蹤的東西 (You can't optimize what you don't measure)。」

當你的 Vibe Tutor 網站上線後，如果你不知道「每天有多少人來逛？」、「大家最感興趣的是哪一堂課程？」、「為什麼有高達 80% 的人在看到結帳頁面時放棄購買跳出？」，那你就等於是在蒙著眼睛做生意。你不知道你的行銷預算是不是打水漂，也不知道你辛苦寫的課程到底有沒有人看。

為了解開這個迷霧，我們必須為網站裝上「眼睛」—— Google Analytics 4 (簡稱 GA4)。它是全球最普及、也是最權威的免費網站數據分析工具。這章我們將教你如何用最現代化的方式，將 GA4 完美埋進你的 Next.js 網站裡。

🎯 本章目標

申請 Google Analytics 帳號與取得追蹤碼 (Measurement ID)。
認識傳統 React 埋設 GA 的痛點與解決方案。
在 Next.js App Router 中使用官方的 @next/third-parties 套件，在不拖慢網頁速度的前提下安全載入 GA4。

📊 第一步：取得 GA4 追蹤碼 (Measurement ID)

要讓 Google 幫你追蹤網站，你必須先去 Google 那邊「開個戶頭」。

📝 [給新手的操作指南]：

前往 Google Analytics 官網，使用你的 Google 帳號登入。

點擊「開始評估」或「建立帳戶」。帳戶名稱可以填寫你的公司名。

建立一個「資源 (Property)」，資源名稱可以填寫你的網站名 (例如 Vibe Tutor 官網)。請記得將報表時區設定為「台灣時間」，這關乎到你未來對帳的準確度。

平台選擇「網站 (Web)」，並輸入你的正式網址 (例如 vibetutor.tw)。

建立完成後，在「網頁資料串流 (Web Stream)」的詳細資料畫面中，你會在右上角看到一組以 G- 開頭的字串，這就是所謂的「評估 ID (Measurement ID)」，例如 G-ABCDEF1234。

這組 ID 就像是你的網站身分證。請複製它，並寫進你專案的 .env.local 環境變數檔裡：

# 記得，這個變數必須加上 NEXT_PUBLIC_ 開頭，因為它必須在前端瀏覽器執行
NEXT_PUBLIC_GA_ID="G-ABCDEF1234"

未來部署到 Vercel 時，也千萬別忘了把這組變數貼到 Vercel 的後台！

🧩 第二步：使用 Next.js 官方套件極速載入

在以前的 React 時代 (例如 Create React App)，要在網站裡埋 GA4 是一件很痛苦的事。你必須自己去 Google 複製那一大段醜陋的 <script> 標籤，然後用 dangerouslySetInnerHTML 這種危險的語法硬塞進 index.html 裡面。更糟的是，這段龐大的 Google 腳本會在使用者一打開網頁時就搶佔頻寬，導致你的網站載入速度變慢，SEO 分數被 Google 自己給扣分！

為了解決這個荒謬的問題，Next.js 團隊推出了一個極度優雅的官方解決方案。

安裝官方的第三方載入優化套件：在終端機輸入以下指令安裝套件：

npm install @next/third-parties

讓 Vibe Coder 幫你寫進全域設定：接下來，我們要把 GA4 埋入全站最核心的地方：app/layout.tsx (全域佈局檔)。打開 Cursor，你可以這樣詠唱：

🔥【Vibe Prompt 實戰詠唱】 我想要在目前的 Next.js App Router 專案中加入 Google Analytics 追蹤碼。 請幫我在 app/layout.tsx 中，匯入 @next/third-parties/google 套件裡面的 <GoogleAnalytics> 元件。 請將該元件放置在 <body> 標籤內部，並正確綁定我在環境變數裡設定的 NEXT_PUBLIC_GA_ID。 如果環境變數沒有值 (例如在本地開發時)，請不要報錯，可以讓它安全地 fail 或顯示一個空元件。

AI 會產出這段極度乾淨的程式碼：

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="zh-TW">
      <body>
        {children}
        
        {/* Next.js 魔法：它會自動判斷這段腳本，在網頁最重要內容都載入完畢後，
            才以最低優先級 (非同步) 去背景下載 GA 腳本，完全不影響網頁速度！ */}
        {process.env.NEXT_PUBLIC_GA_ID && (
          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID} />
        )}
      </body>
    </html>
  )
}

📈 第三步：查收你的商業情報報表

將程式碼推上 Vercel 部署上線後，你自己用手機打開網站隨意點擊幾下。接著，回到 GA4 的後台，點擊左側的「報表」➡️「即時 (Realtime)」。

如果你設定正確，你會興奮地看到畫面上出現了「活躍使用者：1」，並且地圖上台灣的位置會亮起一個藍點。這代表你的網站神經系統已經正式連線了！

💼 [商業應用場景] 你能用 GA4 抓出什麼內鬼？

埋好 GA4 後過了一個月，你可以從報表中挖出極具商業價值的洞察：

找出黃金流量密碼：「為什麼『CrewAI 教學』這篇文章的瀏覽量是其他文章的 10 倍？」這代表市場對這個主題極度飢渴。你下個月就應該主打這個主題的進階付費課程，保證大賣。
抓出結帳漏斗的破口：「有 1,000 個人點進了『VIP 方案定價頁』，但最後只有 10 個人付款成功？」這代表你的結帳漏斗出了嚴重的問題。可能是結帳按鈕在手機上會跑版按不到，也可能是定價太高需要做限時促銷。

這就是數據驅動 (Data-Driven) 營運的威力。恭喜你，你現在不再是在網路上盲人摸象，你擁有了一套企業級的上帝視角監視器。下一章，我們將來探討當這群訪客真的掏錢時，我們該如何穩妥地把錢收進口袋！