"장바구니에 추가" 이벤트 생성 방법 BigCommerce

학습 내용

고객이 장바구니에 품목을 추가하는 시점을 추적하고 중단된 장바구니 흐름을 트리거할 수 있는 BigCommerce용 장바구니에 추가됨 이벤트를 생성하는 방법을 알아보세요. 장바구니 추가 이벤트는 BigCommerce와 통합할 때 자동으로 추적되지 않으며, 먼저 BigCommerce 테마 파일에 JavaScript 스니펫(이 가이드에 포함됨)을 추가(및 수정 가능)해야 합니다.

• 중단된 카트 플로우를 전송하기 위해 카트에 추가됨 이벤트를 생성할 필요는 없습니다. 카트에 추가됨 중단된 카트 플로우는 결제 시작에 의해 트리거되는 표준 중단된 카트 플로우와는 별개입니다. 
• 클라비요에 내장된 BigCommerce 통합 기능은 고객이 장바구니에 품목을 추가한 후 결제 과정에서 이메일을 입력하면 결제 시작 이벤트를 이미 추적합니다. 

시작하기 전 안내 사항

장바구니에 추가됨 이벤트는 이전에 클라비요에서 쿠키를 생성한 사용자에 대해서만 추적됩니다. 

카트에 추가됨 이벤트가 제대로 작동하려면 이미 제품 보기 추적이 설치되어 있어야 합니다. 일반적으로 클라비요 고객은 BigCommerce 통합 프로세스 중에 이를 설치하며, 지침은 통합 문서에서 확인할 수 있습니다. 

스니펫 추가

1. BigCommerce 관리자를 열고 스토어 첫 화면 > 내 테마로 이동합니다.
2. 현재 테마를 찾은 다음 고급 설정 드롭다운을 클릭합니다.
3. product.html 파일을 검색하고 클릭하여 엽니다.
4. 클라비요 조회한 제품 스니펫 바로 아래에 아래 스니펫을 붙여넣습니다.

   <스크립트 텍스트="텍스트/자바스크립트"> 
   //페이지 로드 시 즉시 클라비요 객체 초기화
   !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=새) 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>
   <스크립트 텍스트="텍스트/자바스크립트">
   //카트에 추가됨
   var klaviyo = window.klaviyo || [];
   document.getElementById("form-action-addToCart").addEventListener('click',function (){
      klaviyo.track("Added to Cart", item);
   });
   </script>

5. 다음으로 스니펫을 수정해야 하는지 확인합니다. 이렇게 하려면 사이트에서 '장바구니에 추가' 버튼의 ID를 확인하고 아래 스니펫에 강조 표시된 '장바구니에 추가' 변수(기본값은 form-action-addToCart)와 일치하는지 확인해야 합니다.
   
6. 버튼의 ID를 확인하려면 사이트의 제품 페이지 중 하나를 열고 '장바구니에 추가' 버튼을 마우스 오른쪽 버튼으로 클릭한 다음 검사를 선택합니다.
   
7. 콘솔이 열리고 '장바구니에 추가' 버튼의 소스 코드가 표시됩니다. 다음 이미지는 콘솔에서 강조 표시된 "장바구니에 추가" 버튼의 ID를 보여줍니다.
   
8. 여기에 표시된 페이지의 버튼 ID는 form-action-addToCart와 일치하므로 변경할 필요가 없습니다.
   • 사이트의 '장바구니에 추가' 버튼의 ID가 form-action-addToCart가 아닌 경우 따옴표 안에 있는 변수 텍스트를 버튼의 ID와 일치하도록 변경해야 합니다.
9. 소스 코드에 버튼 ID가 표시되지 않는 경우 다음 섹션으로 건너뛰고 버튼 표기법 대신 클래스 표기법으로 대체 스니펫을 사용하는 방법을 알아보세요. 
10. 완료되면 product.html 파일을 저장합니다. 

스니펫 추가가 완료되었으며 이제 장바구니에 추가됨 이벤트를 추적할 수 있습니다. 

버튼 ID가 없는 "장바구니에 추가" 버튼에 대한 대체 스니펫

스타일상의 이유로 일부 사이트에서는 '장바구니에 추가' 버튼에 버튼 ID 대신 클래스 표기를 사용합니다.

'카트에 추가' 버튼에 버튼 ID가 없고(이전 섹션의 단계를 따라 확인할 수 있음) 대신 클래스 표기를 사용하는 경우 아래의 대체 코드 스니펫을 사용하여 카트에 추가 이벤트를 활성화해야 합니다. 

1. 버튼이 클래스 표기법으로 정의된 경우, 제품.html 파일 하단에 다음 대체 스니펫을 붙여넣습니다:

   <스크립트 텍스트="텍스트/자바스크립트"> 
   //페이지 로드 시 즉시 클라비요 객체 초기화
   !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=새) 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>
   <스크립트 텍스트="텍스트/자바스크립트">
   //본 제품
   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>
   

