Shopify용 'Added to Cart' 이벤트 수동 생성 방법

학습 내용

Shopify에 대한 장바구니에 추가됨 이벤트를 수동으로 생성하여 고객이 장바구니에 상품을 추가하는 시점을 추적하고 장바구니 이탈 플로우를 트리거하는 방법을 알아보세요. 

장바구니에 추가됨은 Klaviyo의 결제 시작됨 이벤트와는 다릅니다. 결제 시작됨은 고객이 장바구니에 품목을 추가하고 결제 과정에서 이메일을 입력한 후 결제를 계속하면 트리거됩니다. 이는 퍼널 아래쪽에서 발생하는 반면, 장바구니에 추가됨은 고객이 장바구니에 상품을 추가하는 즉시 트리거됩니다. 

시작하기 전에

• 이 문서를 계속 읽기에 앞서 Shopify 시작하기 문서를 통해 연동에 대한 단계별 지침을 읽어보세요.
• 장바구니에 추가됨 이벤트가 제대로 작동하려면 Klaviyo 온사이트 추적이 활성화되어(조회한 제품 트래킹 포함) 있는지 확인하세요.
• 장바구니에 추가됨 이벤트는 Klaviyo가 이전에 쿠키를 수집한 사용자만 추적한다는 점에 유의하세요.

'장바구니에 추가됨' 이벤트 생성

장바구니에 추가됨 이벤트를 생성하려면 다음의 3단계를 따르세요. 

1. 코드 조각을 배치할 위치 선택
2. 스토어에 조각 추가
3. 코드 조각 테스트

스니펫을 어디에 붙여넣어야 하나요?

기본 제품 페이지와 다른 제품 페이지에 모두 스니펫을 붙여넣어야 합니다.

스토어에 사용자 정의 리퀴드 블록이 있는 경우, 스니펫에 해당 블록을 사용해야 합니다. 

1. Shopify에서 온라인 스토어 > 테마로 이동합니다.
2. 테마를 찾아 사용자 정의를 클릭합니다.
3. 페이지 상단에서 홈페이지 드롭다운을 클릭합니다.
4. 제품 > 기본 제품을 선택하면 기본 제품 페이지로 이동합니다.
5. 왼쪽 사이드바에서 추가 섹션을 클릭한 다음 사용자 정의 리퀴드를 선택합니다.
6. 제공된 스니펫을 상자 안에 붙여넣습니다.
7. 오른쪽 상단의 저장을 클릭합니다.
8. 왼쪽 사이드바를 보면 장바구니에 추가됨를 위한 새 사용자 정의 리퀴드 블록이 페이지의 다른 섹션 아래에 자동으로 표시됩니다.
   • 장바구니에 추가됨 블록을 이동해야 하는 경우, 블록 위로 마우스를 가져가서 점 6개 아이콘을 클릭하고 다른 섹션 아래로 드래그합니다.
     
     

스토어에 사용자 정의 리퀴드 블록이 없는 경우 theme.liquid 파일에 스니펫을 배치해야 합니다.

1. Shopify에서 온라인 스토어 > 테마로 이동합니다.
2. 테마를 찾아 사용자 정의를 클릭합니다.
3. 상단의 점 3개 아이콘을 클릭하고 코드 편집을 선택합니다.
4. theme.liquid 파일을 엽니다.
5. 다른 모든 코드 뒤에 제공된 스니펫을 클로징 </body > 태그 앞에 붙여넣습니다.
   
6. 스니펫 위에 다음 오프닝 태그를 추가합니다. {% if product %}
   
7. 코드 조각 바로 뒤에 다음 클로징 태그를 추가합니다. {% endif %}
8. 파일은 다음과 같은 모습이어야 합니다.
   
9. 저장을 클릭합니다.

사이트에 스니펫 추가

다음 장바구니에 추가됨 스니펫은 대부분의 Shopify 스토어에서 작동합니다.

위에서 결정한 위치의 Shopify 스토어에 아래 코드 조각을 추가합니다.

