GTM 測試功能和瀏覽即時的 GA 紀錄

前言

上回我們說到,GTM 串接 GA 後再用 CDN 綁到底自己專案上,本次則來介紹如何測試 GTM 是否能正確使用,以及如何觀察即時更新 GA 紀錄。

開啟 GTM 測試功能

先介紹一下GTM 測試功能,進入 GTM 首頁後,右上角會有預覽、以及提交兩個按鈕,如果想要進入測試功能,就點擊預覽。


點擊預覽後會開啟新的頁面叫做 Google Tag Assistant ,這時我們要輸入先前介紹的,有該 GTM CDN 的網址,這邊不管輸入的是 local 端網址、還是實際的線上網址,只有網址有設定 GTM 的CDN 就沒有問題了,這邊我使用本地的 http://127.0.0.1:5500/index.html 網址做測試,網址輸入後就按下 Connect 按鈕拉。


按下 Connect 按鈕後會馬上跳出,剛剛輸入網址的頁面,並且這頁面網址最後方帶有 ?gtm_debug=x,接著大約等個 10 秒後, Tag Assistant 頁面會跳出 Connected 的視窗,這就代表你的 GTM 有成功設置囉!


部分 GTM 內建事件介紹

GTM 本身預設會帶有監測部分動作的事件,我們接下來可以在剛剛 GTM 開啟的頁面中,做一些動作。(帶有 ?gtm_debug=X 的那個頁面)
會發現 Tag Assistant 頁面的左邊欄位會去記錄部分事件,比如: Scroll Depth 就是使用者把網頁滑到底、而 Link Click 則是在使用者在網頁中點擊任意連結。


觀看 GA 即時事件

而這些紀錄也都會存到和 GTM 綁定的 GA 上,這時我們到 GA 的即時、DebugView 頁面也都會看到這些紀錄。


值得一提的是, GA 上的即時、DebugView 頁面,只會顯示最近 30 分鐘的網頁事件,超過 30 分鐘就看不到了。
而 GA 其他的瀏覽方式,如報表、首頁都會需要等待一天,GA 才會把資料做更新,所以在要 Debug GTM 事件的狀況下,工程師一般都會觀察 即時、DebugView 頁面。
下面一篇會開始說明,如何新增 GTM 的內建事件 。