5 個用 GTM 追蹤「表單提交」的方式，你該用哪一種？
身為一個 GTM 操作人員，設定追蹤網站「 表單提交」事件的頻率大概僅次於電子商務「 購買」事件的追蹤項目，如果你的網站服務是希望使用者進站之後留下聯絡訊息，例如：Email、電話或是任何聯絡方式等，那你一定會需要透過追蹤「 表單提交 」事件的埋設，來協助判定各管道以及廣告渠道所帶來的成效，同時也方便進行 A/B Test 讓團隊知道什麼樣式的表單表現較佳。
就如同我們過去所說的，表單的設計百百種，並沒有一個絕對適用於所有表單的設定方式，例如：若你的表單是用 Ajax 技術提交的，也就是畫面不會跳轉，而是直接顯示成功訊息，那你就無法使用 GTM 內建的「 表單提交 」觸發條件。
在這篇文章中，我們將整理之前提到的所有表單追蹤設定，同時提供一個設定建議的思考流程，當你需要設定表單提交追蹤事件時，可以按照這些步驟一步步地檢查，確定應該如何處理手上的表單。
該用哪種表單追蹤方式？
首先，我們可以依據以下步驟來檢查我的們表單類型。
- 我可以透過 GTM 內建的「表單提交」觸發條件嗎？
想測試可不可以，請直接看這段，可以的話，直接用。
如果不可以，請繼續往下看。
ㅤ - 提交表單後，網頁的網址有改變嗎？（通常會跳轉去一個感謝頁面。）
如果有，請用本文「網頁瀏覽」觸發條件段落。
如果沒有，請繼續往下看。
ㅤ - 網址如果沒有改變，只是在原頁面上顯示提交成功的訊息，通常這會是 Ajax 技術提交的表單，我們可以安裝 Ajax 監聽器（Listener）來觀察資料層是否有
ajaxComplete事件？
如果有，請看本文這段落。
如果沒有，請繼續往下看。
ㅤ - 使用網頁檢查工具（網頁上按右鍵），觀察表單的 HTML 是否有獨特的 ID 或是 Class？
如果有，請看這段落，使用「元素可見度」觸發條件。
如果沒有，請繼續往下看。
ㅤ - 可否請網站工程師協助，推送特定事件以及資料到「資料層 Data Layer」？
如果可以，請看本文最後這段。
ㅤ - 如果上述的辦法都沒有辦法，那可能就真的沒辦法了（我們如果有想到會再補上來）
因此，當手邊有一個表單要進行「 提交 」事件追蹤設定時，可以透過這樣的順序檢查自家網站表格適合哪一種方式。
#1 GTM 內建的「表單提交」觸發條件
最方便也最快速的方式，雖然 GA4 加強型評估事件中也有「 表單互動」追蹤事件，但基本上，如果你可以用 GTM 設定，我們一律建議使用 GTM 進行設定並關閉 GA4 加強型評估事件當中的「 表單互動」，一是方便事件的管理，二來是該「 表單互動 」事件不是那麼的可靠，有時會出現使用者已經成功提交表單但是事件卻沒觸發的情況。
關於如何透過「 表單提交」觸發條件設定表單提交追蹤事件，可以參考這篇文章： 如何用「表單提交」觸發類型啟動追蹤代碼？
#2 GTM 內建的「網頁瀏覽」觸發條件
如果你在按下「 提交」按鈕之後，畫面有 重新載入或是注意到 網址有變化，那麼透過「 網頁瀏覽 」觸發條件來設定追蹤事件代碼也是一個很簡單的設定方式。
不過…通常 #1 的方法如果行不通，「 網頁瀏覽 」觸發條件可能也不會通，但還是可以觀察一下畫面以及網址列的變化，如果可行，使用這方式也可以為追蹤事件的設定省下許多時間。
關於如何透過「 網頁瀏覽」觸發條件設定表單提交追蹤事件，可以參考這篇文章： 如何用「網頁瀏覽」觸發類型啟動追蹤代碼？
#3 用 Ajax 監聽器（Ajax Listener）
在按下「 提交」表單按鈕之後，你發現畫面並未重新載入，而是直接在 原地顯示表單提交成功的訊息 ，如果你遇到這樣的情況，很可能是因為你的表單採用了 Ajax 技術，透過這種方式將資料傳送到伺服器上。這也是為什麼先前提到的觸發條件無法正常運作的原因所在。
此時我們就可以透過「 Ajax 監聽器」來進行表單提交追蹤的設定，關於這部分的設定方式，可以參考這篇文章： 如何用 GTM 追蹤不會跳轉(沒有感謝頁面)的 Ajax 表單？
這篇文章中有碰到 Javascript 代碼，不要看到代碼就心慌害怕，你只要懂得如何使用複製貼上就可以了，本次步驟中，你不需要撰寫任何一行代碼，因為那已經超出了行銷人員的技能範疇，所以不需要擔心。
#4 GTM 內建的「元素可見度」觸發條件
這個方式我們依然不用寫任何一行代碼，但需要有一點 HTML 的觀念，因為你必須要找出表單 HTML 結構中 特定的 ID 或是 Class，其原理是透過 特定網頁元素出現在畫面上 的時候，滿足觸發條件，並且依據該觸發條件去觸發追蹤事件的代碼。
而這個原本沒有，但在「 提交 」表單後出現的元素，通常就會是那則表單提交成功的訊息。
在設定上也不會太困難，關於這個方式的設定細節，可以參考文章： 如何用「元素可見度」觸發類型啟動追蹤代碼？
我們將會告訴你如何一步一步地透過網頁檢查工具找出特定的元素，並且應該要如何使用「 CSS 選取器」（好吧，又是一個分開看都看得懂但是放在一起就看不懂的名詞，如果你想先瞭解這個的運作方式，可以參考 這篇文章）或是「 ID」設定「 元素可見度 」觸發條件。
如果在表單上找不到獨一無二的 ID 或是 Class，那麼我們可以請工程師協助幫我們加上去，但如果有工程師可以協助的話，我們會建議可以採用接下來的方式，也就是 dataLayer.push 。
#5 請工程師協助推送資料到資料層
這是最穩定也最保險的方式了，但是礙於一般網站可能都是使用 WordPress 或是沒有工程師可以協助的情況，我們才會將這個方法擺在這個順位，不過如果可以請工程師協助，將提交表單的相關動作與資料推送到資料層，那我們一律建議以這個方式為優先，提高事件追蹤的準確度。
關於透過 dataLayer.push 的設定方式，可以參考這篇文章： 如何用 Data Layer Push 設定 GTM「表單提交」事件？
追蹤出現錯誤的欄位
一個新的表單初上線時，我們很容易放入太多的欄位，希望使用者把所有我們想知道的一切通通告訴我們，美其名是更了解使用者，但其實有些欄位你收到了資料可能也不知道未來該如何應用，還因此降低了使用者填完表單的意願，可是老闆就是要這麼多欄位，那我們可以怎麼做？
我們可以追蹤使用者沒填寫的欄位，來了解哪些可能是使用者不想填寫就提交的，是否有將其移除的可能？透過收集到的數據讓老闆知道這樣的狀況，才有機會說服老闆移除欄位提高表單提交轉換率。
（這邊的判定方式是假設使用者沒有填寫必填欄位後就提交表單，因此產生錯誤且沒有提交成功，藉此來判斷，該欄位「可能」是使用者不想給予資料的欄位。
當然，他有可能只是忘了，但我們還是可以透過這樣的方式來測試看看，移除該欄位之後，表單提交成功率是否有上升。）
關於這部分的追蹤方式，可以參考這篇文章： 如何用 GTM 追蹤「表單提交」錯誤訊息？
總結一下
這篇文章我們提供了一個設定表單追蹤的思考流程，從透過最簡單且行銷人員可以自行設定的「 表單提交 」觸發條件到需要工程師協助但最為穩定的 dataLater.push 追蹤方式， 五種設定方式希望可以幫助你解決在追蹤表單上的疑難雜症，如果未來有其它更好用的設定方式，我們也會一並更新到這篇文章中。
