2020-10-24 / 閱讀時間 19 分鐘

設定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。

事件名稱 觸發時機
wpcf7invalid 在Ajax表單成功提交,但郵件因欄位內容有誤而未寄出時觸發
wpcf7spam 在Ajax表單成功提交,但郵件因被偵測為spam而未寄出時觸發
wpcf7mailsent 在Ajax表單成功提交,且郵件成功寄出時觸發
wpcf7mailfailed 在Ajax表單成功提交,但郵件在寄送過程中失敗時觸發
wpcf7submit 無視其他狀況,只要Ajax表單成功提交即觸發

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

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

方法一 方法二
工具 Controls for Contact Form 7 (Analytics & Tracking)外掛 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屬性則設定為表單名稱。

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

Controls for Contact Form 7 (Analytics & Tracking)外掛檔案

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

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

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

步驟一:安裝並設定外掛

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

設定Contact Form 7事件追蹤及目標追蹤-1

步驟二:測試事件追蹤

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

設定Contact Form 7事件追蹤及目標追蹤-3

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

設定Contact Form 7事件追蹤及目標追蹤-4

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

在第二部分中(步驟三到六),將分四步驟完成目標追蹤設定。

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

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

設定Contact Form 7事件追蹤及目標追蹤-5

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

設定Contact Form 7事件追蹤及目標追蹤-6-2

步驟四:填寫目標說明

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

設定Contact Form 7事件追蹤及目標追蹤-7

步驟五:填寫目標詳情

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

事件名稱 觸發時機 事件類別名稱 事件動作名稱 事件標籤名稱
Form Submitted 表單成功提交 Contact Form Submit 依表單名稱而變
Form Mail Sent 表單成功提交且郵件寄出 Contact Form Sent 依表單名稱而變
Form Mail Failed 表單成功提交但郵件寄出失敗 Contact Form Error 依表單名稱而變
Form Considered Spam 表單成功提交但郵件可能因被偵測為spam而未寄出 Contact Form Spam 依表單名稱而變

設定Contact Form 7事件追蹤及目標追蹤-8

步驟六:測試目標追蹤

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

設定Contact Form 7事件追蹤及目標追蹤-9

方法二:藉由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的工作區。

設定Contact Form 7事件追蹤及目標追蹤-10

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

設定Contact Form 7事件追蹤及目標追蹤-11

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

設定Contact Form 7事件追蹤及目標追蹤-12

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

設定Contact Form 7事件追蹤及目標追蹤-13

將以下代碼貼入編輯區中。此處以新增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>

設定Contact Form 7事件追蹤及目標追蹤-14

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

設定Contact Form 7事件追蹤及目標追蹤-15

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

設定Contact Form 7事件追蹤及目標追蹤-17

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

設定Contact Form 7事件追蹤及目標追蹤-18

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

設定Contact Form 7事件追蹤及目標追蹤-19

步驟二:測試資料層事件

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

設定Contact Form 7事件追蹤及目標追蹤-20-1

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

設定Contact Form 7事件追蹤及目標追蹤-21-1

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

設定Contact Form 7事件追蹤及目標追蹤-22

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

設定Contact Form 7事件追蹤及目標追蹤-23-2

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

設定Contact Form 7事件追蹤及目標追蹤-24-2

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

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

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

設定Contact Form 7事件追蹤及目標追蹤-26

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

設定Contact Form 7事件追蹤及目標追蹤-27

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

設定Contact Form 7事件追蹤及目標追蹤-28

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

設定Contact Form 7事件追蹤及目標追蹤-29

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

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

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

設定Contact Form 7事件追蹤及目標追蹤-30

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

設定Contact Form 7事件追蹤及目標追蹤-31

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

設定Contact Form 7事件追蹤及目標追蹤-32

步驟五:測試資料層變數

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

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

設定Contact Form 7事件追蹤及目標追蹤-33

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

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

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

設定Contact Form 7事件追蹤及目標追蹤-34

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

設定Contact Form 7事件追蹤及目標追蹤-35

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

設定Contact Form 7事件追蹤及目標追蹤-36

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

設定Contact Form 7事件追蹤及目標追蹤-37

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

設定Contact Form 7事件追蹤及目標追蹤-38

往下滑倒Google Analytics(分析)設定,點擊下拉選單,選擇新增變數。

設定Contact Form 7事件追蹤及目標追蹤-39

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

設定Contact Form 7事件追蹤及目標追蹤-40

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

設定Contact Form 7事件追蹤及目標追蹤-41

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

設定Contact Form 7事件追蹤及目標追蹤-42

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

設定Contact Form 7事件追蹤及目標追蹤-43

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

設定Contact Form 7事件追蹤及目標追蹤-44

步驟七:測試事件追蹤

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

設定Contact Form 7事件追蹤及目標追蹤-45

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

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

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

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

設定Contact Form 7事件追蹤及目標追蹤-6-2

步驟九:填寫目標說明

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

設定Contact Form 7事件追蹤及目標追蹤-7

步驟十:填寫目標詳情

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

設定Contact Form 7事件追蹤及目標追蹤-46

步驟十一:測試目標追蹤

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

設定Contact Form 7事件追蹤及目標追蹤-47

結論

本文共介紹了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

分享:
訂閱FirstHatch一起孵,聊聊有興趣的主題