文章目錄
這一節來講解如何在GA4中對表單互動做追蹤,有兩種方式:
- 一種是透過加強型個評估事件中的表單互動
- 一種是透過表單提交觸發條件
並不是所有的表單都可以做表單互動追蹤的,表單的程式需要滿足兩個要求:
- 表單是form結構
- 提交/確定按鈕的type是submit
以我的部落格的留言功能為例,如下圖:
表單互動追蹤先需要看程式是否符合要去,如果符合,就看form層級的有沒有唯一的class或id,需要用class或id去設定觸發條件,如上圖中id commentform就是。
加強型評估事件中的表單互動
加強型評估事件中的表單互動中內置有兩個表單互動:
- form_start:使用者第一次在工作階段中與表單互動時,事件參數包含form_id、form_name、form_destination
- form_submit:使用者提交表單時,事件參數包含form_id、form_name、form_destination、form_submit_text
設定的位置在Google Analytics 4 中,點擊 「管理」——「資料串流」——「網站串流」——「加強型評估」,只需要勾選它,就可以開啟:
更多加強型個評估事件的设定請看:Google Analytics 4 中的加強型評估事件
注意點
如果你的網站有做Facebook事件追蹤,建議不要開啟表單互動追蹤。
因為Facebook是虚拟表单调度收集跟踪事件,所以,你在GTM預覽的時候,會在Tag Assistant的Summary裡看到很多的gtm.formSubmit事件。
解決方法就是將互動表單關閉。
表單提交觸發條件
GTM裡有個表單提交觸發條件,
設定內建變數
表單觸發器包含一些內建變數,需要將其開啟,在GTM中點擊「變數」—「內建變數」—「設定」,就可以看到如下介面
各選項的意思如下:
- Form Classes (表單類別):存取 dataLayer 中的
gtm.elementClasses
鍵 (由表單觸發條件設定),結果會是表單上類別屬性的字串值。 - Form Element (表單元素):存取 dataLayer 中的
gtm.element
鍵 (由表單觸發條件設定),結果會是表單 DOM 元素的參考資料。 - Form ID (表單 ID):存取 dataLayer 中的
gtm.elementId
鍵 (由表單觸發條件設定),結果會是表單上 ID 屬性的字串值。 - Form Target (表單目標):存取 dataLayer 中的
gtm.elementTarget
鍵 (由表單觸發條件設定)。 - Form Text (表單文字):存取 dataLayer 中的
gtm.elementText
鍵 (由表單觸發條件設定)。 - Form URL (表單網址):存取 dataLayer 中的
gtm.elementUrl
鍵 (由表單觸發條件設定)。
這裡勾選Form Classes和Form ID就可以。
設定表單提交觸發器
前面我們已經知道了Id是commentform。
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「表單提交」,命名為“表單提交示範”,然後做如下設定:
勾選“檢查驗證”:表示只有表單成功提交才會觸發,如果沒有勾選,主要用戶點擊就觸發,追蹤到的就只是點擊,是不準確,一定要勾選它。
這些條件全都符合時,啟用這項觸發條件:這裡可以限定指定的頁面,如果你不需要限定,就設置與規則運算相符匹配所有的。
有事件發生且這些條件全都符合時,啟用這項觸發條件:這裡就是設置表單的位置,用Form ID等於commentform
設定代碼
最後就是設定代碼。
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics(分析):GA4 事件」,命名為“表單提交”,做如下設定:
事件名稱定義為“form_submit_demo”。
預覽調試
更多關於預覽調試的請看:新版Google Tag Manager 預覽模式指南——Tag Assistant 和Google Analytics 4 中的偵錯模式DebugView