GTM上對Klaviyo Forms做表單跟蹤(GA4)

這一篇介紹如何在GTM上對Klaviyo Forms做表單跟蹤。

實現方式

Klaviyo Forms有API支持，當成功提交訂單的時候會觸發klaviyoForms，可以利用它去發送事件，如：

<script>
window.dataLayer = window.dataLayer || [];
window.addEventListener("klaviyoForms", function(e) { 
  if (e.detail.type == 'submit') {
	dataLayer.push({
		'event' : 'klaviyo',
		'formId' : e.detail.formId,
		'formTitle' : e.detail.metaData.$source
	});
  }
});
</script>

設定過程

添加Klaviyo Forms代碼

在GTM中點擊代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“Klaviyo – Form listener”，然後做如下設定：

變數

從代碼裡，可以知道變數是formId和formTitle。

在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “DLV – Klaviyo – FormId”, 然後做如下設定：

同理設定DLV – Klaviyo – FormTitle。

觸發器

從代碼裡，可以知道event是klaviyo。

在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“Klaviyo form listener event”，然後做如下設定：

代碼

最後就是設定代碼。

在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“GA – Event – Klaviyo form submission”，做如下設定：

預覽

接下來就是預覽調試，你可以用以下任意方法：

• 利用Google Analytics 4中的DebugView去測試
• 新版Google Tag Manager 預覽模式指南——Tag Assistant

最後還需要將事件參數在GA4的自訂定義裡註冊。