> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 在 Upcart 中跟踪 Klaviyo 加购事件

> 本文说明当客户使用 Upcart 将商品加入购物车时，如何启用准确的 Klaviyo 事件跟踪。

<div id="overview">
  # 概述
</div>

默认情况下，Upcart 会接管 Shopify 的购物车功能，这可能会导致 **Klaviyo** 等第三方应用无法检测到购物车更新。幸运的是，有两种可靠的方法可以在保持 Upcart 激活的同时恢复 Klaviyo 中的\*\*加购（Add to Cart，ATC）\*\*跟踪。

开始之前，请确保 **Klaviyo Onsite Tracking** 已正确配置。你可以参考他们的设置指南：\
👉 [Klaviyo 站内跟踪设置指南](https://help.klaviyo.com/hc/en-us/articles/4425956184731)

***

<div id="option-1-use-ajax-compatibility-fastest-setup">
  ## 方案 1：使用 AJAX 兼容性（设置最快）
</div>

Upcart 包含一项设置，可通过暴露 Shopify 原生的购物车更新行为来恢复与其他应用的兼容性。启用后，Klaviyo 就可以重新监听加购事件。

<div id="how-to-enable">
  ## 启用方法：
</div>

1. 前往 **Upcart > Cart Editor > Settings > Cart settings**
2. 滚动到 **Advanced Settings** 并展开
3. 勾选 **Enhanced Ajax API compatibility**
4. 点击**保存**并测试效果

⚠️ **重要提示：Enhanced AJAX API Compatibility 的取舍**\
对于大多数商店，此设置**默认处于禁用状态**。仅当你的商店使用非标准的 AJAX 购物车 API 且 Upcart 未能拦截加购事件时才启用它。启用后，其他应用会对购物车行为获得更多控制权，这可能导致重定向循环，或将客户导向 Shopify 购物车页面而不是打开 Upcart 抽屉。如果启用此设置导致重定向，请禁用它并改用**方案 2**，即使用手动 Upcart API（`upcartRegisterAddToCart`）。

有关此设置的完整指南，请参阅 [Enhanced AJAX API Compatibility](/zh/upcart/enhanced_ajax_api_compatibility)。

***

<div id="option-2-recommended-add-a-custom-klaviyo-script">
  ## 方案 2（推荐）：添加自定义 Klaviyo 脚本
</div>

这种方法两全其美：**Upcart 保持完全控制**，同时 **Klaviyo 跟踪仍然有效**。

<div id="steps">
  ## 步骤：
</div>

1. 打开 **Upcart > Cart Editor > Settings**
2. 向下滚动到 **Custom HTML** 部分
3. 从下拉菜单中选择 **Scripts (Before Load)**
4. 粘贴以下脚本：

现代 API（推荐）：

```
<script>
  function TrackATC(){
    var _learnq = window._learnq || [];
    _learnq.push(['track', 'Added to Cart']);
    console.log("Klaviyo ATC");
  }

  window.upcartSubscribeAddedToCart(function(event) { TrackATC(); });
  window.upcartSubscribeUpsellsAddedToCart(function(event) { TrackATC(); });
</script>
```

<Warning>
  请粘贴整个代码块，包括 `TrackATC` 函数。订阅回调会调用它，因此如果只粘贴两行 `upcartSubscribe…`，每次加购都会抛出 `Uncaught ReferenceError: TrackATC is not defined`，并且不会向 Klaviyo 发送任何数据。
</Warning>

旧版 API（仍然有效但已弃用）：

```
<script>  
  function TrackATC(){  
    var _learnq = window._learnq || [];  
    fetch(`${window.location.origin}/cart.js`)  
      .then((res) =>  
        res.clone().json().then((data) => {  
          var cart = {  
            total_price: data.total_price / 100,  
            $value: data.total_price / 100,  
            total_discount: data.total_discount,  
            original_total_price: data.original_total_price / 100,  
            items: data.items,  
          };  
          _learnq.push(['track', 'Added to Cart', cart]);  
          console.log("Klaviyo ATC");  
        }).catch((e) => {  
          console.error('Klaviyo add to cart tracking failed', e);  
        })  
      );  
  }  
  
  window.upcartOnAddToCart = () => { TrackATC(); };  
  window.upcartOnAddUpsell = () => { TrackATC(); };  
</script>
```

***

<div id="what-this-does">
  ## 脚本的作用：
</div>

* 每当通过 Upcart 添加商品或 upsell 时，向 Klaviyo 发送一个 "Added to Cart" 事件
* 在浏览器控制台中添加一条确认消息（`Klaviyo ATC`），让你知道它正在工作

***

<div id="how-to-test-your-setup">
  ## 如何测试你的设置
</div>

要确认你的 Klaviyo 集成正常工作：

* 按照 [Klaviyo 的加购事件测试指南](https://help.klaviyo.com/hc/en-us/articles/4425956184731)进行操作
* 使用浏览器的 **Console** 标签页，确认添加商品后出现 "Klaviyo ATC" 日志
* 在 Klaviyo 的分析仪表板中查看 ATC 事件数据

如果仍然看不到跟踪数据，请确认 Klaviyo 的站内脚本已安装并启用。如需帮助，请联系 [Klaviyo 帮助中心](https://help.klaviyo.com/hc/en-us)。

***

<div id="summary">
  ## 总结
</div>

|                        |                  |                 |
| ---------------------- | ---------------- | --------------- |
| 方法                     | 优点               | 适用场景            |
| **方案 1** – 启用 AJAX 兼容性 | 设置最快，无需代码        | 当其他应用不产生干扰时     |
| **方案 2** – 添加自定义脚本     | 最可靠，Upcart 保持控制权 | 当方案 1 导致购物车重定向时 |

如果你同时使用 Klaviyo 和 Upcart，本指南可以帮助你顺畅地跟踪事件，同时保持 cart drawer 体验完好无损。

***

需要更多帮助？请通过应用内支持联系我们。