你是否遇過下列困擾？
「訪客說按鈕點不動，但我不知道問題出在哪裡！」
「網站設定出錯，但我得等到有人客訴才發現！」
「網站發生重大錯誤，卻沒辦法用GA4追蹤問題源頭？」
別擔心！只要3步，就能讓GA4自動記錄這些錯誤訊息，讓你第一時間發現問題！即使是新手，只要跟著懶萌編一起懶懶地做，就能事半功倍完成設定。
步驟 1：開啟GTM的變數
目的： 讓 GTM 偵測網站錯誤，並記錄錯誤的「內容」、「發生的網址」和「哪一行有問題」。
- 進入 Google Tag Manager (GTM) → 點開 「變數」
- 點擊 「設定」，開啟 內建變數
- 在「錯誤」類別中，開啟這三個選項：
- javascript_error Message（錯誤訊息）：顯示發生了什麼錯誤
- javascript_error URL（錯誤發生的網址）：告訴你錯誤在哪個網頁發生
- javascript_error Line（錯誤發生的行數）：錯誤發生在程式碼的第幾行
為什麼要開這些變數？
如果GTM是一台測速照相機，這些變數就類似「車牌號碼」、「速度」，讓網站發生錯誤時，能留意並記錄這些資訊。
步驟 2：設定GTM的觸發條件
目的： 告訴 GTM 「當發生錯誤時，記錄下來」。
- 在 GTM 左側選單 找到「觸發條件」，點擊「新增」
- 選擇「JavaScript 錯誤」 作為觸發條件
- 設定觸發範圍：
- 所有 JavaScript 錯誤都追蹤 → 適合一般網站
- 只追蹤特定錯誤（例如特定按鈕無法點擊）→ 適合鎖定特定問題，例如測試某個新上線的功能
為什麼要設定觸發條件？
上節提到，GTM就像一台測速照相機，而觸發條件就類似「拍照條件」，讓時速大於特定的數值被記錄下來。
步驟 3：設定 GA4 事件，記錄錯誤資訊
目的： 讓 GA4 紀錄每一次的錯誤，並顯示錯誤發生源頭、錯誤訊息。
- 進入 GTM「代碼」設定
- 新增一個 GA4 事件
- 事件名稱：可以自己命名，這裡用
javascript_error當示範 - 事件參數：
- error_url → 設定為{{error_url}}，用來記錄錯誤發生的網址
- error_message → 設定為{{error_message}}，用來記錄錯誤內容
- 事件名稱：可以自己命名，這裡用
檢查 GA4 追蹤是否成功
完成 GTM 設定後，回到 Google Analytics (GA4) 檢查數據 ✅
你可能會問，我網站一切正常，要怎麼測試錯誤事件追蹤？
答案是：我們可以用10秒手動創造錯誤！
- 進入網頁，用F12進入開發者模式，到console輸入以下
setTimeout(function() {
throw new javascript_error("測試 GA4 JavaScript 錯誤");
}, 1000);
- 進入 GA4
- 左側選單 → 「參與」 → 「事件」
- 確認「javascript_error」事件是否有數據 📊
常見問題：如果數據沒出現？
等 24 小時後再看，或用 GA4 的即時報表、Debug模式查看。
如何在 GA4 設定「自訂維度」？
為了方便在報表中查看，得要在GA4自訂錯誤事件的維度，設定如下：
- 進入 GA4 管理介面
- 左下角「管理」 → 「自訂定義」
- 點擊 「建立自訂維度」
- 設定
- 維度名稱：
error_message - 範圍：
事件 - 事件參數：
error_message（⚠️ 這個名稱要和 GTM 傳遞給 GA4 的參數名稱一致）
- 點擊 「儲存」
- 重複步驟 3-5，新增
error_url- 維度名稱：
error_url - 範圍：
事件 - 事件參數：
error_url
- 維度名稱：
- 點擊 「儲存」
用 Looker Studio 打造錯誤監測儀表板
目的：用Looker Studio建立視覺化報表，即時追蹤網站錯誤資訊，幫助你快速找出錯誤趨勢、頻率最高的錯誤，以及錯誤發生在哪些網頁上。
步驟 1：連接 Looker Studio 與 GA4
- 打開 Looker Studio
- 點選 「建立報表」
- 點擊 「新增數據來源」
- 在搜尋框輸入 「Google Analytics」
- 選擇 你的 GA4 帳戶
- 選擇你要分析的 GA4 媒體資源（Property）
- 按下 「連接」
- 確認 GA4 的數據可以讀取，點選 「新增到報表」
小提醒
通常 GA4 可能需要幾小時到 24 小時來顯示新事件。
步驟 2：選擇「javascript_error」事件
現在，我們要篩選 JavaScript 錯誤 相關的數據。
- 在 Looker Studio 新增「表格」或「圖表」（如長條圖、折線圖）
- 在「維度」中選擇 「事件名稱 」
- 在「指標」中選擇 「事件計數」
- 篩選條件（重要！）
- 點擊「篩選器」 → 新增篩選條件
- 條件：
- 事件名稱 包含「javascript_error」
- 按「應用」
為什麼要篩選？
確保我們只會看到網站錯誤的數據。
步驟 3：設定圖表顯示錯誤趨勢
你還可以讓Looker Studio自動生成錯誤趨勢圖，讓你一眼就看出錯誤數量上升或下降 ：
- 在 Looker Studio 點選「新增圖表」 → 選擇 折線圖
- 維度 (X 軸)：
- 選擇「事件時間」
- 格式改為 日期 (Date)
- 指標 (Y 軸)：
- 選擇「事件計數」
- 篩選條件：
- 事件名稱 包含「javascript_error」
實際應用：
如果某日錯誤突然暴增，你就能馬上發現，並查明發生問題的源頭！
步驟 4：分析哪些錯誤最常發生
接下來，我們來分析 哪種 JavaScript 錯誤最常發生，幫助你找出 影響最多用戶的錯誤類型
- 點擊「新增圖表」 → 選擇 表格
- 維度 ：
- 選擇「日期 」
- 細分維度：選擇「error_message」
- 指標 ：
- 選擇「事件計數 」
- 排序方式：
- 依據「事件計數」從 大到小排列
這樣做的效果？
你可以看到最常發生的錯誤類型，更知道該優先修正哪類型的錯誤 💡
步驟 5：分析哪些網頁錯誤最多
除了分析錯誤類型，我們還可以找出哪個網頁的錯誤最多，確保網站的關鍵頁面沒有問題
- 點擊「新增圖表」 → 選擇 表格
- 維度：
- 選擇「日期」
- 選擇「網頁路徑」（錯誤發生的網頁）
- 指標：
- 選擇「事件計數」
- 排序方式：
- 依據「事件計數」從 大到小排列
實際案例分享：
例如發現錯誤都集中在「結帳頁面」，你就知道應該趕快修正這個頁面的Bug。
步驟 6：設計更清楚的錯誤儀表板
為了讓錯誤監測報表更清楚，你可以 增加以下優化：
- 新增「日期篩選器」 → 可以選擇特定日期範圍來分析錯誤數據
- 設定「異常警報」 → 使用 Looker Studio 內建「條件格式」，當某個錯誤超過一定數量時，標記為紅色
- 新增「錯誤修復進度」表格 → 和工程師協作，串聯GA4、Google sheet，一鍵追蹤工程師的錯誤修復進度
這樣做的效果：
便於跨部門與團隊協作，讓團隊更清楚網站的健康狀態！
類似的實踐可參考：跨部門必備 | 用GTM追蹤Core Web Vitals並呈現於Looker Studio
總結
如果各位懶懶們照著以上步驟，你的 Looker Studio 儀表板應該會包含：
- 錯誤趨勢折線圖（錯誤數量變化）
- 最常發生的錯誤類型長條圖（錯誤訊息排名）
- 錯誤最多的網頁表格（錯誤發生在哪些頁面）
- 異常監測報告（自動警報）
這樣一來，你就能：
- 即時監測錯誤，不需要等到用戶抱怨
- 快速找出哪種錯誤最嚴重，優先修正
- 分析哪些網頁出問題最多，避免影響轉換率
希望大家會喜歡這次的教學，如果你想看更多數位行銷或自動化工作流程，歡迎追蹤懶萌編！我會繼續榨乾懶的本質，創造更多數位行銷的自動化流程。
