如何用 GTM 設定 Contact Form 7 的表單提交追蹤事件?
我們之前曾經介紹過幾個追蹤表單提交的方式,除了可以使用 GA4 加強型事件評估中的「 表單互動」以外,在文章『如何用 GTM 設定 GA4「表單提交」事件』以及『如何用 Data Layer Push 設定 GTM「表單提交」事件?』中,也介紹了幾個追蹤使用者是否有成功提交表單的方式。
但是表單設計百百種,不見得每一種追蹤方式都能適用於所有表單,今天我們要分享的是針對 WordPress 中著名的表單外掛「 Contact Form 7」的追蹤方式,因為不管是 GA4 的「 表單互動」事件或是 GTM 的「 表單提交」觸發條件,都無法於 Contct Form 7 上正確運作。
這個方法的好處是,從頭到尾都不需要工程師的協助便可以完成追蹤事件的設定,對於獨自經營網站且沒有工程師協助推送資料到 Data Layer 的朋友可謂是一大福音。
在開始之前,如果還不認識資料層(Data Layer)的朋友,建議可以先去看這篇文章:「 Data Layer 資料層是什麼?」,看完之後,再看:「如何用 Data Layer Push 設定 GTM「表單提交」事件?」,可以幫助你更容易理解接下來的設定教學。
但如果你趕時間,只想要趕快設定好表單提交追蹤事件,這兩篇不看也不打緊,直接跟著接下來的步驟操作就可以。
為什麼 CF7 無法用一般表單追蹤方式?
最主要的原因就是,不管是使用 GA4 加強型事件評估中預設的「 表單互動」或是 GTM 的內建觸發條件「 表單提交」來啟動代碼,都存在一個通病,那就是即便使用者未將 Contact Form 7 的表單欄位填寫完整,只要按下「 傳送」或「 提交表單 」按鈕,追蹤代碼仍會被觸發,這可能會影響追蹤數據的準確性。
使用 Contact Form 7 的朋友可以試試看,在 GTM 預覽模式下,不填寫任何表單欄位直接點擊「 傳送」,儘管表單可能會因為有欄位未填寫而顯示錯誤訊息,但在 GTM 觸發條件「 表單提交」以及 GA4「 表單互動」都有設定的情況下,你依然會看到 GTM 預覽模式面板左側出現來自資料層的 form_submit 事件。
這種情況其實在很多不同類型的表單中都會發生。即使在表單提交觸發條件的設置中勾選了「 檢查驗證」選項,用於追蹤「 表單提交 」事件的代碼仍可能在資料未完整填寫的情況下被啟動,甚至是不管表單提交成功或是出現錯誤,代碼都不會啟動。
會發生這種情況大部分都是因為你所使用的表單是用 AJAX 的方式進行提交,這樣的提交方式,不管使用者是提交成功或是失敗,畫面都不會重新載入,而是在 原表單畫面 顯示成功或是錯誤訊息給你,如下圖:
如果是這種情況的表單,就算是有勾選「 檢查驗證」也沒有用,這也是為什麼我們在之前的文章中,都會建議大家如果可以的話,盡可能 使用 Data Layer 的方式來建立表單提交追蹤事件 。
安裝 GTM4WP
在了解到會有追蹤錯誤的情況發生之後,我們開始來設定解決方式,會來看這篇文章想必你已經是在使用 WordPress Contact form 7 的表單外掛,接下來,我們需要去安裝另一個外掛「 GTM4WP 」。
「 GTM4WP 」是一款方便的 WordPress 外掛,它讓安裝和管理 GTM 代碼變得更加簡單。只需輸入你的 GTM 容器 ID,這個外掛就能將 GTM 容器安裝到你的 WordPress 網站上。它還與一些著名的 WordPress 外掛整合,能夠自動將資料添加到資料層(Data Layer),這對於那些沒有工程師支援的網站管理者或行銷人員來說,提供了更具彈性的追蹤事件設置選項。
安裝完畢之後, 你可以在 WP 後台的「設定」找到 GTM4WP 的介面。
GTM4WP 介面 > 上方頁籤選擇「 整合功能」> 選擇「 Contact Form 7」> 「 打勾」啟動資料層事件 > 「 儲存設定 」
就這麼簡單,完成之後,使用者在操作表單時,就會有相對應的事件傳送到資料層(Data Layer),我們一樣可以透過 GTM 預覽模式 確認。
GTM 預覽模式確認 CF7 資料層事件
來到 GTM 預覽模式 > 操作一次 錯誤的表單填寫流程 > 按下「 傳送 」 > 觀察預覽模式左側面板出現的訊息。
在預覽模式中,我們會看到左側出現了「gtm4wp.contactForm7xxxxx」開頭的資料層事件,分別是「gtm4wp.contactForm7InvalidInput」以及「gtm4wp.contactForm7Submitted」。
儘管表單提交失敗,但 GTM4WP 仍然提供了一個表單提交的資料層事件。不過,這並不是我們真正需要的事件,這裡只是為了展示當表單提交出錯時,GTM4WP 會向資料層推送什麼樣的事件。
現在,讓我們嘗試一次正確的表單提交。在操作後,在預覽模式的左側,我們將會看到相應的資料層事件資訊。
在表單成功提交之後,gtm4wp 給了一個 新的資料層事件「gtm4wp.contactForm7MailSent」 ,而我們將會用這個事件來自訂觸發條件。
因為從上面的範例可以看到,在提交資料不完整的表單時,資料層並沒有這個事件,提交正確的表單之後,資料層就收到了這個事件,表示用「gtm4wp.contactForm7MailSent」是可以幫我們在正確的時間點觸發我們要的「 表單提交 」追蹤事件代碼。
為什麼我們用 gtm4wp.contactForm7MailSent 而不是 gtm4wp.contactForm7Submitted ?
這是因為不管表單成功提交或是失敗,gtm4wp.contactForm7Submitted 總是會出現在資料層事件中,這不是我們要的結果(正常來說應該是只有成功的時候給 gtm4wp.contactForm7Submitted,失敗時則否 ),但這個問題是來自於 CF7 ,跟 GTM4WP 無關,只有 gtm4wp.contactForm7MailSent 是在成功提交表單之後才會出現,因此我們會用它來設定觸發條件。
設定「自訂事件」觸發條件類型
GTM 介面左側面板選擇「 觸發條件」 > 右上角選擇「 新增」> 觸發條件類型選擇「 自訂事件 」
事件名稱欄位輸入「 gtm4wp.contactForm7MailSent 」> 命名後儲存
到這邊,就完成了觸發條件設定,未來當使用者成功提交表單之後,資料層出現「 gtm4wp.contactForm7MailSent 」,我們的觸發條件就會被滿足。
設定 GA4 「表單提交」事件代碼
GTM 介面左側面板選擇「 代碼」 > 右上角「 新增」 > 「 Google Analytics(分析)」> 「 Google Analytics(分析):GA4 事件 」
事件名稱輸入「 CP7_form_submit」> 選擇剛剛設定的「 自訂事件」觸發條件 > 命名後儲存
(事件名稱的命名也可以直接覆蓋原 GA4 的表單提交事件名稱「 form_submit」,這邊是為了示範讓其容易辨識,因此這樣命名,如果要覆蓋原 GA4 事件名稱, 請記得關閉加強型事件評估中的「表單互動」 )
這樣就完成「 表單提交 」追蹤事件代碼的設定了,接下來我們到預覽模式再確認一下,代碼是否有如預期正常觸發。
預覽模式確認事件代碼是否正常運作
在我們正確提交表單之後,觀察 GTM 預覽模式左側面板是否有出現「 gtm4wp.contactForm7MailSent」以及「 表單提交 」事件代碼是否有被啟動。
如果一切順利,你會看到以下畫面:
接著來到 GA4 的 Debug View 確認 GA4 是否有接收到事件。
OK,搞定,這樣就可以在只有使用者成功提交表單時才啟動追蹤事件的代碼了,如果你提交不完整的表單,但是代碼依然被啟動,請照著上面的程序再檢查一次,只要設定正確,是不可能會出現這種情況的。
如果你不想安裝 GTM4WP(進階)
可能因為某些因素,你無法安裝 GTM4WP 的外掛,或是不想讓網站又多一個外掛, 同時你看到 Javascript 不會頭暈想吐的話 ,那可以自己寫一段 Javascript 來監聽 Contact Form 7 的 DOM 事件。
Contact Form 7 官方有提供幾個在特定表單事件之後會出現的 DOM 事件 ,你會在下圖看到幾個有點熟悉的東西,例如「wpcf7mailsent」以及「wpcf7submit」。
這些 DOM 事件會在使用者成功提交表單以及同時提交了信箱地址的時候出現,我們可以用 JS 監聽器來監視這些事件,然後跟 GTM4WP 一樣,推送事件到資料層讓我們的「 自訂事件 」觸發條件使用。
(如果這邊不理解沒關係,照著下列的步驟進行就可以了。)
設定 JS 監聽器代碼
首先 複製下列的 JS 代碼,紅字的部分是你可以更改的資料層事件名稱,但如果沒特別需求,保留原本的就可以,藍字的部分則是 Contact Form 7 官方給的 DOM 事件名稱,這段 JS 代碼就是在注意官方的 DOM 事件有沒有出現,如果出現了,就將下方資料推送(datalayer.push)到資料層當中。
document.addEventListener('wpcf7mailsent', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'CF7_form_submission',
'FormID' : event.detail.contactFormId,
'inputs' : event.detail.inputs
});
}, false);
GTM 介面左側面板選擇「 代碼」 > 右上角「 新增」> 選擇 「自訂 HTML」代碼 > 將上述 JS 代碼貼入,前後記得加上
script
標籤
觸發條件可以依照你的網站結構調整,如果有在網站許多不同的地方使用 CF7 的表單,那就可以使用全頁觸發,讓監聽器於每個網頁待命,一旦偵測到 DOM 事件「wpcf7mailsent」,就會推送資料到 Data Layer。
如果只有在特定頁面才會有表單,更改成特定網址的 網頁瀏覽觸發條件 就可以,完成設定之後將代碼命名儲存,進入 GTM 預覽模式測試。
測試自訂的 HTML 代碼是否正確運作
進入 GTM 預覽模式,我們實際走一遍表單提交流程。
如果選擇全頁觸發,上面設定的監聽器代碼會在所有頁面啟動,但因為 沒有提交表單的行為發生,所以左側不會出現資料層事件「 CF7_form_submission 」。
當我們成功提交表單之後,會發現預覽模式的左側面板出現了 JS 監聽器代碼推送到資料層的事件「 CF7_form_submission 」。
到這邊,我們就透過 GTM 完成了監聽 Contact Form 7 的 DOM 事件的設定,設定的「 自訂 HTML」代碼完全取代了 GTM4WP 所做的工作 ,接下來只要依照 之前的步驟去設定「 自訂事件 」觸發條件以及 GA4 事件代碼就可以了。
這段 JS 代碼也會如同 GTM4WP 外掛一樣,將使用者填寫表單的欄位資料一併顯示在資料層當中(如下圖),方便行銷人員使用「 資料層變數 」取用,一同將參數傳送到 GA4。
(關於資料層變數的介紹,可以參考文章: GTM 變數介紹:資料層變數 )
總結一下
針對知名的 Contact Form 7 表單外掛,我們提供了兩種方法,都可以協助你解決問題,更重要的是,都是免費的,不需要額外花費老闆分毫,也不需要麻煩工程師,行銷人員自己就可以解決。(雖這麼說,但 JS 代碼上架之前,還是給工程師過目一下,確保不會影響網站運作。)
希望這篇文章可以幫助到因為沒有感謝頁面而不知道該如何設定「表單提交」追蹤事件的行銷人員,如果有幫助到,不用斗內也不用按讚,幫我們多多分享給需要的朋友就可以了:)