今天來分享一個關於如何使用Google代碼管理工具追蹤網站聯絡表單成功提交的教學，這是波哥實際操作後的一則分享，記錄在這裏，希望也能幫到有需求的人。
首先，聯絡表單通常在填寫完表單後點選提交按鈕。在傳統的方法中，我們會檢測這個提交按鈕並計算一次事件，但這種方法存在一個問題。可能出現使用者點選提交按鈕後，但某個必填欄位沒有填寫的情況。如果我們將這種情況也計算為一次事件，那麼數據的準確性就無法保證。
那麽怎麼才能追蹤正確的事件並將他們記錄在Google Analytics中呢？通常我們的聯絡表單，在提交信息後，要嘛在表單下方會出現提交成功或提交失敗的訊息，或者在點擊提交按鈕後，會清除當前表單再顯示成功或失敗的訊息。因此，針對這樣的情況，我們可以使用Google代碼管理工具的《元素可見度》的功能將只有提交成功的訊息作為觸發條件來發送給Google Analytics，從而來計算一次轉化。對於有開Google Ads的同學，這樣才能保證數據的準確性。
如何實現元素可見度來抓取成功訊息的詳細步驟
步驟一：進入Google 代理管理工具頁面，新增代碼，取名為：表單事件。
步驟二：在代碼設定中選取Google Analytics (分析): GA4 事件，在設定代碼中選取你在Google 代碼管理工具配置的GA4配置。（這個就是新增一個代碼，在代碼設定中選取Google Analytics(分析): GA4設定，評估ID前往GA4頁面中獲取，這裏不再具體展開）。
步驟三：事件名稱我們取名為:generate_lead。
步驟四：現在來到觸發條件，在視窗中我們點擊右上角的+號來新增觸發條件，並將這個觸發條件命名：成功消息觸發
步驟五：然後來到觸發條件設定，我們點擊一下再選取使用者參與下方的：元素可見度。點擊它添加到設定中。
步驟六：選取方式，我們設定為CSS選取器，然後填寫獲取的元素ID。
步驟七：這個元素ID需要在網站上的聯絡表單頁面获取，先自行測試發送一封聯絡表單，待頁面中顯示了成功的消息後進行下一步。
步驟八：在網頁右鍵選取審查元素，並選取剛剛的訊息。你會在元素源碼中看到這樣的代碼：<div class="submitform"><p class="successmessage">表單已成功提交，我們會儘快聯絡你</p></div>，所以這個successmessage就是我們要獲取的元素ID。
步驟九：將.successmessagae （注意前面有一個.)複製到元素ID中。
步驟十：啟動此觸發條件的時機我們要選取每次元素在畫面上顯示時，然後再勾選觀察DOM改變情形。（以下截图仅供参考）
注意：如果你成功消息的代碼像波哥一樣是沒有CLASS="SUCESSMESSAGE"這樣的話，你就需要像波哥一樣使用
.et-pt-contact-message > p 來作為元素ID
這樣，就設定好了所有的代碼、觸發條件，我們再回到Google代碼管理工具的工作區，點擊右上方的預覽來測試這個設定是否正常抓取成功提交表單的訊息了。通常你會在Debug頁面會看到Tag Fired就表示成功了。沒有成功的同學可能是你的元素ID不對，再檢查一下步驟和元素ID再重新測試。
一旦測試成功，我們就可以提交發布讓Google管理工具保存我們這次的修改了。這裏的教學是針對有一定動手能力並知曉如何設定Google代碼管理工具的同學而寫的。如果你覺得這個教學無法實現你想要的追蹤功能或對你來說不夠清晰的話，歡迎在下方評論區留下你的問題。
如何在Google Analystics中檢測事件是否生效：
方法一：進入GA4中的實時報告，看有無generate_lead的事件。
方法二：進入GA4的設定，在頁面中有一個DebugView看你的generate_lead事件有無出現。
待24小時後，你可以同樣進入GA4的設定，然後進入事件，並將這個generate_lead勾選為轉化。
好了，今天教學到此結束。
猜你喜歡
- 本站所有文章，如無特殊說明或標註，均為本站原創釋出。在未徵得本站同意時，禁止複製、盜用、採集、釋出本站內容。
- 本站資源僅供研究、學習交流之用，若使用商業用途，請購買正版授權，否則產生的一切後果將由下載使用者自行承擔。
- 如若本站內容侵犯了原著者的合法權益，可聯絡我們進行處理。 聯絡方式（#替換成@）：info#booooker.com
評論（0）