追蹤網站的表單是否成功提交是網站追蹤的常見項目之一，非電商類型網站都會希望使用者留下信箱或是電話等資訊，讓商家可以進行後續聯絡，如：保險業、Saas 服務等等，在 GA4 的「加強型事件評估」以及「Google 代碼管理工具（GTM）」 皆有內建表單提交的追蹤和觸發條件，但 GA4 加強評估事件中的「表單互動」其實在追蹤上不是太準確，如果可以，都建議盡可能以 GTM 來設定為優先。
本篇文章假設你已經有安裝 GA4 ，如果還未安裝 GA4 的朋友，可以參考這篇文章：如何用 GTM 安裝 GA4 評估 ID 以及 Meta(Facebook) Pixel？
如果你可以用 GTM 進行「表單提交」追蹤事件的設定，那我們建議一率使用 GTM 處理，這篇文章會介紹使用 Google 代碼管理工具（GTM）追蹤表單提交的三個方法，分別是使用觸發條件「網頁瀏覽」、「表單提交」以及「可見度元素」來進行追蹤設定。
（趕時間的朋友，可以這樣看）
如果提交表單之後有個感謝頁面，可以用這段的「網頁瀏覽」觸發條件設定，或是直接用「表單提交」觸發條件也可以。
但如果沒有感謝頁面，表單提交之後畫面沒有重新載入而是直接顯示提交成功訊息在網頁上，那可以嘗試使用「可見度元素」觸發條件或是使用 Ajax 監聽器（Ajax Listener）。
如果沒有感謝頁面，但你有工程師可以協助，則建議使用 Data Layer 處理，可以參考這篇：如何用 Data Layer Push 設定 GTM「表單提交」事件？
現在，我們繼續看下去。
本篇重點
用「網頁瀏覽」觸發類型啟動追蹤代碼
如果你有感謝頁面（Thank You Page）可以用。
什麼是感謝頁面？當使用者在你的網站將表單提交之後，網站直接帶使用者到另一個頁面，網頁上面可能會寫說：「感謝你_____，我們將會盡快請專人與您聯繫」之類的，一般我們會稱作這個頁面為感謝頁面（Thank you page）。
同時觀察瀏覽器網址列，如果也有改變，那恭喜你，可以用最簡單的觸發條件類型：「網頁瀏覽」來觸發需要的追蹤事件代碼。
同樣的邏輯，你可能也會在電商類型網站聽過，結帳之後會帶你到訂單確認頁面，除了感謝你的購買以外還會顯示該次訂單的細節詳情，這樣的頁面也屬於感謝頁面的一種，我們都可以透過網址變更，來觸發我們需要的追蹤事件代碼。
例如：
「填寫表單頁面」網址為：mktgholic.local/contact-us/
「成功提交表單」後網址為：mktgholic.local/thank-you-for-contact-us
（注意到填寫表單的頁面網址與填寫完成的頁面網址是不同的。）
設定觸發條件類型「網頁瀏覽」
首先，我們必須要先來設定觸發條件。
GTM 左側面板選擇「觸發條件」 > 「新增」 > 選擇觸發條件類型「網頁瀏覽」
進行「網頁瀏覽」觸發條件細部設定時，因為我們只會在特定的網址上（感謝頁面）觸發事件，加上這是一個使用者必須填完表單之後才會抵達的網頁，所以觸發條件啟動時機的設定就會是：
「部分的網頁瀏覽」(1) > 下方的條件則是「Page Path(2)」 包含 thank-you-for-contact-us/(3)
（你的「網址路徑 Page Path 」是什麼就填入什麼，這邊也可以選擇用 Page URL ，都可以達到一樣的效果。）
設定完之後，將觸發條件命名之後儲存，在這邊我們將其命名為「Trigger-form_thank_you_page」，接下來開始設定 GA4 事件代碼。
（觸發條件命名可以隨意，重點是要好讀好懂，除了你自己看得懂以外，未來接手的夥伴光看名稱也可以馬上理解到這個觸發條件是做什麼用的。）
設定 GA4 表單提交事件
GTM 左側面板選擇「代碼」 > 「新增」 > 「Google Analytic(分析) 」 >「Google Analytic(分析) ：GA4 事件」
針對新增的「GA4 事件」所需要的觸發條件，我們使用剛剛設定的「網頁瀏覽」觸發條件「Trigger-form_thank_you_page」，如此一來，當使用者來到感謝頁面時，GTM 發現該網頁網址內包含「thank-you-for-contact-us/」，就會觸發此「GA4 事件」。
事件名稱也是可以自行命名，因為這個名稱會顯示在 GA4 的報表中，只要可以讓閱讀報告的人好讀好懂就可以，範例中我們將其命名為「Form_Submit」。
完成設定之後，將此事件代碼命名後儲存，接著我們就要透過 GTM 預覽模式檢查代碼是否有在使用者填完表單來到感謝頁面後，正確觸發。
（如果你是剛使用 GTM 的朋友，尚不清楚「預覽模式」怎麼使用的話，可以先去看這篇文章：如何用 GTM 「預覽模式」檢查代碼有無設定成功？）
透過 GTM 預覽模式左邊欄位可以看到，在我們來到感謝頁面之後，代碼「GA4Event-Form_Submit」正確啟動（右邊）。
同樣的，我們也可以透過 GA4 的 Debug View 確認「 Form_Submit」 事件是否有送入，確認都沒問題之後，就表示代碼成功觸發，並且有將事件傳送到 GA4，未來當有人提交表單之後，我們就可以在 GA4 當中看到事件記錄了。
GA4 Debug View 怎麼去？
（2023.10.26 剛好遇到 GA4 介面改版，因此畫面可能會跟其它篇文章看到的 GA4 介面有些許不同。）
GA4 介面左下角「齒輪(1)」 > 「資源設定」 > 「資料顯示(2)」 > 「Debug View(3)」
還不熟悉 GA4 後台介面的朋友，可以參考這篇文章：認識 Google Analytic 4 後台介面，希望可以幫助你對於 GA4 後台介面有初步的理解。
用「表單提交」觸發類型啟動追蹤代碼
設定觸發條件類型「表單提交」
除了用上述的方式來觸發代碼以外，我們可以嘗試使用 GTM 內建的「表單提交」觸發條件類型，透過 GTM 自身傳送到 Data Layer 的「表單提交」事件來觸發所需要的 GA4 事件代碼。（ Data Layer 這段現在不懂沒關係，只是先提一下這個觸發條件運作的邏輯。）
不過在這之前，我們必須先設定一個屬於「表單提交」的觸發條件類型。
GTM 左側面板「觸發條件」 > 右上角「新增」 > 選擇觸發條件類型「表單提交」
觸發條件的啟動時機選擇「所有表單」> 命名後儲存
確認「Form Submit」事件
當完成觸發條件設定之後，我們可以先開啟 GTM 預覽模式檢查此觸發條件是否有在提交表單之後成功啟動。
如果有成功，將會在預覽模式的左側面板可以看到一個「Form Submit（編號 No.36）」事件，恭喜你，接下來的設定就會跟用「網頁瀏覽」觸發條件類型的方式一樣簡單。
（需要注意的是，這邊的「Form Submit」只是代表 GTM「表單提交」觸發條件有正常運作，不代表有事件傳送到 GA4，我們還是要進行 GA4 事件代碼的設定。）
另一個「form_sumbit」是什麼？
在預覽模式中，當我們提交表單之後，可以看到左側面板跑出了「Form Submit」以及 「form_submit」，分別屬於 GTM 自身傳送到 Data Layer 資料層的事件（也就是剛剛設定的觸發條件）以及屬於 GA4 加強型事件評估傳送到 Data Layer 資料層的事件。
「Form Submit」：因為設定了 GTM 中的「表單提交」觸發條件類型，所以出現。
「form_submit」：因為打開了 GA4 加強型事件評估中的「表單互動」，所以出現。
透過點選左側「Form Submit」本身，觀察 Data Layer 資料層我們可以看到 dataLayer,push{{event : gtm.formSubmit}}，代表這是由 GTM 送出的，我們會用來作為本次事件代碼的觸發條件。
而如果在 Data Layer 看到的只是單純 dataLayer,push{{event : formSubmit}}，這就是 GA4 本身預設的加強型事件評估所產生的。
當確定有看到「Form Submit」 於左側面出現時，就表示我們可以使用 GTM 中的「表單提交」觸發條件類型進行代碼設定，觸發所需要的事件傳送到 GA4。
如果表單沒填寫完成就按下提交，代碼會觸發嗎？
除了確認當使用者從網站上面提交表單，可以在預覽模式左側面板中看到「Form Submit」以外，我們也必須要確認如果使用者沒有填寫完整就提交了表單，會發生什麼事？
- 如果沒填寫完整按下「提交表單」按鈕後，依然出現了「Form Submit」，那我們就必須採用別種觸發條件類型，以免造成數據收集上的錯誤。
（可以使用推送到 Data Layer 的事件觸發或是下一段介紹的「可見度元素」來觸發。） - 反之，如果沒有出現「Form Submit」事件，那很好，這才是我們要的結果。（表單沒填寫完就按送出當然不算成功提交表單！）
設定 GA4 「表單提交」事件
GTM 左側面板選擇「代碼」 > 右上角「新增」 > 選擇「Google Analytic(分析)」> 選擇「Google Analytic(分析)：GA4 事件」> 輸入「事件名稱」 > 選擇剛剛設定的觸發條件「Trigger-Form_Submit」 > 命名：「GA4Event-Form_Submit」> 儲存
接著回到預覽模式中，確認表單提交之後，「GA4Event-Form_Submit」事件代碼有無正常觸發，從下圖可以看到，當我們提交表單之後，剛剛設定的代碼有確實觸發。
透過 GA4 的「 Debug View」 以及「即時報表」我們也可以看到 GTM 確實發送了「Form_Submit 」到 GA4 當中。
搞定，往後只要有人提交表單，我們就可以將其設定為一個轉換事件，方便未來廣告或是行銷活動的成效追蹤。
用「元素可見度」觸發追蹤代碼
有時候儘管設定了「表單提交」觸發條件，但是透過預覽模式，我們依然看不到 GTM 推送到 Data Layer 的「Form Submit」，甚至連 GA4 加強型事件評估推送的也看不到，通常很大的原因就是表單的提交是用 AJAX 執行所造成。
除了透過預覽模式確認以外，較簡單的方式是可以觀察一下，當在網頁上按下「提交」按鈕之後，網頁是否有刷新？網址是否有更動？
如果都沒有，只是原網頁跳出表單提交成功的訊息，基本上都是 AJAX 執行的表單的提交，因此不會有「 Form Submit 」事件可以讓我們當作觸發條件使用。
那該怎麼辦？
解決的方式有很多，例如：使用觸發條件「元素可見度」、推送表單提交事件到 Data Layer 中（這部分要與網站工程師合作，可以參考這一篇文章）或是使用 Ajax 監聽器（Ajax Listener）。
而在接下來的段落中，我們會教你如何使用「元素可見度」的方式來觸發 GA4 事件。
找出成功提交訊息的專屬元素(class)
在顯示表單成功提交的畫面框框點擊右鍵 > 選擇「檢查」
透過開發者工具，我們可以看到此訊息欄位內的 Class 屬性值為「wpforms-confirmation-container-full wpforms-confirmation-scroll」，接下來我們便可以運用這個元素，作為觸發條件。
條件情境會是：
1. 當畫面出現 class 屬性值為「wpforms-confirmation-container-full wpforms-confirmation-scroll」時。
2. 啟動「GA4 表單提交事件」代碼。
設定「元素可見度」觸發條件
GTM 左側面板選擇「觸發條件」 > 右上角「新增」> 選擇觸發條件類型「元素可見度」
選擇用「CSS 選取器」的方式，輸入剛剛透過檢查工具拿到的 Class 值「wpforms-confirmation-container-full」，記得要在前面加「.」，才會正確觸發執行。（如下圖）
（延伸閱讀》如何使用「CSS 選取器」？）
如果表單是用 AJAX 觸發的，會造成前端 DOM 的改變，改變之後才會出現我們設定的 class 名稱，因此我們必須觀察是否有此情形發生，才能確保觸發條件正常運作。
設定完畢之後，命名「Trigger-Visibility_Form_Submit_Success_msg」後儲存（一樣，命名沒有限制，自己跟團隊夥伴們好讀好懂就可以。）
也可以使用 ID 屬性
除了在「可見度元素」的選取方式中選擇使用「CSS 選取器」以外，如果成功提交訊息的容器中有 id 屬性可以使用，會建議直接使用 id 屬性，因為這個屬性的值通常只能是該頁面唯一的值，不會有其它元素使用的屬性值重複，因此可以確保更正確的觸發代碼。
例如上述的提交成功訊息中，也可以找到屬性 id，其值為：「wpforms-confirmation-173」
接著我們來設定觸發條件，所有設定方式都跟使用「CSS 選取器」時一樣，唯獨選取方式改成用「ID」的方式選取，如下圖：
如此一來，也可以達到一樣的效果，建議如果有 ID 屬性可以使用，就以使用 ID 優先，如果沒有的話，再使用「CSS 選取器」。
觸發條件設定完畢之後，接下來我們可以開始設定 GA4 事件。
設定 GA4 「表單提交」事件
GTM 左側面板選擇「代碼」 > 右上角「新增」 > 選擇「Google Analytic(分析)」> 選擇「Google Analytic(分析)：GA4 事件」> 輸入「事件名稱」> 選擇剛剛設定的觸發條件「Trigger-Visibility_Form_Submit_Success_msg」 > 儲存
接著來到預覽模式中，確認在表單提交之後，是否有透過觸發條件「元素可見度」觸發我們設定的代碼「GA4Event-Form_Submit」。
透過左側面板可以看到「Element Visibility」在表單提交之後被啟動，設定的代碼「GA4Event-Form_Submit」也確實被觸發，設定完成。
同樣的，也可以到 GA4「Debug View」以及「即時報表」中進行確認，這邊就不再重複贅述。
總結一下
在這篇文章中，我們提供了三種方法讓你可以在沒有工程師的協助之下，自行設定追蹤表單提交的方式，並且針對有感謝頁面跟沒有感謝頁面的表單使用不同的觸發條件，來幫助網站追蹤使用者的行為。
觸發條件「網頁瀏覽」、「表單提交」以及「元素可見度」是最簡單處理表單提交追蹤的方式，「表單提交」追蹤也幾乎是所有網站必須要有的基本追蹤事件（我想大部分網站或多或少都有填表單需求？）
希望透過這篇文章，可以幫助你解決面臨的問題，最後總結一下：
如果提交表單之後有個感謝頁面，可以用這段的「網頁瀏覽」觸發條件設定，或是直接用「表單提交」觸發條件也可以。
但如果沒有感謝頁面，表單提交之後畫面沒有重新載入而是直接顯示提交成功訊息在網頁上，那可以嘗試使用「可見度元素」觸發條件或是使用 Ajax 監聽器（Ajax Listener）。
如果沒有感謝頁面，但你有工程師可以協助，則建議使用 Data Layer 處理，可以參考這篇：如何用 Data Layer Push 設定 GTM「表單提交」事件？
補充一下
除了追蹤有多少人填寫表單並提交以外，我們也可以善用 GA4 加強型事件評估中表單互動裡的另一個事件「form_start」事件來計算成效表現，當使用者開始填寫表單內的格子時，「form_start」事件就會啟動（如下圖），我們便可以設定一個事件傳送給 GA4 來記錄：有多少人開始填寫表單？
如此一來，可以得到三個數字：表單頁面瀏覽量、開始填寫表單的次數以及完成表單的數量，便可以作為優化的參考指標，藉由設定不同的表單樣式或是擺放在不同的位置，甚至是透過不同的廣告素材引入到表單，了解這三個數字之間在不同行銷活動下的差異，藉此計算出轉換率，逐步去優化所有項目，提升表單提交的數量，聽起來是不是很有趣？
試試看，很好玩的。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎你看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
