BigCommerce의 '장바구니에 추가됨' 이벤트 생성 방법

학습 내용

고객이 장바구니에 상품을 추가하는 시점을 추적하고 장바구니 이탈 플로우를 트리거할 수 있는 BigCommerce용 장바구니에 추가됨 이벤트를 생성하는 방법을 알아보세요. BigCommerce와 통합하더라도 장바구니에 추가됨 이벤트는 자동으로 추적되지 않아요. 먼저 BigCommerce 테마 파일에 JavaScript 스니펫(이 가이드에 포함됨)을 추가하고(필요에 따라 수정할 수도 있어요) 설정해야 해요.

• 장바구니 이탈 플로우를 보내기 위해 Added to Cart 이벤트를 만들 필요는 없어요. Added to Cart 장바구니 이탈 플로우는 Started Checkout에 의해 트리거되는 표준 장바구니 이탈 플로우와는 별개예요.
• Klaviyo에서 기본 제공되는 BigCommerce 연동 기능은 고객이 장바구니에 상품을 추가한 후 결제 과정에서 이메일을 입력하면 결제 시작 이벤트를 이미 추적합니다.

시작하기 전에 알아야 할 것

장바구니에 추가됨 이벤트는 Klaviyo가 이전에 쿠키를 수집한 사용자만 추적돼요.

장바구니에 추가됨 이벤트가 제대로 작동하려면 먼저 조회한 제품 트래킹이 설치되어 있어야 해요. 일반적으로 Klaviyo 고객은 BigCommerce 연동 과정에서 이를 설치하며, 자세한 안내는 연동 도움말에서 확인할 수 있어요.

스니펫 추가

1. BigCommerce 관리자에서 Storefront > My Themes로 이동하세요.
2. 현재 테마를 찾아 고급 설정 드롭다운을 클릭하세요.
3. product.html 파일을 검색하고 클릭하여 엽니다.
4. 아래 스니펫을 Klaviyo Viewed Product 스니펫 바로 아래에 그대로 붙여넣으세요.

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script text="text/javascript">
//Added to Cart
var klaviyo = window.klaviyo || [];
document.getElementById("form-action-addToCart").addEventListener('click',function (){
   klaviyo.track("Added to Cart", item);
});
</script>

1. 다음으로, 스니펫을 수정해야 하는지 확인해 주세요. 이렇게 하려면 사이트에서 “장바구니에 추가” 버튼의 ID를 확인하고, 아래 스니펫에서 강조 표시된 “장바구니에 추가” 변수가 기본값인 form-action-addToCart과 일치하는지 확인해야 해요.
   

2. 버튼의 ID를 확인하려면 사이트의 제품 페이지 중 하나를 열고 “장바구니에 추가” 버튼을 마우스 오른쪽 버튼으로 클릭한 다음 검사를 선택해 주세요.
   

3. 콘솔이 열리고 “장바구니에 추가됨” 버튼의 소스 코드가 표시됩니다. 다음 이미지는 콘솔에서 강조 표시된 "장바구니에 추가됨" 버튼의 ID를 보여줍니다.
   

4. 여기에 표시된 페이지의 버튼 ID는 form-action-addToCart와(과) 일치하므로 변경할 필요가 없습니다.
   • 사이트의 “Add to Cart” 버튼 ID가 form-action-addToCart이 아니라면, 따옴표 안의 변수 텍스트를 버튼의 ID에 맞게 변경해야 해요.
5. 소스 코드에 버튼 ID가 표시되지 않으면 다음 섹션으로 건너뛰고, 버튼 표기법 대신 클래스 표기법을 사용하는 대체 스니펫을 사용하는 방법을 알아보세요.
6. 완료되면 product.html 파일을 저장하세요.

스니펫 추가가 완료되었으며 이제 장바구니에 추가됨 이벤트를 추적할 거예요.

버튼 ID가 없는 “장바구니에 추가” 버튼용 대체 스니펫

스타일링상의 이유로 일부 사이트에서는 “장바구니에 추가” 버튼에 버튼 ID 대신 클래스 표기법을 사용하기도 해요.

“장바구니에 추가”” 버튼에 버튼 ID가 없고(이전 섹션의 단계에 따라 확인할 수 있어요) 대신 클래스 표기법을 사용하는 경우, 장바구니에 추가됨 이벤트를 활성화하려면 아래의 대체 코드 조각을 사용해 주세요.

1. 버튼이 클래스 표기법으로 정의되어 있다면 product.html 파일의 하단에 다음 대체 스니펫을 붙여넣어 주세요:

<script text="text/javascript"> 
//Initialize Klaviyo object immediately on page load
!function(){if(!window.klaviyo){window._klOnsite=window._klOnsite||[];try{window.klaviyo=new Proxy({},{get:function(n,i){return"push"===i?function(){var n;(n=window._klOnsite).push.apply(n,arguments)}:function(){for(var n=arguments.length,o=new Array(n),w=0;w<n;w++)o[w]=arguments[w];var t="function"==typeof o[o.length-1]?o.pop():void 0,e=new Promise((function(n){window._klOnsite.push([i].concat(o,[function(i){t&&t(i),n(i)}]))}));return e}}})}catch(n){window.klaviyo=window.klaviyo||[],window.klaviyo.push=function(){var n;(n=window._klOnsite).push.apply(n,arguments)}}}}(); </script>
<script text="text/javascript">
//Viewed Product
var klaviyo = window.klaviyo || [];var classname = document.getElementsByClassName("add-to-cart");var addToCart = function() {   klaviyo.track("Added to Cart", item);}; for (var i = 0; i < classname.length; i++) {   classname[i].addEventListener('click', addToCart, false);}
</script>

