這篇文章將說明如何使用 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 測試