「GTM」用元素可見度做表單提交跟蹤

更新時間：2024年11月5號

這一篇介紹如何用Google Tag Manager裡的元素可見度做事件追蹤。

認識元素可見度

Element Visibility，叫元素可見度，可以對指定元素在網路瀏覽器的檢視點中變得「可見」時就觸發，如某個圖片（元素）展示時就觸發。

示例演示

假設我現在要對 https://www.haranhuang.com/contact-form-7.html 裡的表單提交做追蹤：

表單提交成功會顯示（如果你的沒有類似顯示，這種方法就不適用）：

查看頁面程式

將滑鼠移動需要跟蹤位置，然後查看頁面元素：

有class是wpcf7-response-output，可以用CSS選取器定位。

設定觸發條件

在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」，命名為“表單提交示範”，然後做如下設定：

元素選擇器裡之所以設定為div.wpcf7-response-output，是因為這個class是在div裡，具體看源碼。

設定代碼

在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“表單提交”，做如下設定：

這樣就可以實現事件跟蹤。

GTM 中預覽調試

接下來就是調試了，在GTM中點擊右上角的“預覽”進入調試狀態，如果你還不知道怎麼調試，請看：新版Google Tag Manager 預覽模式指南——Tag Assistant 

調試頁面打開後，返回到Tag Assistant頁面，

事件如預期觸發。