Contact Form 7是WordPress最受歡迎的聯絡表單外掛之一。當訪客送出表單後，如果你沒有進行追蹤，就無法知道有多少潛在客戶透過網站與你聯繫。
這篇文章將介紹如何透過GTM蹤Contact Form 7的表單提交事件，並將資料傳送到GA4。
認識Contact Form 7
Contact Form 7（CF7）是一款免費且廣泛使用的WordPress表單外掛，可用於建立：
- 聯絡我們表單
- 詢價表單
- 報名表單
- 意見回饋表單
由於Contact Form 7採用AJAX技術送出資料，因此頁面通常不會重新整理，傳統的頁面瀏覽（Page View）無法用來判斷表單是否成功送出。
因此，我們需要使用其他方式來進行追蹤。
Contact Form 7 表單追蹤原理
常見的實作方式有兩種：
- 方法一：利用元素可見度：當表單成功送出後，Contact Form 7 會顯示成功訊息。如果成功訊息出現在頁面上，我們可以透過 GTM 的「元素可見度觸發器」偵測該元素是否出現。
- 方法二：利用Contact Form 7 DOM Events：Contact Form 7 本身提供多種 JavaScript DOM Events，可用來判斷表單送出結果。這種方式比元素可見度更穩定，也是較推薦的實作方法。
假設我們要追蹤https://www.haranhuang.com/contact-form-7.html頁面的 Contact Form 7 表單：
方法一：使用元素可見度觸發器
步驟 1：確認成功訊息元素
當表單成功送出後，頁面會顯示類似訊息：
（如果你的沒有類似顯示，這種方法就不適用，請直接看下一種方法）。
查看網頁原始碼後可以發現：
有class是wpcf7-response-output，就是成功訊息所在的元素，可以用CSS選取器定位。
步驟 2：設定觸發器
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」，命名為“表單提交示範”，然後做如下設定：
元素選擇器裡之所以設定為div.wpcf7-response-output，是因為這個class是在div裡，具體看源碼。
步驟 3：設定代碼
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“表單提交”，做如下設定：
這樣就可以實現事件跟蹤。
步驟 4：預覽調試
使用 GTM Preview Mode 進行測試：
成功送出表單後，應可看到form_submit事件，事件正常觸發。
方法二：使用 Contact Form 7 DOM Events（推薦）
元素可見度雖然容易設定，但容易受到版型修改影響。
若網站後續調整成功訊息樣式或 HTML 結構，追蹤可能失效。
因此較建議使用 Contact Form 7 提供的 DOM Events。
Contact Form 7提供了如下 DOM events：
wpcf7invalid— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.wpcf7spam— Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.wpcf7mailsent— Fires when an Ajax form submission has completed successfully, and mail has been sent.wpcf7mailfailed— Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.wpcf7submit— Fires when an Ajax form submission has completed successfully, regardless of other incidents.
可以利用上述Dom Event去發送事件，監聽上述事件觸發，再發送自訂事件，如：
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>
步驟 1：添加Contact Form 7 Listener代碼
Contact Form 7提供事件監聽功能，我們可以在事件觸發時將資料推送到Data Layer。
在GTM中點擊代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“cHTML – Contact Form 7 Listener”，然後做如下設定：
步驟 2：建立資料層變數
根據Listener程式碼，可以取得兩個重要變數是formId和response。
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “formID”, 然後做如下設定：
同樣的方式去設定response。
步驟 3：設定觸發器
從 Listener 程式碼可看到推送的事件名稱cf7submission。
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“Custom Event(Contact Form 7)”，然後做如下設定：
步驟 4：設定代碼
最後就是設定代碼。
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“Event—Form Submit Tracking(Contact Form 7)”，做如下設定：
步驟 5：預覽測試
接下來就是預覽調試：
GA4事件正常觸發。
該選擇哪一種方法？
| 方法 | 優點 | 缺點 |
|---|---|---|
| 元素可見度 | 設定簡單、不需 JavaScript | 容易受版型變動影響 |
| DOM Events | 穩定、可取得更多資訊 | 需要額外設定監聽程式 |
如果是正式網站，建議優先採用 DOM Events 方式，追蹤會更穩定且維護成本較低。
總結
Contact Form 7的表單提交追蹤主要有兩種實作方式：
- 利用成功訊息顯示後的元素可見度進行追蹤
- 利用Contact Form 7提供的DOM Events進行追蹤（推薦）
其中DOM Events不受頁面版型影響，且可取得表單 ID、提交結果等額外資訊，是較適合長期維護的方案。
完成設定後，建議搭配GA4 DebugView進行驗證，確認事件與參數皆正確送出後再正式發布。