偵錯

本指南將說明如何使用 analytics.js 程式庫的偵錯版本,確保導入項目運作正常。

analytics.js 程式庫的偵錯版本

Google Analytics (分析) 提供 analytics.js 程式庫的偵錯版本,當 JavaScript 控制台執行時,該程式庫會記錄詳細訊息。這些訊息包括成功執行的指令,以及警告和錯誤訊息,讓您得知代碼設定錯誤。此外,這份報表也會詳細列出傳送到 Google Analytics (分析) 的每筆命中,方便您確切掌握正在擷取哪些資料。

如要啟用 analytics.js 的偵錯版本,請將 JavaScript 代碼中的網址從 https://www.google-analytics.com/analytics.js 變更為 https://www.google-analytics.com/analytics_debug.js

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

在不傳送命中的情況下測試導入

偵錯版本的 analytics.js 會傳送資料至 Google Analytics (分析),就像非偵錯版本一樣。如此一來,您就可以造訪執行 analytics.js 程式碼的網站並檢查執行情況,而不會對資料的擷取方式造成乾擾。

假如您不想在某些情況下 (例如開發或測試環境) 將資料傳送至 Google Analytics (分析),可以停用 sendHitTask 工作,這樣系統就不會傳送任何項目。

在 localhost 執行時,下列程式碼會避免任何命中傳送至 Google Analytics (分析):

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');

if (location.hostname == 'localhost') {
  ga('set', 'sendHitTask', null);
}

ga('send', 'pageview');

Trace 偵錯

啟用追蹤記錄偵錯功能,即可將更多詳細資訊輸出到控制台。

如要啟用追蹤記錄偵錯功能,請按照上述方式載入 analytics.js 的偵錯版本,然後在呼叫 ga() 指令佇列前新增下列程式碼。

window.ga_debug = {trace: true};

啟用追蹤記錄偵錯功能的完整標記如下:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');

window.ga_debug = {trace: true};
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Google Analytics Debugger Chrome 擴充功能

Google Analytics (分析) 也提供 Chrome 擴充功能,讓您不必變更代碼,就能啟用 analytics.js 偵錯版本。透過這種方式,您可以對自己的網站進行偵錯,還可以瞭解其他網站如何使用 analytics.js 導入 Google Analytics (分析)。

Google Tag Assistant

Google Tag Assistant 是一項 Chrome 擴充功能,可協助您驗證網站上的代碼及排解常見問題。它是一個理想的工具,可讓您在本機環境中對 analytics.js 實作進行偵錯及測試,確保一切都正確,然後再將程式碼部署至實際工作環境。

Tag Assistant 的運作方式會記錄一般的使用者流程。這個工具會收集您傳送的所有命中、檢查這些命中是否有問題,並提供完整的互動報表。如果系統偵測到任何問題或有待改善的地方,就會通知你。

如要瞭解詳情,請前往說明中心,並參閱「關於 Tag Assistant」和「關於 Tag Assistant Recordings」一文。您也可以觀看這部示範影片,瞭解如何運用 Tag Assistant 找出錯誤,並檢查跨網域評估等進階導入是否有效。