在網站追蹤中，追蹤表單提交是相當常見的事件之一，我們之前的文章中，提到了如何使用 GTM 建立表單提交追蹤事件，但有時候可能會因為要求使用者填寫太多欄位，降低了使用者提交表單的意願，進而影響轉換率。
此時我們就可以透過追蹤事件的設置，來了解到是哪一個欄位常常出現錯誤訊息（因為使用者沒填寫就提交），進而評估該欄位是否必要，是否可移除，以提高使用者提交成功率。
可以怎麼做呢？
讓我們繼續看下去。
表單上的錯誤訊息
每個網站的表單設計都各有不同，因此在接下來的設定過程中，你所輸入的元素名稱可能會跟範例圖片中的不完全相同。這時就需要你自己進行比對並修改，但其原理都是一樣的。
我們先來看一下，當表單提交出現錯誤訊息時，畫面會長什麼樣子。
此為 WordPress 表單外掛 Contact Form 7 所產生的表單，你的畫面可能會略有不同，不過基本上大部分表單運作邏輯都是相同的，我們今天的目標不僅是追蹤表單提交是否有錯誤，更進一步是想知道錯誤是發生在哪個欄位。
（延伸閱讀》如何追蹤 Contact Form 7 表單提交？）
因此，我們接著可以來檢視這些欄位 HTML 元素的變化，在出現錯誤訊息之前的 HTML 元素是什麼樣子，訊息出現之後又會變什麼樣子。
表單欄位錯誤訊息出現之前的 HTML 元素，注意看， class 名稱僅有 wpcf7-form-control wpcf7-text wpcf7-validates-as-required
當使用者有表單欄位沒填寫完整就提交表單，表單出現錯誤訊息之後，該欄位的 class 名稱多了一個 wpcf7-not-valid
了解這樣的差異之後，有些人應該已經意識到該怎麼做觸發條件的設定了。
沒錯，我們可以使用觸發條件「元素可見度」來協助我們觸發代碼，當出現 wpcf7-not-valid 這個 class 名稱時，我們就可以觸發 GA4 事件，並且記錄出現錯誤的是哪一個欄位。
（關於觸發條件「元素可見度」，還可以閱讀「GTM 觸發條件介紹」 以及「用元素可見度追蹤站內廣告曝光」，這些文章可以幫助你更深入地了解其應用。）
設定「元素可見度」觸發條件
如果要使用元素可見度作為觸發條件，我們必須要了解如何運用「CSS 選取器」，關於這點，在文章「如何使用 GTM 的 CSS 選取器」中有詳盡的介紹，如果你有時間，建議可以先閱讀一下，這會幫助你更深入地了解其運作原理。但如果你暫時沒有時間，也不用擔心，我們接下來的步驟將會指導你如何操作，讓你能夠快速解決問題。
GTM 左側面板選擇「觸發條件」 > 右上角「新增」> 選擇觸發條件類型「元素可見度」
在「元素可見度」設定介面中：
- 「選取方式」欄位下拉選單我們採用「CSS 選取器」。
ㅤ - 欄位「元素選擇器」輸入
span > input.wpcf7-not-valid(你的應該會不一樣，請自行找出後將其替換成你的 class 名稱)
ㅤ - 勾選「每個元素一次」（預設為每個事件一次，因為我們的表單有多個欄位，如果採用預設，當今天表單有超過一個以上的欄位出現錯誤時，我們只能抓到其中一個的錯誤。）
ㅤ - 因為欄位的 DOM 會改變，因此我們必須勾選「觀察 DOM 改變情形」，如果不了解什麼是 DOM 的朋友，可以參考文章：什麼是 DOM？
設定完成之後，就可以透過「GTM 預覽模式」開始進行測試，我們預期的結果應該是，當表單錯誤訊息出現的時候（也就是 wpcf7-not-valid 出現時），剛剛設定的「元素可見度」觸發條件應該要被觸發。
從上圖可以看到，預覽模式中的左側面板如預期的出現了 3 次「元素可見度」事件，代表我們的觸發條件設定沒有問題，接下來，我們必須要設定一個變數，用來判別是哪個欄位出錯。
透過自動事件變數了解出錯的欄位名稱
只要使用者有與網頁上的元素互動，例如點擊、提交表單或是觀看某個元素，我們就可以透過「自動事件變數」來取得該元素內的屬性名稱，藉此就能了解到出現錯誤訊息是哪個欄位的。
（對於「自動事件變數」尚不熟悉的朋友，可以參考這篇文章：GTM 變數介紹：自動事件變數）
觀察一下表單欄位的 HTML 元素，我們可以看到其中有一個名為 name 的屬性（如同前面所說的，由於每個表單的結構設計方式都不同，因此你的畫面可能會與以下示例有所不同。）
如果你是使用其它表單外掛套件（範例中使用的是 Contact Form 7），通常都會有一個名稱不同但是功用相同的屬性值，也就是說，你的欄位屬性可能不是 name="your-email"，可能會是 column="email" 或是 type="e-mail" 之類的名稱。
如果網站是由工程師團隊自建的，那你可以請他們在這個欄位內自行加上屬性，以方便我們可以透過 GTM 取用（如果可以推送到 Data Layer 資料層更好，不過那又是另外一個故事了。）
因此，接下來，我們便可以透過「自動事件變數」來取得 name 這個屬性名稱的值，協助我們判斷出現錯誤的欄位是哪一個。
GTM 左側面板選擇「變數」 > 下方使用者定義的變數區塊右上角選擇「新增」 > 點擊中間開始設定 > 選單下拉選擇「自動事件變數」
「變數類型」欄位的下拉選單選擇「元素屬性」 > 「屬性名稱」輸入 name （我們在欄位中找到的屬性名稱）
將變數儲存之後，我們一樣來到「GTM 預覽模式」先行測試，預期要能看到上述設定的「自動事件變數」抓到 name 屬性的值為 your-name 或是 your-email。
確認該變數設定沒問題之後，就可以開始進行最後一步：「GA4 事件」代碼設定。
設定表單錯誤事件代碼
GTM 左側面版選擇「代碼」 > 右上角「新增」 >「Google Analytics(分析)」>「Google Analytics(分析)：GA4 事件」
代碼設定方式就跟過往我們在設定 GA4 事件代碼的方式一樣，只是要記得帶上前面設定的「自動事件變數」以及「元素可見度」觸發條件，事件與參數名稱我們可以自行定義，設定完畢之後會如下圖。
最後再度來到「GTM 預覽模式」確認，代碼是否有如預期觸發以及傳送正確的參數。
確認沒問題之後，也要到 GA4 的 Debug View 確認 GA4 是否有收到事件以及參數值。
最後最後，因為在「GA4 事件」代碼的設定中，參數名稱是我們自訂的，非 GA4 原本預設，一定要記得去 GA4 後台自訂維度，否則將無法從 GA4「探索」報表中選到這個維度。
整理一下最後檢查的流程：
- 透過 GTM 預覽模式確認事件代碼正常觸發，同時確認該代碼有送出事件名稱以及參數。
- GA4 Debug View 確認有收到事件以及參數。
- 發佈代碼後，到 GA4 後台自訂維度。
- 搞定！
都沒問題之後，等待 24-48 小時，我們在 GA4 探索報表中，預期應該可以建立如下圖的報表：
總結一下
透過這樣的方式，行銷人員可以在沒有工程師的協助下，自行用 GTM 來追蹤欄位的錯誤，對於新上線的表單來說，會有一個很不錯的優化依據，也能用數字來說服老闆，有些欄位可能影響到了使用者填寫表單，或許我們可以將其表單欄位簡化一點（有時…真的是不需要那麼多欄位），以提高使用者提交表單的意願。
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