2. 이 코드는 클래스 이름으로 수정해야 할 가능성이 높습니다. 다음 예제에서 강조 표시된 따옴표 사이의 버튼 클래스 이름과 위 코드 스니펫의 getElementsByClassName 뒤 괄호 안의 내용을 비교하세요. 예를 들어 스크린샷의 클래스 이름은 btn product-form_cart-submit btn--초등-액센트이고 스니펫의 클래스 이름은 add-to-cart입니다.
   
   
   • 이 두 가지가 일치하지 않으면 버튼의 클래스 이름을 반영하도록 코드 스니펫을 변경하세요.
3. 예를 들어 아래 코드 스니펫은 큰따옴표로 묶인 클래스 이름 값 btn product-form_cart-submit btn--보조-악센트로 수정되었습니다.
   
4. product.html 파일 저장

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

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

스니펫을 추가한 후에는 "장바구니에 추가'' 버튼을 보고 쿠키화된 방문자가 이 버튼을 클릭할 때마다 장바구니에 추가 이벤트를 추적해야 합니다. 

이 이벤트는 조회된 제품 이벤트와 유사한 기능을 합니다. 누군가가 장바구니에 아이템을 추가할 때마다 새로운 이벤트가 트리거됩니다. 이러한 이벤트는 다음에서 확인할 수 있습니다:

1. 애널리틱스로 이동하기 > 클라비요의 메트릭
2. 이벤트 검색하기
3. 활동 피드 클릭
   
   

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

• 장바구니에 추가가 제대로 작동하는 데 필요한 Klaviyo.js(사이트 내 활성 스니펫이라고도 함)가 작동하는지 확인합니다. 클라비요와 통합할 때 사이트에 자동으로 추가되었어야 하지만, BigCommerce 통합 문서의 현장 추적 설치 확인 섹션에 있는 단계를 따라 작동하는지 확인할 수 있습니다.
• 장바구니 추가가 제대로 작동하려면 조회한 제품 추적이 작동하는지 확인해야 합니다. 이 스니펫은 수동으로 추가되며, 통합 문서의 조회된 제품 섹션에서 추가 및 테스트 방법을 배울 수 있습니다. 

"장바구니에 추가" 버려진 장바구니 흐름

중단된 카트 플로우를 생성할 때( 장바구니에 추가 또는 결제 시작 사용) 이메일 외에 클라비요 SMS를 활용할 수 있습니다. 규정 준수를 위해 흐름에서 하나의 SMS만 전송하고, 여러 유형의 중단된 카트 흐름을 사용하는 경우 그중 하나에서만 SMS를 사용해야 합니다. 

라이브러리의 필수 항목 섹션에서 표준 중단된 카트 알림 플로우를 찾을 수 있습니다. 이 플로우는 결제 시작 이벤트에 의해 트리거됩니다.

장바구니에 추가됨 이벤트를 사용하여 버려진 카트 플로우를 시작하려면 적절한 플로우 필터가 이미 설정되어 있는 클라비요의 플로우 라이브러리에서 제공되는 사전 구축된 플로우를 사용하는 것이 좋습니다. 이 흐름은 아직 결제를 시작하지 않은 캐주얼한 잠재 고객을 대상으로 하는 경향이 있습니다.

카트에 추가됨 이벤트에 의해 트리거된 중단된 카트 흐름은 "판매 손실 방지" 목표 섹션에서 확인할 수 있습니다. 

BigCommerce 장바구니에 추가 스니펫을 구현한 경우 이 플로우에는 모든 권장 필터와 동적 이메일 콘텐츠가 준비되어 개인화된 장바구니 후속 이메일에 사용할 수 있습니다.

프라임과 함께 Amazon Buy를 사용 중이신가요?

프라임으로 구매를 사용하여 스토어에 있는 모든 제품에 대한 결제 및 주문 처리를 지원하는 경우에는 반드시 프라임으로 구매를 사용해야 합니다:

• 구매와 프라임을 클라비요와 통합 구매와 프라임 데이터를 클라비요 계정으로 가져옵니다.
• 중단된 "장바구니에 추가됨" 흐름의 경우 다음 흐름 필터를 추가하여 결제를 시작했거나 Prime으로 구매를 통해 구매한 고객이 잘못된 메시지를 수신하지 않도록 제외합니다:
  
  • 이 흐름을 시작한 후 결제 (프라임으로 구매)를 0회 시작하고
  • 주문 (프라임으로 구매) 이 흐름을 시작한 이후 0번주문했습니다.

추가 리소스

• 중단된 카트 흐름 만들기
• BigCommerce 데이터 참조