正在準備工作環境...
除錯與驗證
追蹤碼埋好了，但你怎麼知道它真的有在運作？數據「不對」的時候，問題出在哪裡？
這是追蹤工作中最容易被忽略、卻最重要的一環：驗證你埋的東西確實正確。
除錯的三大工具
| 工具 | 用途 | 難度 |
|---|---|---|
| console.log | 在程式碼中印出 dataLayer 內容，即時驗證 | 最簡單 |
| GTM Preview Mode | 在 GTM 後台模擬觸發條件，看哪些代碼被觸發 | 中等 |
| GA4 DebugView | 在 GA4 後台即時看到收到的事件 | 中等 |
方法一：用 console.log 驗證 dataLayer
最基本也最實用的方法——直接印出 dataLayer 的內容：
更進階的驗證——逐一檢查關鍵欄位是否存在：
方法二：GTM Preview Mode（預覽模式）
GTM Preview Mode 讓你在不發布的情況下，測試 GTM 的設定是否正確。
操作步驟：
- 登入 GTM 後台
- 點右上角的「預覽」按鈕
- 輸入你要測試的網站網址
- GTM 會在新分頁開啟你的網站，並附帶一個除錯面板
在預覽面板中你可以看到：
| 面板區域 | 顯示內容 |
|---|---|
| Summary（摘要） | 所有觸發的事件列表，按時間順序 |
| Tags Fired（已觸發代碼） | 哪些追蹤代碼被觸發了 |
| Tags Not Fired（未觸發代碼） | 哪些代碼沒被觸發（通常是觸發條件不符） |
| Data Layer | 每個事件的 dataLayer 內容 |
| Variables（變數） | 所有 GTM 變數的當前值 |
常見問題排查：
| 現象 | 可能原因 | 解法 |
|---|---|---|
| 代碼沒被觸發 | 觸發條件的事件名稱打錯 | 檢查 dataLayer.push 的 event 值是否和觸發條件完全一致 |
| 代碼觸發了但 GA4 沒收到 | GA4 Measurement ID 填錯 | 確認 G-XXXXXXX 格式是否正確 |
| 電商資料沒出現 | 沒勾選「傳送電子商務資料」 | 在 GA4 事件代碼中勾選此選項 |
方法三：GA4 DebugView
DebugView 讓你在 GA4 後台即時看到收到的事件——不用等 24-48 小時。
啟用 DebugView 的方式：
- 方法 A（GTM）： 使用 GTM Preview Mode 時，DebugView 會自動啟用
- 方法 B（Chrome 擴充功能）： 安裝「GA Debugger」擴充功能後開啟
在 DebugView 中你可以看到：
- 登入 GA4 → 左側選單 →「管理」→「DebugView」
- 選擇正在除錯的裝置
- 即時看到每一個收到的事件和它的參數
| 欄位 | 說明 |
|---|---|
| 事件名稱 | 例如 purchase、add_to_cart |
| 事件參數 | 點開事件可以看到所有參數值 |
| 使用者屬性 | 設定的使用者維度 |
| 時間軸 | 事件發生的順序和時間 |
常見錯誤與解法
除錯檢查清單
每次埋完追蹤碼，依照這份清單逐一確認：
| # | 檢查項目 | 驗證方式 |
|---|---|---|
| 1 | dataLayer.push 有被執行 | console.log(dataLayer) 確認有資料 |
| 2 | event 名稱正確（全小寫、底線分隔） | 對照 GTM 觸發條件 |
| 3 | ecommerce 物件結構正確 | 檢查 items 是陣列、currency 存在 |
| 4 | value 計算正確 | 手動算一次對照 |
| 5 | transaction_id 唯一 | 不同訂單不能重複 |
| 6 | GTM Preview Mode 顯示代碼已觸發 | Tags Fired 區域有你的代碼 |
| 7 | GA4 DebugView 收到事件 | 事件出現在時間軸上 |
| 8 | GA4 報表次日出現資料 | 等 24-48 小時後確認 |
本課重點
- 埋追蹤碼只完成了一半，驗證正確才算完成
- console.log 是最快的驗證方式，直接印出 dataLayer 檢查
- GTM Preview Mode 可以在不發布的情況下測試觸發條件
- GA4 DebugView 可以即時看到 GA4 收到的事件
- 最常見的錯誤：忘記 currency、items 不是陣列、事件名稱大小寫不一致
AI 協作：學了這個，跟 AI 怎麼配合？
除錯是最適合和 AI 協作的環節——把錯誤訊息或 dataLayer 的內容貼給 AI，它能快速幫你找出問題。
你的人類優勢：
- 你能操作 GTM Preview Mode 和 GA4 DebugView 看到實際畫面
- 你能判斷「數據看起來對不對」（例如營收數字是否合理）
可以這樣跟 AI 說：
我的 GA4 purchase 事件有觸發，但營收報表顯示 0 元。這是我的 dataLayer.push 程式碼：（貼上程式碼）。請幫我檢查哪裡有問題。
練習題
互動示範
DEMO 1可以修改程式碼試玩
DEMO 2可以修改程式碼試玩
DEMO 3可以修改程式碼試玩
DEMO 4可以修改程式碼試玩
DEMO 5可以修改程式碼試玩
挑戰任務
Task 1
請初始化 dataLayer 並 push 一筆 purchase 事件（transaction_id: "T-100", value: 800, currency: "TWD", items 含一個 item_name 為 "襪子"）。然後檢查 ecommerce.currency 是否存在，存在印出 "OK"，不存在印出 "FAIL"。
Task 2
請宣告一個物件 items = { item_name: "T恤" }（故意寫成物件而非陣列），用 Array.isArray(items) 判斷，如果不是陣列就印出 "錯誤：items 必須是陣列"。
← BackTake the Exam →