文章目錄
這一篇介紹如何對Contact Form 7做表單跟蹤。
認識Contact Form 7
Contact Form 7是WordPress上最受歡迎的免費聯絡表單外掛。
追蹤原理
Contact Form 7表單提交追蹤實現有多種方式：
- 一種是基於元素可見度，因為Contact Form 7表單提交成功會在頁面顯示特定資訊。
- 一種是基於Contact Form 7的API提供的一些Dom事件。
假設我現在要對 https://www.haranhuang.com/contact-form-7.html 裡的表單提交做追蹤：
方法一：元素可見度觸發器
Contact Form 7表單提交成功會顯示（如果你的沒有類似顯示，這種方法就不適用，請直接看下一種方法）：
查看這段話的源碼：
有class是wpcf7-response-output，可以用CSS選取器定位。
設定觸發器
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」，命名為“表單提交示範”，然後做如下設定：
元素選擇器裡之所以設定為div.wpcf7-response-output，是因為這個class是在div裡，具體看源碼。
設定代碼
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“表單提交”，做如下設定：
這樣就可以實現事件跟蹤。
預覽調試
接下來就是預覽調試：
事件如預期觸發。
方法二：Dom Event
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>
添加Contact Form 7 Listener代碼
在GTM中點擊代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“cHTML – Contact Form 7 Listener”，然後做如下設定：
變數
從代碼裡，可以知道變數是formId和response。
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “formID”, 然後做如下設定：
同樣的方式去設定response。
觸發器
從代碼裡，可以知道event是cf7submission。
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“Custom Event(Contact Form 7)”，然後做如下設定：
代碼
最後就是設定代碼，在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“Event—Form Submit Tracking(Contact Form 7)”，做如下設定：
預覽
接下來就是預覽調試：
事件如預期觸發。
延伸閱讀：
