有問題可以在文章底部留言

Google Tag Manager 預覽模式指南——Tag Assistant

Google Tag Manager Haran 4年前 (2022-03-23) 7252次瀏覽 1條留言

Google Tag Manager(GTM)完成設定後,一定要進行預覽與除錯,才能確認標籤是否有正確觸發、資料是否正確送出。

GTM內建了預覽除錯工具Google Tag Assistant(通常簡稱 Tag Assistant),本節將說明如何使用Tag Assistant進行除錯。

預覽調試模式為什麼改變

因為舊版的預覽模式需要googletagmanager.com設定第三方cookie,如果不能设定第三方Cookie,預覽模式無法開啟。 

隨著瀏覽器行業在逐步禁止第三方cookie的使用,所以舊版的預覽模式將變得不能使用,新版的預覽模式是為了解決這個問題,改用採用第一方Cookie或localstorage。

 

啟用預覽調試模式

步驟一:開啟預覽模式

在GTM中點擊右上角的「預覽」:

Google Tag Manager 預覽模式指南——Tag Assistant

步驟二:輸入測試網址

點擊後會開啟一個新分頁,進入https://tagassistant.google.com,系統會跳出視窗,請你輸入要測試的網站URL:

Google Tag Manager 預覽模式指南——Tag Assistant

下方有一個選項:

  • Include debug signal in the URL
    • 勾選後:網址會加上 gtm_debug=x,明確標示為除錯狀態
    • 未勾選:網址不會加參數,但仍可進入除錯模式

設定完成後,點擊 Connect。

步驟三:確認是否成功進入除錯模式

若你在測試頁面或 Tag Assistant 介面看到「Connected」,就表示已成功進入預覽除錯狀態

Google Tag Manager 預覽模式指南——Tag Assistant

如果調試頁面不能正常打開,請看 預覽連結失敗的幾個原因

 

GTM 預覽模式介面說明

GTM 預覽介面實際上就是Tag Assistant 頁面,主要可分為四個區塊:

Google Tag Manager 預覽模式指南——Tag Assistant

  1. 調試狀態:顯示是否已成功連線,例如Connected,表示連結狀態,可以進行調試。
  2. 容器切換(Containers):列出網站上所有已經安裝的容器,如GTM、GA4的,可切換不同容器進行檢視。
  3. 事件列表:顯示使用者在網站上的所有事件與行為,並依頁面載入順序分組。
  4. 標籤信息 :可以查看對應事件的標籤觸發情況:
    • Tags(代碼): 查看有哪些代碼在這個事件有觸發,沒有觸發。
    • Variables(變數): 查看選擇的事件有哪些變數及其值是什麼。
    • Data Layer(資料層): 查看選擇的事件是否有dataLayer,已經資訊有哪些,
    • Errors (錯誤): 如果選擇的事件有錯誤,可查看錯誤訊息。

事件列表

事件會依照頁面載入與使用者操作的順序顯示,並以不同頁面分組,如下所示:

Google Tag Manager 預覽模式指南——Tag Assistant

分別表示頁面1和頁面2。有些事件的右側有個圖標Google Tag Manager 預覽模式指南——Tag Assistant,這個表示這個事件有自動發出的內置觸發條件,GTM提供很多的內置觸發器,如表單提交、計時器、歷史更改、 Javascript錯誤。

如果你比較細心,可能會發現每次加載頁面時,列表都顯示五個事件: Consent Initialization、Initialization、Container Loaded、DOM Ready和Window Loaded,它們是就載入的順序觸發,優先級和作用如下:

  1. Consent Initialization(同意聲明初始化):確保同意設定在其他標籤前先執行(搭配Consent Mode使用)
  2. Initialization(初始化):幾乎所有標籤可用的最早時機,但仍晚於 Consent Initialization
  3. Container Loaded(網頁瀏覽):瀏覽器開始載入頁面時觸發
  4. DOM Ready:(DOM 就):HTML 與 DOM 結構完成後觸發(不含圖片)
  5. Window Loaded(視窗已載入):所有資源(圖片、JS、CSS)完全載入後觸發

 

 

標籤信息

點擊事件列表中的任一事件,即可查看該事件的標籤狀態。

注意:調試過程中,先選事件 → 再看標籤資訊

 

Tags(代碼)

查看有哪些代碼在這個事件有觸發,沒有觸發。

  • Tags Fired:代碼觸發
  • Tags Not Fired:代碼沒觸發

Google Tag Manager 預覽模式指南——Tag Assistant

