簡介

我們在網頁中通常都會有『聯絡我們』的標單輸入區，或是讓客人留下資訊好讓我們用信件行銷轟炸他們，當然我們可以用很多方法知道該表單是否有被提交，例如heatmap，或是自己寫程式來獲取，但GTM也是可以追蹤該類的功能。當我們提交表單後通常勤勞一點會跳出Thank you page，而我們就透過Thank you page的『可見元素』來觸發標單提交事件。

新增代碼

在新增之前我們來創建代碼腳本，例如：

腳本

1.代碼：GA –追蹤類型：事件
2.觸發條件：元素可見度–選取方式：CSS選擇器
3.變數(Variable)：若不限制表單提交網頁，可不指定

這次我們把代碼埋在popup的Thank you page中，而在我們知後要新增GTM代碼前，都可以先想一下並列出腳本，像上述這樣。

在過去幾篇都有提到怎樣新增代碼，而這邊我簡易的記錄一下在代碼的標籤假如使用在提交表單，這的Page Path是標單提交是從哪個網頁寄出的，所以這邊做這個設定。而其他設定如上圖。

觸發條件

雖然google有提供『表單提交』的觸發器，但是我覺得觸發的機制可能不夠精確，即使等待代碼和檢查驗證已經開啟，但仍會有誤觸代碼的情況，所以不建議選擇表單追蹤。

而這邊我們找一個能替代表單提交觸發器的捕獸夾就是『元素可見度』。某特定元素出現或顯示在瀏覽頁面時，就會啟動觸發條件。在表單提交的例子時，因為該『感謝填寫』的區塊段落是在成功送出表單後才會出現的，所以我們就能夠用元素可見度來抓取資料。換句話說，當它出現時，表單一定已經成功提交，所以我們選擇用這個補獸夾來做進一步設定。

CSS選擇器是一種元素定位方法，它幫助你找到要設計的HTML元素。 CSS選擇器幫助根據它們的標識、類等來定位HTML元素。因此無論元素在頁面上的什麼位置，CSS選擇器都可以準確定位它，這樣我們就可以快速找到它。因此，我們將把感謝頁面的CSS複製到我們的網頁上。

CSS選擇器在網頁設計中經常使用，但是我們知道它也可以『定位』元素，所以我們使用『元素可見性』來檢查元素是否出現，並使用『CSS選擇器』來抓取元素的位置。當滿足上述兩個條件時，將會觸發。

這邊講一下觸發條件的差別

每個網頁一次：觸發條件對各個網頁只會觸發一次。
每個元素一次：觸發條件對各個網頁上的各個選定元素只會啟動一次，如果某網頁上有多個元素與 CSS 選擇器相符，各個元素首次在該網頁上變成「可見」時，觸發條件都會啟動 。
每次元素在畫面上顯示時：每次有相符元素變得「可見」，觸發條件就會自動或透過使用者互動啟動，所以當你來回滾動就會重複觸發

所以我們在觸發條件的選項就選擇「每個網頁一次」或者「每個元素一次」都是精準的，但如果選擇「每次元素在畫面上顯示時」就可能會將重複填寫表單的使用者計算進去。

設定到這邊我們看一下目前設定狀況，再進階的地方我們選擇『觀察DOM改變情形』，而什麼事DOM？

可以看到上圖，懂一點html就大概可以知道了，DOM 『 Document Object Model，文件物件模型 』 就是把一份 HTML 文件內的各個標籤，包括文字、圖片等都定義成物件，而這些物件最終會形成一個樹狀結構。所以當我們跳出popup的Thank you page，則原始網頁的DOM就會產生改變，進而觸發捕獸夾。設定好後我們就儲存並提交。

小結 ＆ 驗證

提交後，一樣到你的GTM主頁重新啟動『預覽』，並到你網頁看有沒有多出你剛剛新增的代碼在Summary中，如上圖。

按下按鈕後就假裝提交表單，並跳出Thank you page，可以看到上圖，剛剛設定的代碼已經成功觸發了。

在未來的監控提交表單或是應用到網頁特定元素監控時，就可以參考此篇來設定你的代碼與捕獸夾。