文章目錄
這一篇介紹如何對Contact Form 7做表單跟蹤,假設我現在要對 https://www.haranhuang.com/contact-form-7.html 裡的表單提交做追蹤:
Contact Form 7表單提交追蹤實現有多種方式:
- 一種是基於元素可見度,因為Contact Form 7表單提交成功會在頁面顯示特定資訊。
- 一種是基於Contact Form 7的API提供的一些Dom事件。
方法一:元素可見度觸發器
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)”,做如下設定:
預覽
接下來就是預覽調試:
事件如預期觸發。
延伸閱讀: