> ## 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 Onsite Tracking 설정 가이드](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. **Save**를 클릭하고 결과를 테스트하세요

⚠️ **중요: Enhanced AJAX API Compatibility의 장단점**\
이 설정은 대부분의 스토어에서 **기본적으로 비활성화**되어 있어요. 스토어가 비표준 AJAX 장바구니 API를 사용하고 Upcart가 장바구니 추가 이벤트를 가로채지 못하는 경우에만 활성화하세요. 활성화하면 다른 앱이 장바구니 동작에 대해 더 많은 제어권을 갖게 되어 리디렉션 루프가 발생하거나 Upcart 드로어를 여는 대신 고객을 Shopify 장바구니 페이지로 보낼 수 있어요. 이 설정을 활성화한 후 리디렉션이 발생하면 비활성화하고 대신 수동 Upcart API(`upcartRegisterAddToCart`)를 사용하는 **옵션 2**로 전환하세요.

이 설정에 대한 전체 안내는 [Enhanced AJAX API Compatibility](/ko/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를 통해 제품이나 업셀이 추가될 때마다 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를 함께 사용하고 계시다면, 이 가이드가 장바구니 드로어 경험을 그대로 유지하면서 이벤트를 원활하게 추적하는 데 도움이 될 거예요.

***

더 많은 도움이 필요하신가요? 앱 내 지원을 통해 문의해 주세요.