我們之前曾經介紹過幾個追蹤表單提交的方式，除了可以使用 GA4 加強型事件評估中的「表單互動」以外，在文章「如何用 GTM 設定 GA4「表單提交」事件」以及「如何用 Data Layer Push 設定 GTM「表單提交」事件？」中，也介紹了幾個追蹤使用者是否有成功提交表單的方式。
但是表單設計百百種，不見得每一種追蹤方式都能適用於所有表單，今天我們要分享的是針對 WordPress 中著名的表單外掛「Contact Form 7」的追蹤方式，因為不管是 GA4 的「表單互動」事件或是 GTM 的「表單提交」觸發條件，都無法於 Contct Form 7 上正確運作。
這個方法的好處是，從頭到尾都不需要工程師的協助便可以完成追蹤事件的設定，對於獨自經營網站且沒有工程師協助推送資料到 Data Layer 的朋友可謂是一大福音。
在開始之前，如果還不認識資料層（Data Layer）的朋友，建議可以先去看這篇文章：「Data Layer 資料層是什麼？」，看完之後，再看：「如何用 Data Layer Push 設定 GTM「表單提交」事件？」，可以幫助你更容易理解接下來的設定教學。
但如果你趕時間，只想要趕快設定好表單提交追蹤事件，這兩篇不看也不打緊，直接跟著接下來的步驟操作就可以。
本篇重點
為什麼 CF7 無法用一般表單追蹤方式？
最主要的原因就是，不管是使用 GA4 加強型事件評估中預設的「表單互動」或是 GTM 的內建觸發條件「表單提交」來啟動代碼，都存在一個通病，那就是即便使用者未將 Contact Form 7 的表單欄位填寫完整，只要按下「傳送」或「提交表單」按鈕，追蹤代碼仍會被觸發，這可能會影響追蹤數據的準確性。
使用 Contact Form 7 的朋友可以試試看，在 GTM 預覽模式下，不填寫任何表單欄位直接點擊「傳送」，儘管表單可能會因為有欄位未填寫而顯示錯誤訊息，但在 GTM 觸發條件「表單提交」以及 GA4「表單互動」都有設定的情況下，你依然會看到 GTM 預覽模式面板左側出現來自資料層的 form_submit 事件。
這種情況其實在很多不同類型的表單中都會發生。即使在表單提交觸發條件的設置中勾選了「檢查驗證」選項，用於追蹤「表單提交」事件的代碼仍可能在資料未完整填寫的情況下被啟動，甚至是不管表單提交成功或是出現錯誤，代碼都不會啟動。
會發生這種情況大部分都是因為你所使用的表單是用 AJAX 的方式進行提交，這樣的提交方式，不管使用者是提交成功或是失敗，畫面都不會重新載入，而是在原表單畫面顯示成功或是錯誤訊息給你，如下圖：
如果是這種情況的表單，就算是有勾選「檢查驗證」也沒有用，這也是為什麼我們在之前的文章中，都會建議大家如果可以的話，盡可能使用 Data Layer 的方式來建立表單提交追蹤事件。
安裝 GTM4WP
在了解到會有追蹤錯誤的情況發生之後，我們開始來設定解決方式，會來看這篇文章想必你已經是在使用 WordPress Contact form 7 的表單外掛，接下來，我們需要去安裝另一個外掛「 GTM4WP」。
「GTM4WP」是一款方便的 WordPress 外掛，它讓安裝和管理 GTM 代碼變得更加簡單。只需輸入你的 GTM 容器 ID，這個外掛就能將 GTM 容器安裝到你的 WordPress 網站上。它還與一些著名的 WordPress 外掛整合，能夠自動將資料添加到資料層（Data Layer），這對於那些沒有工程師支援的網站管理者或行銷人員來說，提供了更具彈性的追蹤事件設置選項。
安裝完畢之後，你可以在 WP 後台的「設定」找到 GTM4WP 的介面。
GTM4WP 介面 > 上方頁籤選擇「整合功能」> 選擇「Contact Form 7」> 「打勾」啟動資料層事件 > 「儲存設定」
就這麼簡單，完成之後，使用者在操作表單時，就會有相對應的事件傳送到資料層（Data Layer），我們一樣可以透過 GTM 預覽模式確認。
GTM 預覽模式確認 CF7 資料層事件
來到 GTM 預覽模式 > 操作一次錯誤的表單填寫流程 > 按下「傳送」 > 觀察預覽模式左側面板出現的訊息。
在預覽模式中，我們會看到左側出現了「gtm4wp.contactForm7xxxxx」開頭的資料層事件，分別是「gtm4wp.contactForm7InvalidInput」以及「gtm4wp.contactForm7Submitted」。
儘管表單提交失敗，但 GTM4WP 仍然提供了一個表單提交的資料層事件。不過，這並不是我們真正需要的事件，這裡只是為了展示當表單提交出錯時，GTM4WP 會向資料層推送什麼樣的事件。
現在，讓我們嘗試一次正確的表單提交。在操作後，在預覽模式的左側，我們將會看到相應的資料層事件資訊。
在表單成功提交之後，gtm4wp 給了一個新的資料層事件「gtm4wp.contactForm7MailSent」，而我們將會用這個事件來自訂觸發條件。
因為從上面的範例可以看到，在提交資料不完整的表單時，資料層並沒有這個事件，提交正確的表單之後，資料層就收到了這個事件，表示用「gtm4wp.contactForm7MailSent」是可以幫我們在正確的時間點觸發我們要的「表單提交」追蹤事件代碼。
為什麼我們用 gtm4wp.contactForm7MailSent 而不是 gtm4wp.contactForm7Submitted ?
這是因為不管表單成功提交或是失敗，gtm4wp.contactForm7Submitted 總是會出現在資料層事件中，這不是我們要的結果（正常來說應該是只有成功的時候給 gtm4wp.contactForm7Submitted，失敗時則否 ），但這個問題是來自於 CF7 ，跟 GTM4WP 無關，只有 gtm4wp.contactForm7MailSent 是在成功提交表單之後才會出現，因此我們會用它來設定觸發條件。
設定「自訂事件」觸發條件類型
GTM 介面左側面板選擇「觸發條件」 > 右上角選擇「新增」> 觸發條件類型選擇「自訂事件」
事件名稱欄位輸入「gtm4wp.contactForm7MailSent」> 命名後儲存
到這邊，就完成了觸發條件設定，未來當使用者成功提交表單之後，資料層出現「gtm4wp.contactForm7MailSent」，我們的觸發條件就會被滿足。
設定 GA4 「表單提交」事件代碼
GTM 介面左側面板選擇「代碼」 > 右上角「新增」 > 「Google Analytics(分析)」> 「Google Analytics(分析)：GA4 事件」
事件名稱輸入「CP7_form_submit」> 選擇剛剛設定的「自訂事件」觸發條件 > 命名後儲存
（事件名稱的命名也可以直接覆蓋原 GA4 的表單提交事件名稱「form_submit」，這邊是為了示範讓其容易辨識，因此這樣命名，如果要覆蓋原 GA4 事件名稱，請記得關閉加強型事件評估中的「表單互動」）
這樣就完成「表單提交」追蹤事件代碼的設定了，接下來我們到預覽模式再確認一下，代碼是否有如預期正常觸發。
預覽模式確認事件代碼是否正常運作
在我們正確提交表單之後，觀察 GTM 預覽模式左側面板是否有出現「gtm4wp.contactForm7MailSent」以及「表單提交」事件代碼是否有被啟動。
如果一切順利，你會看到以下畫面：
接著來到 GA4 的 Debug View 確認 GA4 是否有接收到事件。
OK，搞定，這樣就可以在只有使用者成功提交表單時才啟動追蹤事件的代碼了，如果你提交不完整的表單，但是代碼依然被啟動，請照著上面的程序再檢查一次，只要設定正確，是不可能會出現這種情況的。
如果你不想安裝 GTM4WP(進階)
可能因為某些因素，你無法安裝 GTM4WP 的外掛，或是不想讓網站又多一個外掛，同時你看到 Javascript 不會頭暈想吐的話，那可以自己寫一段 Javascript 來監聽 Contact Form 7 的 DOM 事件。
Contact Form 7 官方有提供幾個在特定表單事件之後會出現的 DOM 事件，你會在下圖看到幾個有點熟悉的東西，例如「wpcf7mailsent」以及「wpcf7submit」。
這些 DOM 事件會在使用者成功提交表單以及同時提交了信箱地址的時候出現，我們可以用 JS 監聽器來監視這些事件，然後跟 GTM4WP 一樣，推送事件到資料層讓我們的「自訂事件」觸發條件使用。
（如果這邊不理解沒關係，照著下列的步驟進行就可以了。）
設定 JS 監聽器代碼
首先複製下列的 JS 代碼，紅字的部分是你可以更改的資料層事件名稱，但如果沒特別需求，保留原本的就可以，藍字的部分則是 Contact Form 7 官方給的 DOM 事件名稱，這段 JS 代碼就是在注意官方的 DOM 事件有沒有出現，如果出現了，就將下方資料推送（datalayer.push）到資料層當中。
document.addEventListener('wpcf7mailsent', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'CF7_form_submission',
'FormID' : event.detail.contactFormId,
'inputs' : event.detail.inputs
});
}, false);
GTM 介面左側面板選擇「代碼」 > 右上角「新增」> 選擇「自訂 HTML」代碼 > 將上述 JS 代碼貼入，前後記得加上 script 標籤
觸發條件可以依照你的網站結構調整，如果有在網站許多不同的地方使用 CF7 的表單，那就可以使用全頁觸發，讓監聽器於每個網頁待命，一旦偵測到 DOM 事件「wpcf7mailsent」，就會推送資料到 Data Layer。
如果只有在特定頁面才會有表單，更改成特定網址的網頁瀏覽觸發條件就可以，完成設定之後將代碼命名儲存，進入 GTM 預覽模式測試。
測試自訂的 HTML 代碼是否正確運作
進入 GTM 預覽模式，我們實際走一遍表單提交流程。
如果選擇全頁觸發，上面設定的監聽器代碼會在所有頁面啟動，但因為沒有提交表單的行為發生，所以左側不會出現資料層事件「CF7_form_submission」。
當我們成功提交表單之後，會發現預覽模式的左側面板出現了 JS 監聽器代碼推送到資料層的事件「CF7_form_submission」。
到這邊，我們就透過 GTM 完成了監聽 Contact Form 7 的 DOM 事件的設定，設定的「自訂 HTML」代碼完全取代了 GTM4WP 所做的工作 ，接下來只要依照之前的步驟去設定「自訂事件」觸發條件以及 GA4 事件代碼就可以了。
這段 JS 代碼也會如同 GTM4WP 外掛一樣，將使用者填寫表單的欄位資料一併顯示在資料層當中（如下圖），方便行銷人員使用「資料層變數」取用，一同將參數傳送到 GA4。
（關於資料層變數的介紹，可以參考文章：GTM 變數介紹：資料層變數）
總結一下
針對知名的 Contact Form 7 表單外掛，我們提供了兩種方法，都可以協助你解決問題，更重要的是，都是免費的，不需要額外花費老闆分毫，也不需要麻煩工程師，行銷人員自己就可以解決。（雖這麼說，但 JS 代碼上架之前，還是給工程師過目一下，確保不會影響網站運作。）
希望這篇文章可以幫助到因為沒有感謝頁面而不知道該如何設定「表單提交」追蹤事件的行銷人員，如果有幫助到，不用斗內也不用按讚，幫我們多多分享給需要的朋友就可以了：）
延伸閱讀
如果你很喜歡這篇文章並且覺得內容有幫助，又剛有些多餘時間，歡迎看看其它文章，繼續探索（這坑？這地獄？這片樂土？）
同時，如果對於內容有疑問或是建議，也歡迎你留言告訴我們：）
