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