GTM上對Contact Form 7做表單跟蹤（GA4）

文章目錄

這一篇介紹如何對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)”，做如下設定：

預覽