設定Contact Form 7事件追蹤及目標追蹤的2種方法

透過廣告引導流量至網站，並誘導訪客留下聯絡資訊，可以說是常見的數位行銷策略之一。其中，表單轉換率可以說是衡量這個行銷手法的指標之一。因此，在Google Analytics設置表單的事件追蹤及目標追蹤便是網站經營前期作業的一大重點。以WordPress網站來說，Contact Form 7是最常使用的表單外掛之一，但有關Contact Form 7表單追蹤的中文內容卻不是很豐富。本文將詳細說明透過WordPress外掛及Google Tag Manager為Contact Form 7設定Google Analytics事件追蹤及目標追蹤的2種方法。

Contact Form 7的DOM events

在Contact Form 7於2017年的改版中，為了改善外掛安全性等問題，將原本常用來作為追蹤表單提交及重新導向的函數on_sent_ok移除，改為以自定義DOM events代替。

為了幫助設置Contact Form 7事件追蹤及目標追蹤時的理解，以下說明官網中列出的wpcf7invalid、wpcf7spam、wpcf7mailsent、wpcf7mailfailed、wpcf7submit等五種自定義DOM events。

設定Contact Form 7事件追蹤的方法

目前，設定Contact Form 7事件追蹤的方法都是基於外掛內的自定義DOM events。實際進行設定操作時，可以使用外掛，亦或Google Tag Manager作為輔助。本文將針對這兩種方法做說明，而在說明之前，先以下表對兩個方法做個簡單的比較。

方法一：藉由Controls for Contact Form 7 (Analytics & Tracking)外掛達成Contact Form 7事件追蹤及目標追蹤

方法一應該是最簡單、快速的方法，適合結構簡單、不需要在網站插入太多代碼的網站。

以下為本方法的目錄：

• 外掛介紹
• 第一部分：透過外掛完成事件追蹤設定的流程
  • 步驟一：安裝並設定外掛
  • 步驟二：測試事件追蹤
• 第二部分：在Google Analytics中完成目標追蹤設定的流程
  • 步驟三：進入目標設定介面
  • 步驟四：填寫目標說明
  • 步驟五：填寫目標詳情
  • 步驟六：測試目標追蹤

外掛介紹

Controls for Contact Form 7 (Analytics & Tracking)是一款免費外掛，目前的安裝數為10,000以上，主要功能是為Contact Form 7表單自動設置Google Analytics、Matomo（類似Google Analytics的服務）以及Facebook像素等的事件追蹤。次要功能有表單送出後的重新導向、停用預設CSS、停用自動段落格式化、停用聯絡表單 AJAX 傳送功能、停用HTML5輸入類型、啟用HTML5輸入類型後援、指定Google reCAPTCHA語言等等。

在Google Analytics方面，這款外掛支援透過gtag.js、analytics.js以及ga.js（舊版）等方式安裝Google Analytics的網站，而其能夠觸發的Contact Form 7事件動作共有submit、sent、error及spam等4種。

在Facebook像素方面，這款外掛會使用Contact的標準事件，並將content_category屬性設定為submit、sent、error及spam等事件類型，content_name屬性則設定為表單名稱。

另外，這款外掛的開發者目前正在製作付費版本，預計不久將來就會有更多功能可以用了。

相關文章
5個好用的Contact Form 7延伸外掛

第一部分：透過外掛完成事件追蹤設定的流程

設定流程十分簡單，在第一部分中（步驟一到二），將分兩步驟完成事件追蹤的設定。在開始設定流程前，請先確認網站已插入Google Analytics的代碼。

步驟一：安裝並設定外掛

外掛安裝完成後，在Contact Form 7表單的編輯頁中，即可看到一個名為Customize的頁籤。如下圖。該頁籤內包含了這個外掛的所有選項。本文的目的為Contact Form 7表單外掛設定Google Analytics事件追蹤及目標追蹤，故可以直接滑到最下面，勾選Analytics Tracking後，按下儲存，即完成外掛設定。

步驟二：測試事件追蹤

接著，進入事件追蹤的測試環節。進入Contact Form 7表單所在的頁面，輸入點內容，按下提交。若成功提交，則彈出成功訊息。需要注意，有些網站串接Google Analytics時，會將已登入的管理員排除，故建議在登出狀態下進行測試。

打開Google Analytics，點選即時報表中的事件，即可看到剛剛提交的表單觸發了Submit和Sent兩個事件。

第二部分：在Google Analytics中完成目標追蹤設定的流程

在第二部分中（步驟三到六），將分四步驟完成目標追蹤設定。

步驟三：進入目標設定介面

為了進一步分析轉換，一般會再繼續設定目標追蹤。在Google Analytics的管理頁面中，點選目標後，即可進入如下的目標設定頁面。

點選新增目標的按鈕，進入目標設定介面，如下圖。共有範本、智慧目標及自訂等三個選項，此處選擇自訂後，按下繼續即可。

步驟四：填寫目標說明

在目標說明介面中，自由填入目標名稱，再將目標類型指定為事件，並按下繼續。

步驟五：填寫目標詳情

最後，進入目標詳情介面，依序填寫類別、動作以及標籤。下表為這款外掛預設的4種事件的類別名稱、動作名稱和標籤名稱。在填寫欄位時，需要注意文字內容及大小寫要和下表的外掛預設一致。標籤欄可以自由填寫，建議表單名稱。完成後，按下儲存。如果想要將四個事件都設為目標，則重複本步驟即可。

步驟六：測試目標追蹤

提交表單，回到Google Analytics，點選即時報表中的轉換，即可看到剛剛提交的表單達成了Submit和Sent兩個目標。

方法二：藉由Google Tag Manager設定觸發條件達成Contact Form 7事件追蹤及目標追蹤

方法二較為複雜，但對於需要在網站上插入各種代碼的數位行銷人來說，透過Google Tag Manager來統一管理可以說是較為簡單便捷的做法。另外，網路上透過Google Tag Manager設定Contact Form 7事件追蹤的文章很多，但中文內容卻不是很豐富、詳細。

本方法參考Analytics mania網站，並經由實際測試，逐步截圖而寫成。該網站還有提供許多Google Tag Manager的教學，若有興趣，可以參考並學習。

以下為本方法的目錄：

• 第一部分：透過Google Tag Manager設定Contact Form 7事件追蹤的流程
  • 步驟一：用addEventListener()設置wpcf7submit及wpcf7mailsent的資料層事件
  • 步驟二：測試資料層事件
  • 步驟三：將資料層事件轉換為觸發條件
  • 步驟四：設定變數，提供Google Analytics事件追蹤使用
  • 步驟五：測試資料層變數
  • 步驟六：將wpcf7submit及wpcf7mailsent的資料層事件送至Google Analytics做事件追蹤
  • 步驟七：測試事件追蹤
• 第二部分：在Google Analytics中完成目標追蹤設定的流程
  • 步驟八：進入目標設定介面
  • 步驟九：填寫目標說明
  • 步驟十：填寫目標詳情
  • 步驟十一：測試目標追蹤

第一部分：透過Google Tag Manager設定Contact Form 7事件追蹤的流程

第一部分中，將透過Google Tag Manager進行事件追蹤設定。過程較為複雜與繁瑣，共分為七個步驟（步驟一到七）。在開始設定流程前，請先確認網站已插入Google Tag Manager的代碼。

步驟一：用addEventListener()設置wpcf7submit及wpcf7mailsent的資料層事件

首先，進入Google Tag Manager的工作區。

點擊代碼後，即進入管理代碼的頁面。

點擊新增後，即進入新增代碼的視窗。左上角可以自由輸入代碼的名稱，方便管理。接著，點選代碼設定的區塊，

點選代碼設定的區塊，即跳出代碼類型的選單。在自訂類別中，找到自訂HTML的選項後，點擊即可進入自訂HTML的編輯區。

將以下代碼貼入編輯區中。此處以新增wpcf7submit的資料層事件的代碼為例。注意，event的名稱cf7submit可以自由替換為其他的名稱。也就是說，如果要新增wpcf7mailsent的資料層事件，則可以將其改為cf7sent。

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

點擊下方觸發條件的區域，進入選擇觸發條件的頁面。

再點擊右上角的＋號後，即可新增觸發條件。此處需要新增一個條件，讓使用者在瀏覽網站的每個頁面時，都能夠觸發wpcf7submit的資料層事件。

新增完成後，按下儲存並回到新增代碼的編輯區，如下圖。

再按下儲存後，回到代碼管理代碼的頁面，即完成新增wpcf7submit的資料層事件的步驟。接著，重複執行步驟一，另外新增一個wpcf7mailsent的資料層事件。

步驟二：測試資料層事件

點擊右上角的預覽，開啟Tag Assistant準備進行測試。

輸入帶有Contact Form 7表單的網頁網址，並點擊Start，即可啟用預覽。

啟用完成後，會開啟一個新視窗。該視窗即為前段輸入的網址，而在視窗的右下角會有Debugger connected的訊息欄。看到這個就表示預覽有正常啟用。

回到Tag Assistant的視窗，可以看到步驟一設定的兩個代碼。

接著，填寫網頁中的表單並提交後，再回到Tag Assistant的視窗，即可看到左側多出了cf7submit及cf7sent的頁籤，也就是步驟一中設定的event名稱。到此為止，即完成資料層事件的測試，可確認資料層事件新增成功。

步驟三：將資料層事件轉換為觸發條件

在這個步驟中，我們要將步驟一設置的兩個資料層事件轉換為觸發Google Analytics事件追蹤的條件。

首先，點擊左邊選單中的觸發條件，進到觸發條件的管理頁面。

點擊右上角的新增後，進入新增觸發條件的視窗。左上角可以為這個觸發條件自由命名。命名完成後，點擊新增觸發條件，並選擇自訂事件。

插入事件後，輸入事件名稱，再按下儲存即可。需要注意的是，這裡的事件名稱需要和步驟一中設定的event名稱相同。

由於步驟一共有兩個資料層事件，故這個步驟也要重複一遍，將另一個資料層事件也轉換為觸發條件。

步驟四：設定變數，提供Google Analytics事件追蹤使用

在這個步驟中，要將Contact Form 7表單的ID設定為變數，這樣之後才可以在Google Analytics追蹤不同表單事件。

首先，點擊左邊選單中的變數，進到變數的管理頁面。

點擊下方使用者定義的變數的新增按鈕，進入新增變數的視窗。左上角同樣可以為這個變數自由命名。命名完成後，點擊新增變數，選擇資料層變數。

接著，輸入資料層變數名稱為formId後，按下儲存，即完成這個步驟。

步驟五：測試資料層變數

與步驟二相同，點擊右上角的預覽，開啟Tag Assistant及網頁等兩個視窗。

在網頁輸入表單並提交後，回到Tag Assistant的視窗。點選左欄的cf7submit或cf7sent後，選擇Variables頁籤，即可看到步驟四新增的變數formId。

步驟六：將wpcf7submit及wpcf7mailsent的資料層事件送至Google Analytics做事件追蹤

在這個步驟中，我們將把前面步驟的設定組合起來，並傳送到Google Analytics進行事件追蹤。

首先，回到代碼管理的頁面，點擊新增後，在左上角自由輸入代碼名稱，並選擇代碼類型為Google Analytics（分析）：通用Analytics（分析）。

將追蹤類型指定為事件，即可見類型、動作、標籤、值等四個事件追蹤參數的欄位。

