Shopify里对Klaviyo Form表单做跟踪

更新时间：2026年3月14号

本文介绍在 Shopify Custom Pixel（自定义像素）环境下，如何实现对 Klaviyo 表单提交事件的跟踪。

适用场景说明：

若你已在 theme.liquid 中直接安装 GTM，可参考延伸阅读：GA4 上对Klaviyo Form表单做跟踪。
若你仅通过 Shopify 的 Custom Pixel 安装 GTM，则需采用“主题层监听 → 转为 Shopify 内部事件 → 转入数据层”的链路。本文专为第二种情况提供完整方案。

核心实现思路

由于 Custom Pixel 无法直接操作 DOM 监听页面上的 Klaviyo 表单事件，我们需要在 theme.liquid 中先捕获 Klaviyo 的提交行为，并将其转化为 Shopify 的 analytics 内部事件，再由 Custom Pixel 接收并推送到 dataLayer。

Step 1：在theme.liquid中监听Klaviyo事件

打开Shopify后台的「Online Store」——「 Themes」——「 Edit code」，找到 theme.liquid 文件，在 </body> 标签前添加以下 JavaScript 代码：

<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 的嵌入式表单脚本会自动触发 klaviyo-forms 原生事件，其 detail 对象中包含 formId 和 formTitle 等关键属性。

Step 2：在Custom Pixel中订阅并转发事件

进入 Shopify 后台的「 Settings 」——「Customer events」——「Custom pixels」，找到您的 GTM 自定义像素，在代码编辑器中追加以下逻辑：

analytics.subscribe("klaviyo_forms", (event) => {
  window.dataLayer.push({
    event: "klaviyo",
    form_id: event.customData.form_id,
	form_title: event.customData.form_title
  });
});

Step 3：GTM 端配置（变量、触发器与代码）

推送至数据层后，需要在GTM容器中完成如下三项配置，才能将数据发送至GA4。

设置触发器

在GTM中点击「代码」——「新建」——「选择一个触发器类型以开始设置…」——「自定义事件」，命名为Custom Event- Klaviyo Forms Submit Form，做如下设置：

设置数据层变量

在GTM中点击「代码」——「新建」——「选择一个变量类型以开始设置…」——「数据层变量」，命名为dlv_formid，做如下设置：

同理设置dlv-formtitle。

设置GA4事件代码

在GTM中点击「代码」——「新建」——「选择一个代码类型以开始设置…」——「Google Analytics：GA4 事件」，命名为“GA4-Event-Klaviyo Forms Submit Form”，然后做如下设定：

Step 4：预览测试

最后就是测试，由于Custom Pixel是在Sandbox里，具体测试方法，请看：Shopify中用Custom Pixel安装Google Analytics 4

有疑问可以在底部留言