如果你的網站使用WordPress的Gravity Forms建立聯絡表單、詢價表單或支援工單表單，你一定會想知道：
- 有多少人成功提交表單？
- 哪個表單轉換率最高？
- 哪些流量來源帶來最多表單提交？
本篇教學將介紹如何透過GTM監聽Gravity Forms的提交事件，並將資料傳送到GA4。
實作範例
本篇以Gravity Forms官方網站的支援工單頁面作為示範：https://www.gravityforms.com/open-support-ticket/general/
目標是追蹤使用者點擊Submit並成功送出表單。
Gravity Forms表單提交事件原理
Gravity Forms 提供 JavaScript Hook gform_confirmation_loaded，當表單成功提交後，系統會觸發這個事件。
因此我們可以利用GTM建立監聽器（Listener），將提交資訊推送到Data Layer，如：
<script>
jQuery(document).ready( function() {
jQuery(document).bind('gform_confirmation_loaded', function(event, formId){
window.dataLayer.push({
'event' : 'gravityFormSubmission',
'gfformID' : formId
});
});
})
</script>
第一步：建立Gravity Forms Listener
在GTM中點擊代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“cHTML – Gravity Forms Listener”，然後做如下設定：
第二步：建立資料層變數
從剛才的程式碼可以看到變數是gfformID。
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “formID”, 然後做如下設定：
第二步：設定觸發條件
從前面的程式碼裡，可以知道event是gravityFormSubmission。
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“Custom Event(Gravity Forms)”，然後做如下設定：
第四步：建立GA4 Event Tag
最後就是設定代碼。
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“Event—Form Submit Tracking(Gravity Forms)”，做如下設定：
第五步：預覽測試
接下來就是預覽調試，在GTM裡點擊預覽調試，打開Tag Assistant ，模擬表單提交行為，然後在Tag Assistant可以看到配置的代碼準確出發：
常見問題
找不到gravityFormSubmission事件
請確認：
- Listener已發布
- Custom HTML Tag已成功執行
- 網站有載入jQuery
表單送出後沒有觸發事件
請確認：Gravity Forms是否成功提交。
只有成功送出後才會觸發gform_confirmation_loaded，若驗證失敗或必填欄位未填寫，事件不會出現。