Shopify裡對Klaviyo Form表單做追蹤

更新時間：2025年3月18號

這篇介紹如何在Shopify裡對Klaviyo Form表單做追蹤

• 如果你已經在theme.liquid里安裝GTM，那麼可以直接在GTM做追蹤，延伸閱讀：GTM上對Klaviyo Forms做表單跟蹤(GA4)
• 如果你是在Custom Pixel裡安裝GA4，因為它是在Sandbox裡運行，不能直接追蹤，這種情形的追蹤思路是：在theme.liquid裡監聽Klaviyo，轉為Shopify analytics事件，再到Custom Pixel裡轉為dataLayer.push發送。

這篇介紹的是第二種情況。

Step 1：theme監聽Klaviyo事件

在主題裡面找到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>

Step 2：Custom Pixel裡發送事件

在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中用Custom Pixel安装Google Analytics 4

Step 3：設定GTM

設定觸發條件

在GTM中點擊「觸發條件」——「新增」——「請選擇觸發類型以開始設定…」——「自訂事件」，命名為Custom Event- Klaviyo Forms Submit Form，做以下設定：

設定變數

在GTM中點擊「變數」——「新增」——「請選擇變數類型以開始設定…」——「資料層變數」，命名為dlv_formid，做以下設定：

同理設定dlv-formtitle。

設定代碼

在GTM中點擊「代碼」——「新增」——「請選代碼發類型以開始設定…」——「Google Analytics (分析)：GA4 事件」，命名為 GA4-Event-Klaviyo Forms Submit Form, 然後做如下設定：

Step 4：預覽調試

由於Custom Pixel是在沙箱裡，所以GTM裡的直接預覽測試這種方式是使用不了的，有兩種測試方式：

一種是Custom Pixel裡Pixel Helper，在Custom  Pixel點選Test就可以測試：

可以看觸發的事件，以及裡面的發送的資料:

但這種方式只能看到成功發送的事件，如果有錯的時候，你不知道dataLayer是否發資料，這時候就要用另一種方​​式調試。

另一種是用瀏覽器的控制台，在Top這裡找到Sandbox環境，Sandbox的名字結構是web-pixcel-sandbox-Custom*****，可能會有多個

逐試，在控制台輸入dataLayer，看Custom Pixel是在哪個Sandbox運行：

就可以看dataLayer裡的資訊。

延伸閱讀：Shopify中用Custom Pixel安装Google Analytics 4