更新時間：2026年6月1號
這篇文章說明如何在Shopify中，針對Klaviyo Form表單提交事件進行追蹤，並整合到GA4。
在Shopify裡，追蹤Klaviyo Form主要會遇到兩種架構：
- 已在theme.liquid安裝GTM：如果你已經在theme.liquid內安裝GTM，那麼可以直接透過GTM進行事件監聽與追蹤
- 使用Shopify Custom Pixel（重點）：如果你是在Custom Pixel裡安裝GA4，因為它是在Sandbox裡運行，不能直接追蹤，這種情形的追蹤思路是：在theme.liquid裡監聽Klaviyo，轉為Shopify analytics事件，再到Custom Pixel裡轉為dataLayer.push發送。
這篇介紹的是第二種情況。
Step 1：在theme.liquid監聽Klaviyo事件
在Shopify主題的 theme.liquid中加入以下監聽程式碼：
<script>
window.addEventListener("klaviyoForms", function(e) {
if (e.detail.type == 'submit') {
Shopify.analytics.publish('klaviyo_forms', {
'form_id' : e.detail.formId,
'form_title' : e.detail.metaData.$source
});
}
});
</script>
目的：將Klaviyo Form Submit轉成 Shopify可識別的analytics event。
Step 2：在Custom Pixel轉成dataLayer事件
在Shopify Custom Pixel中加入以下程式碼：：
analytics.subscribe("klaviyo_forms", (event) => {
window.dataLayer.push({
event: "klaviyo",
form_id: event.customData.form_id,
form_title: event.customData.form_title
});
});
說明：這一步的作用是把Shopify Analytics Event轉換成GTM可讀的dataLayer事件。
Step 3：設定GTM
設定觸發條件
在GTM中點擊「觸發條件」——「新增」——「請選擇觸發類型以開始設定…」——「自訂事件」，命名為Custom Event- Klaviyo Forms Submit Form，做以下設定：
設定變數
在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為dlv_formid，做以下設定：
同理設定dlv-formtitle。
注意：變數名稱需與dataLayer裡完全一致。
設定代碼
在GTM中點擊「代碼」——「新增」——「請選代碼發類型以開始設定…」——「Google Analytics (分析)：GA4 事件」，命名為 GA4-Event-Klaviyo Forms Submit Form, 然後做如下設定：
Step 4：預覽調試
由於Custom Pixel是在沙箱裡，所以GTM裡的直接預覽測試這種方式是使用不了的，有兩種測試方式：
方法 1：Shopify Pixel Helper（建議先用）
一種是Custom Pixel裡Pixel Helper，在Custom Pixel點選Test就可以測試：
可以看觸發的事件，以及裡面的發送的資料:
但這種方式只能看到成功發送的事件，如果有錯的時候，你不知道dataLayer是否發資料，這時候就要用另一種方式調試。
方法 2：瀏覽器Console Debug（推薦進階）
另一種是用瀏覽器的控制台，在Top這裡找到Sandbox環境，Sandbox的名字結構是web-pixcel-sandbox-Custom*****，可能會有多個
逐試，在控制台輸入dataLayer，看Custom Pixel是在哪個Sandbox運行：
就可以看dataLayer裡的資訊。
總結
這套架構的核心概念是：Klaviyo Event → Shopify Analytics → Custom Pixel → dataLayer → GTM → GA4
關鍵重點：Custom Pixel不能直接抓DOM，必須透過analytics.subscribe做中轉，dataLayer是GTM唯一入口