相信大家都對 GTM 的容器預覽及偵錯功能相當熟悉,但最近官方做了改版,剛開始用起來整個很不順手,但用個幾次後慢慢感覺有比較好一些,因此也整理給大家參考,希望能幫助需要的人盡快重新熟悉改版後的介面與操作方式。
一、改版後的介面長什麼樣子
相較於過去會出現在網站下面的一個工作區塊面板,現在 GTM 更新後會有一個完整獨立的偵錯介面囉!
二、更新後的預覽與偵錯區塊該如何啟用
1.輸入網站網址連結
一樣先按右上角的預覽模式,按下去後會跳出一個要連結網站的視窗,輸入你要連結的網站即可。

2.顯示工具已經與網站連結
接下來就會顯示已經與你的網站連結,你就可以看到擁有一個獨立的預覽及偵錯頁面囉!
三、改版後的功能上有哪些差別
1.擁有一個獨立的預覽偵錯視窗
就像前面提及,現在不用擠在同一個頁面底下偵錯(特別是偵錯行動裝置orz),可以擁有獨立視窗,反過來說未來在檢查及偵錯代碼的時候就得要兩邊切換,原先覺得不是很習慣,但用一用我反而想到其實就跟 Facebook 的測試事件工具一樣,用久了也覺得還不錯。
2. 瀏覽不同頁面時會有歷史紀錄
在右側的 Summary 裡可以看到進到不同頁面都會有產生事件的歷史紀錄
3.彈出式視窗可以偵錯
雖然還沒實際嘗試過,但依照邏輯上來說,在新的介面裡是可以針對彈出式視窗去偵錯的,如果有人有嘗試過歡迎在下方跟我分享!
4.非新開視窗的頁面可偵錯
過去因為預覽偵錯區塊是在網站下面,也就是同一頁裡,所以當網站的連結沒有寫另開視窗的代碼進去的話(像是在原始碼會看到_blank之類的),你在電腦上偵錯就沒法使用另開新視窗的方式來確定代碼是否被觸發,但現在因為是獨立偵錯視窗,這個問題就被解決了,相信如果常在使用 GTM 的行銷人應該會對這功能蠻有感
5.其他功能更新
上面只提了幾個大家可能比較有感的項目,其他的歡迎參考 Simo 寫得很詳細的這篇部落格
以上就是這次這次容器預覽及偵錯產品更新分享,如果有其他有趣的想法或內容也歡迎留言給我,我們下篇文章見:-)