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 FormSubmit依表單名稱而變
Form Mail Sent表單成功提交且郵件寄出Contact FormSent依表單名稱而變
Form Mail Failed表單成功提交但郵件寄出失敗Contact FormError依表單名稱而變
Form Considered Spam表單成功提交但郵件可能因被偵測為spam而未寄出Contact FormSpam依表單名稱而變

設定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一起孵,聊聊有興趣的主題