Shopify里跟踪Klaviyo Form表单跟踪

更新时间：2025年3月14号

这一篇介绍如何在Shopify里跟踪Klaviyo Form表单跟踪。

• 如果你是已经在theme.liquid里安装GTM，那么可以直接做跟踪，延伸阅读：Google Analytics 4 上对Klaviyo Form表单做跟踪
• 如果你只是在Custom Pixel里安装的，那么跟踪思路是：在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里的GTM代码里添加如下代码：

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是在Sandbox里，具体测试方法，请看：Shopify中用Custom Pixel安装Google Analytics 4