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

예상 7 읽은 시간(분)
|
업데이트 2024년 11월 22일 오후 1:22 EST
학습 내용

학습 내용

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

Klaviyo는 이제 활성화된 경우 Shopify 연동을 통해 자동으로 동기화되는 장바구니에 추가됨을 Shopify 브랜드로 제공합니다. 브랜드 이벤트는 Klaviyo에서 적극적으로 관리하므로 사용하는 것을 권장합니다. 자동 이벤트를 사용하지 않는 경우 이 문서에서 톱니바퀴 아이콘으로 Klaviyo에 동기화되는 코드 조각을 사용하여 이벤트를 수동으로 만드는 방법을 자세히 설명합니다.

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

시작하기 전에

시작하기 전에

Klaviyo는 Shopify의 고객 개인정보 보호 설정에 따라 방문자가 동의하지 않는 한 유럽연합(EU), 유럽경제지역(EEA), 영국 및 스위스의 Shopify 스토어 방문자에 대한 온사이트 이벤트를 추적하지 못할 수 있습니다.

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

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

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

  1. 코드 조각을 배치할 위치 선택
  2. 스토어에 조각 추가
  3. 코드 조각 테스트
스니펫을 어디에 붙여넣어야 하나요?

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

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

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

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

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

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

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

사이트에 스니펫 추가

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

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으로 대체합니다.
    Shopify에서 URL에 ?utm_email=example@gmail.com을 추가해 스토어 테스트
  3. 페이지를 새로고침합니다.
  4. 사이트의 제품 페이지로 이동하여 장바구니에 추가됨 버튼을 클릭합니다.
  5. Klaviyo에서 이메일 주소를 검색합니다.
    Klaviyo 대시보드 상단 모서리의 검색창에 입력된 testing.email@gmail.com

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

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

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

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

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

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

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

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

스니펫 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가 노란색으로 강조 표시된 Klaviyo의 '장바구니에 추가됨 '스니펫

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

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

스니펫 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. 콘솔이 열리고 '장바구니에 추가됨' 버튼의 소스 코드가 표시됩니다. 다음 이미지는 콘솔에서 강조 표시된 '장바구니에 추가됨' 버튼의 클래스를 보여줍니다.
    콘솔 내 '장바구니에 추가됨' 버튼 코드와 클래스가 노란색으로 강조 표시된 btn product-form_cart-submit btn--secondary-accent와 같습니다.
  4. 위 예시에서 강조 표시된 따옴표 사이의 버튼 코드와, 위 코드 스니펫의 getElementsByClassName 뒤 괄호 안의 내용을 비교하세요. 예를 들어, 스크린샷에 나열된 클래스는 btn product-form_cart-submit btn--secondary-accent이고 스니펫에 나열된 변수는 add-to-cart입니다.
  5. 일치하지 않는 경우 버튼의 클래스와 일치하도록 스니펫을 수정합니다. 예제의 수정된 스니펫은 다음과 같습니다.
    Klaviyo의 대체 '장바구니에 추가됨' 스니펫과 클래스 이름 값 btn product-form_cart-submit btn--secondary-accent

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

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

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

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

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

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

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 장바구니에 추가됨 이벤트를 생성 및 테스트하고, 장바구니 이탈 플로우를 활성화했습니다. 

추가 리소스

추가 리소스

이 도움말 문서가 유용했나요?
이 형식은 도움말 문서 피드백 용도로만 사용하세요. 지원 팀에 문의하는 방법.

Klaviyo에서 자세히 살펴보기

커뮤니티
동료, 파트너, Klaviyo 전문가와 연결되어 영감을 받고 인사이트를 공유하며, 모든 궁금한 사항에 대해 답을 얻으세요.
라이브 교육
Klaviyo 전문가와 함께하는 라이브 세션에 참여하여 모범 사례, 주요 기능 설정 방법 등에 대해 알아보세요.
지원

계정을 통해 지원에 액세스하세요.

이메일 지원 (무료 체험 및 유료 계정) 연중무휴 24시간 사용 가능

채팅/가상 비서
사용 가능 여부는 위치 및 요금제 유형에 따라 다름