1. 이 코드는 클래스 이름에 맞게 수정해야 할 가능성이 높아요. 다음 예시에서 강조 표시된 따옴표 사이의 버튼 클래스 이름을, 위 코드 조각에서 getElementsByClassName 뒤 괄호 안의 내용과 비교하세요. 예를 들어, 스크린샷의 클래스 이름은 btn product-form_cart-submit btn--secondary-accent 이고 코드 조각의 클래스 이름은 add-to-cart예요.
   
   

• 이 두 가지가 일치하지 않으면 버튼의 클래스 이름이 반영되도록 코드 조각을 변경해 주세요.

2. 예를 들어, 아래 코드 조각은 큰따옴표로 둘러싸인 classname 값 btn product-form_cart-submit btn--secondary-accent (으)로 수정되었습니다.
   

3. product.html 파일을 저장하세요.

저장하면 스니펫 추가가 완료되며 이제 장바구니에 추가 이벤트를 추적할 수 있어요.

"장바구니에 추가됨" 스니펫 문제 해결

스니펫을 추가한 후에는 “Add to Cart'' 버튼을 감시하고, 쿠키가 있는 방문자가 이 버튼을 클릭할 때마다 장바구니에 추가됨 이벤트를 추적해야 해요.

이 이벤트는 제품 조회 이벤트와 비슷하게 작동해요. 누군가 장바구니에 추가하는 각 항목은 새로운 이벤트를 트리거해요. 다음 방법으로 이러한 이벤트를 확인할 수 있어요:

1. Klaviyo에서 애널리틱스 > 지표 로 이동하기
2. 이벤트 검색
3. 활동 피드
   
   를 클릭

계정에서 장바구니에 추가됨 이벤트가 보이지 않으면 다음을 시도해 보세요:

• 장바구니에 추가됨이 제대로 작동하려면 필요한 Klaviyo.js(또는 활성 온사이트 스니펫)가 작동하는지 확인해 주세요. Klaviyo와 연동하면 사이트에 자동으로 추가되어야 하지만, BigCommerce 연동 문서의 온사이트 트래킹 설치 확인 섹션에 있는 단계를 따라 트래킹이 작동하는지 확인할 수 있어요.
• Viewed Product 트래킹이 제대로 작동하는지 확인해 주세요. 이는 Added to Cart 가 제대로 작동하는 데도 필요해요. 이 코드 조각은 수동으로 추가되며, 연동 도움말 문서의 Viewed Product 섹션에서 추가 및 테스트 방법을 알아볼 수 있어요.

장바구니에 추가됨 스니펫에서 계속 문제가 발생한다면 “장바구니에 담기” 버튼을 식별하는 데 문제가 있기 때문일 수 있어요. 이 경우 Klaviyo 지원 팀에 문의하세요.

“Added to Cart” 장바구니 이탈 플로우

장바구니 이탈 플로우를 만들 때(장바구니에 추가 또는 결제 시작 사용) 이메일 외에도 Klaviyo SMS를 활용할 수 있습니다. 규정 준수를 위해 플로우에서 SMS는 1건만 전송하고, 여러 유형의 장바구니 이탈 플로우를 사용하는 경우에도 그중 하나에서만 SMS를 사용해 주세요.

라이브러리의 Essentials 섹션에서 표준 장바구니 이탈 알림 플로우를 찾을 수 있어요. 이 플로우는 Started Checkout 이벤트에 의해 트리거돼요.

장바구니에 추가됨 이벤트를 사용해 장바구니 이탈 플로우를 시작하려면, 이미 적절한 플로우 필터가 설정되어 있는 Klaviyo의 플로우 라이브러리에서 사전 구축된 플로우를 사용하는 것을 권장해요. 이 플로우는 아직 결제를 시작하지 않은 보다 가벼운 관심 단계의 잠재 쇼핑객을 타겟팅하는 경향이 있어요.

장바구니에 추가됨 이벤트로 트리거되는 장바구니 이탈 플로우는 "매출 손실 방지" 목표 섹션에서 찾을 수 있어요.

BigCommerce 장바구니에 추가됨 스니펫을 구현했다면, 이 플로우는 권장 필터와 동적 이메일 콘텐츠가 모두 준비되어 개인화된 장바구니 후속 이메일을 보낼 수 있어요.

Amazon Buy with Prime을 사용하고 계신가요?

Buy with Prime을 사용하여 스토어 내 모든 제품에 대한 결제 및 주문 처리를 지원하고 있는 경우, 다음을 따라야 합니다.

• Buy with Prime을 Klaviyo와 연동하여 Buy with Prime 데이터를 Klaviyo 계정으로 가져옵니다.
• '장바구니 이탈' 플로우의 경우 다음 플로우 필터를 추가하여, 결제를 시작했거나 Buy with Prime으로 구매한 고객이 잘못된 메시지를 수신하지 않도록 제외합니다.
  
  • 이 플로우를 시작한 이후 시작된 결제(Buy with Prime)가 0회이고
  • 이 플로우를 시작한 이후 0번 주문(Buy with Prime)함

추가 자료