<script>
  window.addEventListener('load', function() {
  var _learnq = window._learnq || [];
  function addedToCart() {
   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
    }
    if (item !== 'undefined') {
      cart = Object.assign(cart, item)
    }
    if (klAjax) {
       _learnq.push(['track', 'Added to Cart', cart]);
       klAjax = false;
      }
   }))
  };
  (function (ns, fetch) {
    ns.fetch = function() {
      const response = fetch.apply(this, arguments);
      response.then(res => {
        if (`${window.location.origin}/cart/add.js`
          .includes(res.url) && res.url !== '') {
              addedToCart()
        }
      });
      return response
     }
  }(window, window.fetch));
  var klAjax = true;
  var atcButtons = document.querySelectorAll("form[action*='/cart/add'] button[type='submit']");
  for (var i = 0; i < atcButtons.length; i++) { 
    atcButtons[i].addEventListener("click", function() {
      if (klAjax) {
        _learnq.push(['track', 'Added to Cart', item]);
        klAjax = false;
      }
    })
  }
  });
</script>

완료되면 다음 섹션의 지침에 따라 이벤트를 테스트합니다.

'장바구니에 추가됨' 이벤트 테스트

Klaviyo는 '알려진 브라우저' 또는 (이메일 클릭, 양식 작성 등을 통해) 쿠키를 수집한 사용자만 추적한다는 점에 유의하세요. 이러한 이유로 장바구니에 추가됨 이벤트가 예상처럼 계정에 빨리 표시되지 않을 수 있습니다. Klaviyo에서 추적하는 대상에 관해 자세히 알아보려면 온사이트 추적에 대한 도움말 문서를 참조하세요. 

장바구니에 추가됨 이벤트를 테스트하려면 직접 이메일 주소를 수동으로 쿠키에 추가해야 합니다. 다음 단계를 따르세요.

1. 웹사이트로 이동합니다.
2. 홈페이지에서 URL 끝에 다음을 추가하세요. testing.email@gmail.com은 내 이메일 주소인 ?utm_email=testing.email@gmail.com으로 대체합니다.
   
   
3. 페이지를 새로고침합니다.
4. 사이트의 제품 페이지로 이동하여 장바구니에 추가됨 버튼을 클릭합니다.
5. Klaviyo에서 이메일 주소를 검색합니다.
   

Klaviyo 프로필이 생성되었고(아직 생성되지 않은 경우) 활동 피드에서 이 장바구니에 추가됨 이벤트가 추적된 것을 확인할 수 있습니다.

주어진 스니펫으로 '장바구니에 추가됨' 이벤트를 추적하는 데 어려움이 있나요?

주어진 코드 조각으로 장바구니에 추가됨을 추적하는 데 문제가 있는 경우, 아래의 두 가지 추가 코드 조각(스니펫 2 및 스니펫 3)을 사용해 볼 수 있습니다. 먼저 새 스니펫을 테스트하기 전에 작동하지 않는 스니펫을 제거해야 합니다.

시도할 백업 스니펫 결정하기

스토어에서 버튼 ID를 사용하여 장바구니에 추가됨 버튼을 정의하나요? 만약 그럴 경우, ‌스니펫 2를 사용해 보세요. 장바구니에 추가됨 버튼이 대신 클래스 표기법으로 정의된 경우에는 스니펫 3을 사용해야 합니다. 스토어에서 버튼 ID, 클래스 표기법 중 무엇을 사용하는지 확인하는 방법은 다음과 같습니다.

1. 1. 사이트의 제품 페이지 중 하나를 엽니다. 
   2. '장바구니에 추가됨' 버튼을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
   3. 콘솔이 열리고, 콘솔의 요소 탭에 '장바구니에 추가됨' 버튼의 소스 코드가 표시됩니다.
   4. 요소 탭에서 코드는 다음과 같이 보일 수 있습니다.
      
   5. 이 '장바구니에 추가됨' 버튼에는 버튼 ID(예: id = "button_ID_name")가 없으며, 대신 클래스 표기법(class= "btn product-form_cart-submit btn–secondary-accent")으로 참조된다는 점에 유의하세요.

스니펫 2

장바구니에 추가됨 버튼이 버튼 ID로 정의된 경우 아래 스니펫과 함께 필요한 태그를 Shopify 스토어에 추가합니다. "어디에 스니펫을 배치해야 하나요?" 섹션에서 설명된 위치에 추가하면 됩니다.

<script type="text/javascript">
var _learnq = _learnq || [];
	document.getElementById("AddToCart").addEventListener('click',function (){
 		_learnq.push(['track', 'Added to Cart', item]);
	});
</script>

스니펫의 장바구니에 추가됨 변수가 사이트에서 사용되는 버튼 ID와 일치해야 하므로 이 스니펫을 수정해야 할 수 있습니다.

