Google 代碼管理工具的預覽及偵錯模式可讓您在已導入容器程式碼的網站上,預覽目前這個容器草稿正式部署後的模樣,以便在容器發布之前測試相關設定。預覽網站會連結至 Tag Assistant,方便您查看哪些代碼已經觸發,以及觸發的順序為何。
啟用預覽及偵錯模式
如要為目前的工作區啟用預覽及偵錯模式,請按照下列步驟操作:
- 按一下工作區右上角的 [預覽]。
- 輸入您網站的網址。
- 在網址中加入額外的偵錯參數可能會導致部分網站或網頁損毀。在這種情況下,您可以取消勾選 [在網址中加入偵錯信號] 方塊。
- 按一下 [連結]。網站會在新視窗中開啟,並在右下角顯示「已連結」。
如果您已安裝 Tag Assistant Companion Chrome 擴充功能,網站將在新分頁中開啟,而不是新視窗。
- 點選返回 Tag Assistant 分頁,然後按一下 [繼續] 前往偵錯介面。
您也可以透過 Tag Assistant 啟用頁面預覽網站並進行偵錯。
如要預覽舊版容器,請按照下列步驟操作:
- 在工作區頂端導覽列中,按一下 [版本]。
- 找到所要的版本,按一下「更多動作」圖示 ,然後選取 [預覽]。
使用預覽及偵錯模式
啟用預覽及偵錯模式後,系統就會根據您輸入的網頁啟動新視窗。偵錯介面會列出代碼的啟動狀態和處理中的資料等相關詳情,但只會顯示在啟用了預覽模式的瀏覽器中;此外,除了共用使用者,一般網站訪客並不會看到這個視窗。
您可以在偵錯介面中查看代碼和觸發條件是否正確啟動,以及系統傳送給相應服務的資料。在您點進預覽網站的同時,偵錯介面會跟著更新代碼啟動狀態的資訊。因此,只要查閱這項資訊就能得知代碼是否順利啟動,以及哪些觸發條件能夠/不能夠觸發代碼。
頂端的導覽列會列出存取代碼、變數和資料層相關資訊的選項,左側導覽摘要列則會顯示事件清單。
- 代碼:按一下 [代碼] 可查看已觸發/未觸發的代碼。按一下個別代碼即可查看該代碼的屬性和相關觸發條件。在左欄中選取事件,即可在「代碼」分頁查看該事件的代碼狀態。
-
變數:「變數」分頁會顯示所選事件中變數的相關詳情,包括變數類型、傳回的資料類型和解析值。在左側導覽列中選取事件,即可查看事件啟動時的變數狀態。
- 資料層:「資料層」分頁會顯示所選事件發生後,推送至資料層的實際訊息物件,以及訊息交易完成後的資料層外觀。在左側導覽列中選取事件,即可查看事件觸發時的資料層狀態。
共用預覽及偵錯模式
啟用預覽及偵錯模式後,只有這個啟用了預覽及偵錯模式的瀏覽器才會顯示預覽容器設定和 Tag Assistant 偵錯介面。您可以使用自訂產生的網址,與他人共用這個預覽畫面。
如要與同事共用工作區設定的預覽畫面,請按照下列步驟操作:
- 按一下 Tag Assistant 偵錯介面頂端的「更多動作」圖示 ,然後選取 [共用]。
- 在「分享偵錯工作階段」對話方塊中,輸入您的目標網站網域及要偵錯的代碼。
- 從標示的方塊中複製系統產生的預覽網址。
- 將複製的預覽網址貼到電子郵件中,並傳送給同事。這個網址會將使用者帶往預覽模式中的網站,供其查看 Tag Assistant 偵錯介面。
您也可以從工作區共用目前或舊版容器,操作步驟如下:
- 在工作區頂端導覽列中,按一下 [版本]。
- 找出要共用的版本,按一下「更多動作」圖示 ,然後選取 [共用預覽畫面]。
- 在「共用預覽畫面」對話方塊中,輸入您的目標網站網域 (例如:https://example.com/)。
- 從標示的方塊中複製系統產生的預覽網址。
- 將複製的預覽網址貼到電子郵件中,並傳送給同事。這個網址會將使用者帶往預覽模式中的網站,供其查看 Tag Assistant 偵錯介面。
離開預覽及偵錯模式
如要離開預覽模式並停止偵錯,您可以採取下列其中一種做法:
- 在預覽網站的浮動視窗中,按一下 [取消連結]。
- 在 Tag Assistant 偵錯介面中,按一下左上角的 [X]。
- 在 Tag Assistant 啟用頁面中,按一下 [停止偵錯]。