개요

기본적으로 Upcart는 Shopify의 장바구니 기능을 대체하기 때문에 Klaviyo 같은 서드파티 앱이 장바구니 업데이트를 감지하지 못할 수 있어요. 다행히 Upcart를 활성 상태로 유지하면서 Klaviyo의 장바구니 추가(Add to Cart, ATC) 추적을 복원하는 신뢰할 수 있는 방법이 두 가지 있어요. 시작하기 전에 Klaviyo Onsite Tracking이 올바르게 구성되어 있는지 확인하세요. 설정 가이드는 여기에서 확인할 수 있어요:
👉 Klaviyo Onsite Tracking 설정 가이드

옵션 1: AJAX 호환성 사용 (가장 빠른 설정)

Upcart에는 Shopify의 기본 장바구니 업데이트 동작을 노출하여 다른 앱과의 호환성을 복원하는 설정이 포함되어 있어요. 이를 활성화하면 Klaviyo가 다시 장바구니 추가 이벤트를 수신할 수 있어요.

활성화 방법:

Upcart > Cart Editor > Settings > Cart settings로 이동하세요
Advanced Settings로 스크롤해 펼치세요
Enhanced Ajax API compatibility를 체크하세요
Save를 클릭하고 결과를 테스트하세요

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

옵션 2 (권장): 커스텀 Klaviyo 스크립트 추가

이 방법은 두 가지 장점을 모두 제공해요. Upcart가 완전한 제어권을 유지하면서 Klaviyo 추적도 계속 작동해요.

단계:

Upcart > Cart Editor > Settings를 여세요
Custom HTML 섹션으로 스크롤하세요
드롭다운에서 Scripts (Before Load) 를 선택하세요
다음 스크립트를 붙여넣으세요:

최신 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>

TrackATC 함수를 포함해 전체 블록을 붙여넣으세요. 구독 함수가 이 함수를 호출하므로, 두 개의 upcartSubscribe… 줄만 있는 스니펫은 장바구니에 추가할 때마다 Uncaught ReferenceError: TrackATC is not defined 오류를 발생시키고 Klaviyo에 아무것도 전송하지 않아요.

레거시 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>

이 스크립트가 하는 일:

Upcart를 통해 제품이나 업셀이 추가될 때마다 Klaviyo에 “Added to Cart” 이벤트를 전송해요
작동 여부를 확인할 수 있도록 브라우저 콘솔에 확인 메시지(Klaviyo ATC)를 추가해요

설정 테스트 방법

Klaviyo 연동이 제대로 작동하는지 확인하려면:

장바구니 추가 이벤트 테스트에 대한 Klaviyo 가이드를 따르세요
브라우저의 Console 탭을 사용해 제품 추가 후 “Klaviyo ATC” 로그가 표시되는지 확인하세요
Klaviyo의 분석 대시보드에서 ATC 이벤트 데이터를 확인하세요

여전히 추적 데이터가 보이지 않으면 Klaviyo의 온사이트 스크립트가 설치되고 활성화되어 있는지 확인하세요. 도움이 필요하시면 Klaviyo 고객 센터에 문의하세요.

요약


방법	장점	사용 시기
옵션 1 – AJAX 호환성 활성화	가장 빠른 설정, 코드 불필요	다른 앱이 간섭하지 않을 때
옵션 2 – 커스텀 스크립트 추가	가장 신뢰할 수 있음, Upcart가 제어권 유지	옵션 1이 장바구니 리디렉션을 일으킬 때

Klaviyo와 Upcart를 함께 사용하고 계시다면, 이 가이드가 장바구니 드로어 경험을 그대로 유지하면서 이벤트를 원활하게 추적하는 데 도움이 될 거예요.

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

시작하기

장바구니 모듈

장바구니 설정

고정 장바구니 버튼

멀티카트

사용자 지정

분석

연동 및 호환성

요금 및 계정

문제 해결

Upcart에서 Klaviyo 장바구니 추가 이벤트 추적

개요

옵션 1: AJAX 호환성 사용 (가장 빠른 설정)

활성화 방법:

옵션 2 (권장): 커스텀 Klaviyo 스크립트 추가

단계:

이 스크립트가 하는 일:

설정 테스트 방법

요약

​개요

​옵션 1: AJAX 호환성 사용 (가장 빠른 설정)

​활성화 방법:

​옵션 2 (권장): 커스텀 Klaviyo 스크립트 추가

​단계:

​이 스크립트가 하는 일:

​설정 테스트 방법

​요약

개요

옵션 1: AJAX 호환성 사용 (가장 빠른 설정)

활성화 방법:

옵션 2 (권장): 커스텀 Klaviyo 스크립트 추가

단계:

이 스크립트가 하는 일:

설정 테스트 방법

요약