如果你的網站使用Klaviyo Forms收集電子報訂閱、折扣碼申請或潛在客戶資料，你可能會遇到以下問題：
- 有多少使用者成功提交Klaviyo表單？
- 哪個Klaviyo Popup轉換率最高？
- 如何將Klaviyo表單提交同步到GA4？
本篇教學將介紹如何透過GTM監聽Klaviyo Forms的提交事件，並將資料傳送到GA4，以便後續進行轉換分析。
Klaviyo Forms追蹤原理
Klaviyo Forms提供JavaScript事件監聽功能。
當使用者成功提交表單時，可以取得表單資訊，並推送至Data Layer，如：
<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 Form Listener
在GTM中點擊代碼」—「新增」—「請選擇代碼類型以開始設定…」——「自訂HTML」，命名為“Klaviyo – Form listener”，然後做如下設定：
此段程式碼的作用是，當使用者成功提交Klaviyo Form時推送自訂事件、Form ID和Form Title。
第二步：建立資料層變數
從代碼裡，可以知道變數是formId和formTitle。
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為 “DLV – Klaviyo – FormId”, 然後做如下設定：
同理設定DLV – Klaviyo – FormTitle。
第三步：設定觸發條件
從代碼裡，可以知道event是klaviyo。
在GTM中點擊「觸發條件」—「新增」—「選擇一個觸發條件類型以開始設定」——「自訂事件」，命名為“Klaviyo form listener event”，然後做如下設定：
第四步：建立GA4 Event Tag
最後就是設定代碼。
在GTM中點擊「代碼」—「新增」—「請選擇代碼類型以開始設定…」——「Google Analytics（分析）：GA4 事件」，命名為“GA – Event – Klaviyo form submission”，做如下設定：
這樣未來在 GA4 中即可分析不同 Klaviyo 表單的成效。
第五步：預覽測試
接下來就是預覽調試，在GTM裡點擊預覽調試，打開Tag Assistant ，模擬表單提交行為，然後在Tag Assistant可以看到配置的代碼準確出發。
第六步：註冊GA4自訂維度
最後還需要將事件參數在GA4的自訂定義裡註冊。