本次以wpcf7mailsubmit的事件為例。在類型欄位中輸入為Form submit。這個名稱會出現在Google Analytics事件報表裡的事件類別。

點選動作欄位右側的圖示，從彈出的變數清單中選擇步驟四新增的變數。

可以在動作欄位的變數前，加上formID，而使整個動作欄位內容變為formID {{div - formId}}。假設Contact Form 7表單的ID為20，則在Google Analytics事件報表裡的事件動作中，會以formID 20表示。另外，其餘的標籤及值等兩個欄位，可以留白。

往下滑倒Google Analytics（分析）設定，點擊下拉選單，選擇新增變數。

新增變數的視窗中，左上角可以自由輸入變數名稱，追蹤編號欄位中，則要輸入Google Analytics的追蹤 ID。輸入完成後，按下儲存即可

輸入完成後，按下儲存並回到新增代碼的頁面。此時看到的畫面如下。

點擊下方的觸發條件，進入觸發條件選單。選擇步驟三中新增的觸發條件。

再次回到新增代碼的頁面，可看到如下的畫面。

按下儲存後，回到代碼管理的頁面。重複步驟六，完成另一個wpcf7mailsent的事件的新增。全部完成後，在代碼管理頁面中，共會存在四個代碼，其中兩個來自步驟一，另外兩個則來自本步驟。最後，按下右上角的提交，即完成第一部分Google Tag Manager的設定。

步驟七：測試事件追蹤

在步驟七中，要對前面步驟一到六的成果做驗證。在網站中，提交Contact Form 7表單後，開啟Google Analytics的即時事件報表，即可看到透過Google Tag Manager新增的兩個事件被正確的觸發。同時，事件類別以及事件動作均符合前面步驟的設置。

第二部分：在Google Analytics中完成目標追蹤設定的流程

第二部分中，將接續前面事件追蹤的設定，在Google Analytics中完成目標追蹤設定，共分為四個步驟（步驟八到十一）。這個部分因為與方法一的第二部分雷同，故會省略一些畫面截圖。

步驟八：進入目標設定介面

在Google Analytics的管理頁面中，點選目標進入目標頁面。再點選新增目標的按鈕，進入目標設定介面，如下圖。選擇自訂後，按下繼續即可。

步驟九：填寫目標說明

在目標說明介面中，自由填入名稱，再將類型指定為事件，按下繼續。

步驟十：填寫目標詳情

進入目標詳情介面，依序填寫類別、動作以及標籤。需要注意內容、大小寫、空格等均要和第一部分的步驟六中在Google Tag Manager中的設定一致。另外，事件動作的部分，在Google Tag Manager中為formID {{div - formId}}，但在設定目標時，可以直接把括號改為Contact Form 7的表單ID數字，例如formID 18。這樣的話，可以分別追蹤網站中的各個表格。

步驟十一：測試目標追蹤

重複步驟八到十，將另一個事件也設為目標。最後，提交表單進行測試。檢視即時報表中的轉換，即可看到剛剛提交的表單達成了Submit和Sent兩個目標。

結論

本文共介紹了2種為Contact Form 7設置事件追蹤及目標追蹤的方法。方法一透過外掛進行，適合需求簡單的網站。方法二，搭配Google Tag Manager進行，雖然過程繁瑣，但未來延伸性較佳，可以在未網站設置其他追蹤代碼，故對於需求複雜的網站來說較為適合。

相關文章
WordPress是什麼？超過30%市佔率的內容管理系統（CMS）
3個停用WordPress外掛的方法
製作高效能WordPress網站的Oxygen Builder網站編輯器
客製化文章版面：結合CPT UI及ACF的Elementor Pro實作教學
Dynamic Content for Elementor外掛介紹及動態內容案例
5個好用的Elementor第三方延伸外掛
我不是機器人，在WordPress網站加入Google reCAPTCHA