장바구니 추가 변수의 기본 이름은 AddToCart이며, 아래 스니펫에 다음과 같이 강조 표시되어 있습니다.

버튼의 ID를 확인하려면 사이트에 버튼 ID가 있는지 확인할 때와 동일한 단계를 다음과 같이 거쳐야 합니다. 

1. 사이트의 제품 페이지 중 하나를 엽니다.
2. '장바구니에 추가됨' 버튼을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
3. 콘솔이 열리고 '장바구니에 추가됨' 버튼의 소스 코드가 표시됩니다. 다음 이미지는 콘솔에서 강조 표시된 '장바구니에 추가됨' 버튼의 ID를 보여줍니다.
   
   여기에 표시된 페이지의 버튼 ID(addToCart-product-template)는 기본 스니펫의 변수(AddToCart)와 다릅니다. 
4. 일치하지 않는 경우 버튼의 ID와 일치하도록 스니펫을 수정합니다. 예제의 수정된 스니펫은 다음과 같습니다.
   

스니펫 3

장바구니에 추가됨 버튼이 클래스 표기법으로 정의된 경우, 아래 스니펫과 함께 필요한 태그를 Shopify 스토어에 추가합니다. "어디에 스니펫을 배치해야 하나요?" 섹션에서 설명된 위치에 추가하면 됩니다.

<script type="text/javascript">
var _learnq = _learnq || [];
  var classname = document.getElementsByClassName("add-to-cart");
var addToCart = function() {
_learnq.push(['track', 'Added to Cart', item]);
}; for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', addToCart, false);
}
</script>

스니펫의 장바구니에 추가됨 변수가 사이트에서 사용되는 클래스와 일치해야 하므로 이 스니펫을 수정해야 할 수 있습니다.

1. 사이트의 제품 페이지 중 하나를 엽니다.
2. '장바구니에 추가됨' 버튼을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
3. 콘솔이 열리고 '장바구니에 추가됨' 버튼의 소스 코드가 표시됩니다. 다음 이미지는 콘솔에서 강조 표시된 '장바구니에 추가됨' 버튼의 클래스를 보여줍니다.
   
4. 위 예시에서 강조 표시된 따옴표 사이의 버튼 코드와, 위 코드 스니펫의 getElementsByClassName 뒤 괄호 안의 내용을 비교하세요. 예를 들어, 스크린샷에 나열된 클래스는 btn product-form_cart-submit btn--secondary-accent이고 스니펫에 나열된 변수는 add-to-cart입니다.
5. 일치하지 않는 경우 버튼의 클래스와 일치하도록 스니펫을 수정합니다. 예제의 수정된 스니펫은 다음과 같습니다.
   

이처럼 다양한 옵션을 시도한 후에도 장바구니에 추가됨을 추적하는 데 문제가 발생한다면 장바구니에 추가됨 버튼을 식별하는 데 문제가 있는 것일 수 있습니다. 이 경우 Klaviyo 지원 팀에 문의하세요.

다음 단계: '장바구니 이탈' 플로우 활성화하기

기본 Klaviyo 장바구니 이탈 플로우는 결제 시작됨 이벤트에 의해 트리거되는 반면, 장바구니에 추가됨의 장바구니 이탈 플로우는 아직 결제를 시작하지 않은 보다 일반적인 쇼핑객을 타겟으로 합니다.

이 플로우를 활성화하려면 다음과 같이 Klaviyo의 플로우 라이브러리에서 제공되는 사전 구축된 플로우를 사용하는 것이 좋습니다.

1. Klaviyo의 플로우 라이브러리로 이동합니다.
2. '판매 손실 방지' 목표 섹션을 클릭합니다.
3. 장바구니에 추가됨 트리거, 장바구니 이탈 알림 플로우를 선택합니다. 이메일만 사용하거나, 이메일과 SMS를 함께 사용하는 두 가지 옵션이 있습니다.
   
4. 장바구니에 추가됨 이벤트를 생성한 경우, 이 플로우에는 모든 권장 필터와 동적 이메일 콘텐츠가 준비되어 개인화된 장바구니 후속 메시징을 제공할 수 있습니다.

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

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

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

결과 

이제 Shopify 장바구니에 추가됨 이벤트를 생성 및 테스트하고, 장바구니 이탈 플로우를 활성화했습니다. 

추가 리소스

• 장바구니 이탈 플로우 시작하기
• Shopify 데이터 참조
• Shopify 통합 문제 해결