Skip to main content

這篇文章將說明如何使用 Contact Form 7 提供的瀏覽器事件,並透過 Google Tag Manager 與 Google Analytics 來進行表單提交數據追蹤。

Contact Form 7 是一個許多人使用的 WordPress 的表單套件,網路行銷人在進行表單追蹤時非常有機會與它交手,而追蹤表單提交非常重要,因為這是訪客成為客戶的不可缺少過程。

你還可以在這裡找到更多我撰寫的表單追蹤相關內容。

為什麼需要這篇文章?

雖然使用 GTM 內建的表單監聽器也能進行表單追蹤,但本文章所使用的方法,使你能進一步拿到使用者所輸入的每個欄位值

如果想要重現與我一樣的測試環境,你可以到 Contact Form 7 的 Demo Site 並透過 Adswerve 來暫時安裝 GTM 到該網站裡 (此插件的使用方法在我的免費課程有手把手教學),接著開啟 GTM 預覽模式,再建立表單觸發條件,直接對該表單做提交即可。

如何使用 Contact Form 7 內建事件

你可以下載我做好的容器設定檔(點擊連結後滑鼠右鍵接著按另存)並匯入你的容器,或者跟隨以下步驟進行設定。

CF7 開發者在表單提交時,丟了一個事件出來並附帶欄位資訊,我們只要接住事件就可以取得表單提交的相關資訊。

我們會透過 addEventListener() 來捕獲瀏覽器事件,捕獲後將資料推送到資料層,最終再透過 GTM 的自訂事件觸發條件,來對表單提交進行追蹤。

1. 建立事件監聽器

1.1 請複製以下程式碼。

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

1.2 到 GTM 建立一個自訂 HTML 代碼,將程式貼上,並為它設定 All Pages 觸發條件

2. 建立一個自訂事件觸發條件

事件名稱為 cf7submission

3. 建立代碼並設定觸發條件

接著將觸發條件設定到你想要啟動的代碼,例如建立一個 Google Analytics 事件代碼

4. 測試

開啟預覽模式進行測試,提交表單後,可以在事件序列看到出現自訂事件

點擊事件再點擊資料層,即可進一步查看推送到資料層的資料

到這裡,表單提交行為已經完成追蹤。

5. 建立資料層變數

5.1 取得使用者所輸入的文字

上圖可以看到 response 欄位存有使用者輸入的值,假設要拿取 your-message 欄位,也就是陣列第 2 個物件的話,

就要建立資料層變數欄位名稱為 response.2.value

再次到預覽模式,點擊事件再點擊變數,來測試資料層變數

5.2 取得表單 ID

如果網站上有多個表單,可透過表單 ID 來進行區分

5.3 測試

Damon Liao

嗨,我是大門,我是大朵數位創辦人,我同時擁有網路行銷以及資訊背景,在 2014 年我開始使用 Google Analytics 與 Ads 並且獲得認證證書,在 2015 年我開始使用 Google Tag Manager,在 2017 年我開始使用 BigQuery,每年經手超過千萬預算,規劃商業智慧與行銷自動化應用。