GTM「表單提交」追蹤:你應該知道的 5 種設定方式

身為一個 GTM 操作人員,設定追蹤網站「表單提交」事件的頻率大概僅次於電子商務「購買」事件的追蹤項目,如果你的網站服務是希望使用者進站之後留下聯絡訊息,例如:Email、電話或是任何聯絡方式等,那你一定會需要透過追蹤「表單提交」事件的埋設,來協助判定各管道以及廣告渠道所帶來的成效,同時也方便進行 A/B Test 讓團隊知道什麼樣式的表單表現較佳。

就如同我們過去所說的,表單的設計百百種,並沒有一個絕對適用於所有表單的設定方式,例如:若你的表單是用 Ajax 技術提交的,也就是畫面不會跳轉,而是直接顯示成功訊息,那你就無法使用 GTM 內建的「表單提交」觸發條件。

在這篇文章中,我們將整理之前提到的所有表單追蹤設定,同時提供一個設定建議的思考流程,當你需要設定表單提交追蹤事件時,可以按照這些步驟一步步地檢查,確定應該如何處理手上的表單。



該用哪種表單追蹤方式?

首先,我們可以依據以下步驟來檢查我的們表單類型。

  1. 我可以透過 GTM 內建的「表單提交」觸發條件嗎?
    想測試可不可以,請直接看這段,可以的話,直接用。
    如果不可以,請繼續往下看。
  2. 提交表單後,網頁的網址有改變嗎?(通常會跳轉去一個感謝頁面。)
    如果有,請用本文「網頁瀏覽」觸發條件段落。
    如果沒有,請繼續往下看。
  3. 網址如果沒有改變,只是在原頁面上顯示提交成功的訊息,通常這會是 Ajax 技術提交的表單,我們可以安裝 Ajax 監聽器(Listener)來觀察資料層是否有 ajaxComplete 事件
    如果有,請看本文這段落
    如果沒有,請繼續往下看。
  4. 使用網頁檢查工具(網頁上按右鍵),觀察表單的 HTML 是否有獨特的 ID 或是 Class?
    如果有,請看這段落,使用元素可見度」觸發條件
    如果沒有,請繼續往下看。
  5. 可否請網站工程師協助,推送特定事件以及資料到「資料層 Data Layer」?
    如果可以,請看本文最後這段
  6. 如果上述的辦法都沒有辦法,那可能就真的沒辦法了(我們如果有想到會再補上來)

因此,當手邊有一個表單要進行「提交」事件追蹤設定時,可以透過這樣的順序檢查自家網站表格適合哪一種方式。


#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 追蹤方式, 五種設定方式希望可以幫助你解決在追蹤表單上的疑難雜症,如果未來有其它更好用的設定方式,我們也會一並更新到這篇文章中。


延伸閱讀

如果你很喜歡這篇文章並且覺得內容有幫助,又剛有些多餘時間,歡迎看看其它文章,繼續探索(這坑?這地獄?這片樂土?)

同時,如果對於內容有疑問或是建議,也歡迎你留言告訴我們:)