GTM上對Contact Form 7做表單跟蹤(GA4)

Google Tag Manager Haran 4天前 125次瀏覽 0條留言

這一篇介紹如何對Contact Form 7做表單跟蹤,假設我現在要對 https://www.haranhuang.com/contact-form-7.html 裡的表單提交做追蹤:

GTM上對Contact Form 7做表單跟蹤(GA4)

Contact Form 7表單提交追蹤實現有多種方式:

  • 一種是基於元素可見度,因為Contact Form 7表單提交成功會在頁面顯示特定資訊。
  • 一種是基於Contact Form 7的API提供的一些Dom事件。

 

方法一:元素可見度觸發器

Contact Form 7表單提交成功會顯示(如果你的沒有類似顯示,這種方法就不適用,請直接看下一種方法):

GTM上對Contact Form 7做表單跟蹤(GA4)

查看這段話的源碼:

GTM上對Contact Form 7做表單跟蹤(GA4)

有class是wpcf7-response-output,可以用CSS選取器定位。

設定觸發器

GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「元素可見度」,命名為“表單提交示範”,然後做如下設定:

GTM上對Contact Form 7做表單跟蹤(GA4)

 

元素選擇器裡之所以設定為div.wpcf7-response-output,是因為這個class是在div裡,具體看源碼。

設定代碼

GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics(分析):GA4 事件」,命名為“表單提交”,做如下設定:

GTM上對Contact Form 7做表單跟蹤(GA4)

這樣就可以實現事件跟蹤。

預覽調試

接下來就是預覽調試:

GTM上對Contact Form 7做表單跟蹤(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”,然後做如下設定:

GTM上對Contact Form 7做表單跟蹤(GA4)

變數

從代碼裡,可以知道變數是formId和response

GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」,命名為 “formID”, 然後做如下設定:

GTM上對Contact Form 7做表單跟蹤(GA4)

同樣的方式去設定response。

觸發器

從代碼裡,可以知道event是cf7submission

GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」,命名為“Custom Event(Contact Form 7)”,然後做如下設定:

GTM上對Contact Form 7做表單跟蹤(GA4)

 

 

代碼

最後就是設定代碼,GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics(分析):GA4 事件」,命名為“Event—Form Submit Tracking(Contact Form 7)”,做如下設定:

GTM上對Contact Form 7做表單跟蹤(GA4)

 

預覽

接下來就是預覽調試:

GTM上對Contact Form 7做表單跟蹤(GA4)

事件如預期觸發。

延伸閱讀:


如果您在操作上仍有任何疑問,歡迎留言交流,或加入:Google Analytics 4交流社團發問
Like (1)
發佈我的留言
取消留言
表情 贴图 加粗 删除线 居中 斜体

Hi,*为發佈留言必須填寫。

  • 顯示名稱*
  • 電子郵件地址*
  • 個人網站網址