如何用Google Tag Manager (GTM)有效地跟蹤表單Wpform提交
目錄
- 引言
- 設(shè)置Google Analytics 4
- 初次設(shè)置Google Analytics 4
- 使用GA4設(shè)置助手切換到GA4
- 將代碼添加到站點(diǎn)
- 測試站點(diǎn)代碼
- 使用Google Tag Manager
- 創(chuàng)建GTM賬戶
- 將GTM代碼添加到站點(diǎn)
- 創(chuàng)建觸發(fā)器
- 添加標(biāo)簽
- 常見問題
- 是否會(huì)記錄所有WPForms提交?
- 如何跟蹤有感謝頁面的提交?
1. 引言
你準(zhǔn)備好提升你的表單分析能力了嗎?隨著標(biāo)準(zhǔn)的Universal Analytics屬性將在2023年7月1日停用,是時(shí)候擁抱Google Analytics 4 (GA4),Google下一代測量解決方案了。在這本全面指南中,我們將帶你一步步設(shè)置GA4,并使用Google Tag Manager (GTM)有效地跟蹤表單提交。
如果你希望在不處理代碼或代碼片段的情況下獲取分析數(shù)據(jù),并希望在WordPress儀表盤中輕松查看報(bào)告,我們強(qiáng)烈建議你閱讀本文,了解一種更簡單的方式來獲取分析數(shù)據(jù)。
2. 設(shè)置Google Analytics 4
初次設(shè)置Google Analytics 4
為了我們的文檔目的,這是首次設(shè)置Google Analytics。因此,我們將遵循Google的文檔來設(shè)置和使用Google Analytics 4。
一旦設(shè)置完成,你將獲得一個(gè)Stream和Measurement ID。
使用GA4設(shè)置助手切換到GA4
然而,如果你是從Universal Analytics切換過來,GA4設(shè)置助手是你的最佳助手。這個(gè)便捷的工具自動(dòng)創(chuàng)建Measurement ID和Data Stream,確保順利過渡到新平臺(tái)。
在按照Google的設(shè)置說明操作后,我們需要將一些代碼復(fù)制并粘貼到我們的網(wǎng)站頁面,以便開始跟蹤。
將代碼添加到站點(diǎn)
為了將此代碼添加到我們的網(wǎng)站,我們將使用WPCode – Insert Headers and Footers插件。安裝并激活插件后,只需按照屏幕上的說明添加自定義代碼片段。代碼類型選擇HTML片段,位置應(yīng)設(shè)置為全站頭部。
一旦復(fù)制了這個(gè)代碼片段,你可以通過Google測試,確保其接收信息。然而,請記住,首次設(shè)置分析時(shí),可能需要24-48小時(shí)才能開始看到數(shù)據(jù)返回給Google。
測試站點(diǎn)代碼
現(xiàn)在我們可以停在這里,并將在24-48小時(shí)內(nèi)開始接收數(shù)據(jù)。然而,在本教程中,我們希望使用GTM,以便我們可以針對(duì)網(wǎng)站上的特定表單提交進(jìn)行跟蹤。
記下你在Google提供的腳本中看到的G編號(hào)。這是你的Measurement ID號(hào),在后續(xù)步驟中需要用到。
3. 使用Google Tag Manager
創(chuàng)建GTM賬戶
接下來,讓我們深入了解Google Tag Manager (GTM),并像專業(yè)人士一樣使用它來跟蹤表單提交。
在Google的Tag Manager中,由于這是我們首次設(shè)置這些內(nèi)容,我們需要先在GTM中創(chuàng)建一個(gè)賬戶。
按照屏幕上的說明創(chuàng)建賬戶。
有關(guān)設(shè)置GTM的更多信息,請查看此教程。
一旦你為GTM設(shè)置了賬戶,你將被要求將兩個(gè)代碼片段復(fù)制到你的網(wǎng)站上。我們將再次使用WPCode插件將這些腳本添加到站點(diǎn)。
其中一個(gè)腳本將添加到你的網(wǎng)站頭部。
將GTM代碼添加到站點(diǎn)
第二個(gè)腳本需要添加到打開body標(biāo)簽之后。
一旦你復(fù)制了這些代碼片段,你將能夠點(diǎn)擊測試按鈕,以確保Google能夠讀取信息。
創(chuàng)建觸發(fā)器
第一步是創(chuàng)建一個(gè)觸發(fā)器,當(dāng)成功提交表單后出現(xiàn)確認(rèn)消息時(shí),該觸發(fā)器將被激活。
為此,從GTM的儀表盤中,點(diǎn)擊觸發(fā)器和新建。
你將被要求命名觸發(fā)器,然后選擇觸發(fā)器類型。由于我們希望捕獲特定表單的提交,因此我們將使用用戶交互元素可見性。當(dāng)確認(rèn)消息的容器顯示在頁面上時(shí),這個(gè)觸發(fā)器就會(huì)觸發(fā)。
選擇此項(xiàng)后,你將看到一個(gè)下拉菜單,可以選擇選擇方法的ID或CSS選擇器。我們將選擇CSS,然后輸入.wpforms-confirmation-container-full
。
我們建議將觸發(fā)器設(shè)置為當(dāng)頁面上檢測到CSS類名時(shí)激活。這確保了與使用AJAX提交的表單的兼容性。通過將觸發(fā)器設(shè)置為1%可見性并啟用“觀察DOM變化”,你將確保觸發(fā)器在所有情況下可靠觸發(fā)。
有關(guān)如何創(chuàng)建觸發(fā)器的更多信息,請閱讀Google的相關(guān)文章,以獲取進(jìn)一步的逐步信息。
添加標(biāo)簽
觸發(fā)器到位后,是時(shí)候使用你的Measurement ID創(chuàng)建事件標(biāo)簽了。
為此,從Tag Manager儀表盤中,選擇標(biāo)簽,然后點(diǎn)擊新建。和之前一樣,你需要給你的標(biāo)簽起一個(gè)對(duì)你有意義的名稱,然后點(diǎn)擊標(biāo)簽配置框。
對(duì)于標(biāo)簽類型,選擇Google Analytics,然后選擇Google Analytics: GA4事件。
要完成此連接,需要Measurement ID號(hào)。你需要復(fù)制并粘貼你在最初設(shè)置分析時(shí)獲得的這個(gè)號(hào)碼。
Measurement ID號(hào)以G開頭,取代了你之前在Google Universal Analytics中使用的UA號(hào)。如果你需要幫助定位Measurement ID號(hào),請查看相關(guān)文檔。
輸入ID號(hào)后,你需要給你的事件命名,這個(gè)名稱將用于跟蹤你的提交。
Google推薦了一些已經(jīng)預(yù)編程以接受某些參數(shù)的事件名稱。要獲取Google事件推薦的完整列表,請查看相關(guān)文章。
一旦所有部分就位,你的事件報(bào)告將開始捕獲所有提交后顯示確認(rèn)消息的表單提交信息。請注意,可能需要24-48小時(shí)才能開始看到你的事件捕獲并記錄信息。
4. 常見問題
Q: 是否會(huì)記錄所有WPForms提交? A: 如果你在提交表單時(shí)顯示確認(rèn)消息,是的。此教程將記錄所有表單提交。
Q: 如何跟蹤有感謝頁面的提交? A: 如果你在確認(rèn)標(biāo)簽上使用WPForms重定向,你可以將觸發(fā)器設(shè)置為使用頁面查看,而不是CSS選擇器。你可以在此輸入你的感謝頁面的URL。