還可以進一步點擊Tags Fired已經觸發代碼的配置,看其代碼屬性、觸發條件、阻塞觸發條件:

Google Tag Manager 預覽模式指南——Tag Assistant

代碼屬性裡,你可以看到其具體的配置,注意其右上角,如果你選擇Names,顯示的是名稱,如果選擇的Values,顯示的具體的值,它默認顯示的Name,調試過程中建議顯示Values,有助於判斷追蹤是會否準確:

Google Tag Manager 預覽模式指南——Tag Assistant

觸發條件:可以看觸發的條件。

阻塞觸發條件:可以看觸發的條件,在一個代碼有多個觸發條件的時候,這裡可能就會顯示。

 

Variables(變數)

查看選擇的事件有哪些變數及其值是什麼。

Google Tag Manager 預覽模式指南——Tag Assistant

這些變數都是可以在代碼和觸發條件裡使用的。

Data Layer(資料層)

查看選擇的事件是否有dataLayer,已經資訊有哪些,所有的資料層的變數都可以通過GTM裡的數據層變數去獲取。

通常在電商追綜用的比較多:Google Analytics 4 :Google Tag Manager電商设定指南

 

Errors (錯誤)

若該事件有發生錯誤,會顯示相關錯誤訊息。實務上較少使用,但在除錯複雜設定時仍有幫助。

分享GTM預覽模式

有多種方式可以分享GTM預覽模式。

方法一:從GTM版本分享

在GTM中點擊版本,然後找到要分享的版本的,點擊器右側的三個點,就可以看到“分享預覽”:

Google Tag Manager 預覽模式指南——Tag Assistant

方法二:從Tag Assistant分享

如果你正在調試,可以在https://tagassistant.google.com/的右上角三個點:

Google Tag Manager 預覽模式指南——Tag Assistant

點擊後就可以獲取分享鏈接:Google Tag Manager 預覽模式指南——Tag Assistant

方法三:Tag Assistant調試列表頁

Google Tag Manager 預覽模式指南——Tag Assistant

 

 

退出GTM預覽模式

有兩種方式可以退出GTM預覽模式:

一種是在調試頁面點擊Finish:

Google Tag Manager 預覽模式指南——Tag Assistant

一種是在https://tagassistant.google.com/裡的調試狀態點擊如下位置:

Google Tag Manager 預覽模式指南——Tag Assistant

 

 

GTM預覽除錯的正確思路

  • 進入預覽模式
  • 在網站上實際操作要追蹤的行為
  • 回到 Tag Assistant
  • 在事件列表中找到對應事件
  • 檢 Tags Fired是否有正確標籤
  • 若未觸發:
    • 到Tags Not Fired
    • 檢查觸發條件
    • 對照Variables的實際值進行調整
  • 重新預覽再測試

 

 

預覽連結失敗的幾個原因

若無法成功連線,請檢查以下項目請嘗試以下一些解決方案:

  • 你輸入的URL在頁面上可能沒有全局站點標記。在你希望安裝全局網站代碼的網站上嘗試不同的URL。
  • 添加到頁面 URL 的調試參數可能會破壞頁面行為。要解決此問題,請編輯您為調試模式輸入的域,並取消選中標有“在 URL 中包含調試信號”的複選框。
  • 全局站點代碼腳本在 Tag Assistant 嘗試連接到頁面之後加載。單擊“重試”以重新連接。
  • 您的網頁是AMP網頁。Tag Assistant目前不支持AMP。
  • 該頁面在iframe中加載全局網站代碼。只有在同時安裝了Tag Assistant Companion chrome 擴展時,才能調試 iframe 加載的代碼配置。
  • 多個瀏覽器重定向可能會阻止加載調試窗口。
  • 您的網絡瀏覽器中安裝的廣告攔截器可能會阻止全局網站代碼運行。為您需要測試的頁面禁用廣告攔截器。
  • 如果你安裝了Tag Assistant Companion,請確保該擴展程序有權讀取和更改您需要測試的頁面的網站數據。
  • 同意管理工具可能會阻止Google標籤。配置您使用的任何許可管理工具,以允許與Google 的許可 API進行交互。

如果您在操作上仍有任何疑問,歡迎留言交流,或加入:Google Analytics 4交流社團發問
Like (1)
發佈我的留言
取消留言
表情 贴图 加粗 删除线 居中 斜体

Hi,*为發佈留言必須填寫。

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址
(1)个小伙伴在留言
  1. 2022/8/3 謝
    何先生2022-08-03 09:17 回覆 Windows 10 | Chrome 103.0.0.0