학습 내용
Shopify에 대한 장바구니에 추가됨 이벤트를 수동으로 생성하여 고객이 장바구니에 상품을 추가하는 시점을 추적하고 장바구니 이탈 플로우를 트리거하는 방법을 알아보세요.
Klaviyo는 이제 활성화된 경우 Shopify 연동을 통해 자동으로 동기화되는 장바구니에 추가됨을 Shopify 브랜드로 제공합니다. 브랜드 이벤트는 Klaviyo에서 적극적으로 관리하므로 사용하는 것을 권장합니다. 자동 이벤트를 사용하지 않는 경우 이 문서에서 톱니바퀴 아이콘으로 Klaviyo에 동기화되는 코드 조각을 사용하여 이벤트를 수동으로 만드는 방법을 자세히 설명합니다.
장바구니에 추가됨은 Klaviyo의 결제 시작됨 이벤트와는 다릅니다. 결제 시작됨은 고객이 장바구니에 품목을 추가하고 결제 과정에서 이메일을 입력한 후 결제를 계속하면 트리거됩니다. 이는 퍼널 아래 쪽에서 발생하는 반면, 장바구니에 추가됨은 고객이 장바구니에 상품을 추가하는 즉시 트리거됩니다.
시작하기 전에시작하기 전에
- 이 문서를 계속 읽기에 앞서 Shopify 시작하기 문서를 통해 연동에 대한 단계별 지침을 읽어보세요.
- 장바구니에 추가됨 이벤트가 제대로 작동하려면 Klaviyo 현장 추적 을 활성화되어(조회한 제품 트래킹 포함) 있는지 확인하세요.
- 장바구니에 추가됨 이벤트는 Klaviyo가 이전에 쿠키를 수집한 사용자만 추적한다는 점에 유의하세요.
Klaviyo는 Shopify의 고객 개인정보 보호 설정에 따라 방문자가 동의하지 않는 한 유럽연합(EU), 유럽경제지역(EEA), 영국 및 스위스의 Shopify 스토어 방문자에 대한 온사이트 이벤트를 추적하지 못할 수 있습니다.
'장바구니에 추가됨' 이벤트 생성
장바구니에 추가됨 이벤트를 생성하려면 다음의 3단계를 따르세요.
- 코드 조각을 배치할 위치 선택
- 스토어에 조각 추가
- 코드 조각 테스트
스니펫을 어디에 붙여넣어야 하나요?
기본 제품 페이지와 다른 제품 페이지에 모두 스니펫을 붙여넣어야 합니다.
스토어에 사용자 정의 리퀴드 블록이 있는 경우, 스니펫에 해당 블록을 사용해야 합니다.스토어에 사용자 정의 리퀴드 블록이 있는 경우, 스니펫에 해당 블록을 사용해야 합니다.
- Shopify에서 온라인 스토어 > 테마로 이동합니다.
- 테마를 찾아 사용자 정의를 클릭합니다.
- 페이지 상단에서 홈페이지 드롭다운을 클릭합니다.
- 제품 > 기본 제품을 선택하면 기본 제품 페이지로 이동합니다.
- 왼쪽 사이드바에서 추가 섹션을 클릭한 다음 사용자 정의 리퀴드를 선택합니다.
- 제공된 스니펫을 상자 안에 붙여넣습니다.
- 오른쪽 상단의 저장을 클릭합니다.
- 왼쪽 사이드바를 보면 장바구니에 추가됨를 위한 새 사용자 정의 리퀴드 블록이 페이지의 다른 섹션 아래에 자동으로 표시됩니다.
-
장바구니에 추가됨 블록을 이동해야 하는 경우, 블록 위로 마우스를 가져가서 점 6개 아이콘을 클릭하고 다른 섹션 아래로 드래그합니다.
-
장바구니에 추가됨 블록을 이동해야 하는 경우, 블록 위로 마우스를 가져가서 점 6개 아이콘을 클릭하고 다른 섹션 아래로 드래그합니다.
스토어에 사용자 정의 리퀴드 블록이 없는 경우 theme.liquid 파일에 스니펫을 배치해야 합니다.
- Shopify에서 온라인 스토어 > 테마로 이동합니다.
- 테마를 찾아 사용자 정의를 클릭합니다.
- 상단의 점 3개 아이콘을 클릭하고 코드 편집을 선택합니다.
- theme.liquid 파일을 엽니다.
- 다른 모든 코드 뒤에 제공된 스니펫을 클로징
</body >
태그 앞에 붙여넣습니다.
- 스니펫 위에 다음 오프닝 태그를 추가합니다.
{% if product %}
- 코드 조각 바로 뒤에 다음 클로징 태그를 추가합니다.
{% endif %}
- 파일은 다음과 같은 모습이어야 합니다.
- 저장을 클릭합니다.
사이트에 스니펫 추가
다음 장바구니에 추가됨 스니펫은 대부분의 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에서 추적하는 대상에 관해 자세히 알아보려면 현장 추적에 대한 도움말 문서를 참조하세요.
장바구니에 추가됨 이벤트를 테스트하려면 직접 이메일 주소를 수동으로 쿠키에 추가해야 합니다. 다음 단계를 따르세요.
- 웹사이트로 이동합니다.
- 홈페이지에서 URL 끝에 다음을 추가하세요. testing.email@gmail.com은 내 이메일 주소인 ?utm_email=testing.email@gmail.com으로 대체합니다.
- 페이지를 새로고침합니다.
- 사이트의 제품 페이지로 이동하여 장바구니에 추가됨 버튼을 클릭합니다.
- Klaviyo에서 이메일 주소를 검색합니다.
Klaviyo 프로필이 생성되었고(아직 생성되지 않은 경우) 활동 피드에서 이 장바구니에 추가됨 이벤트가 추적된 것을 확인할 수 있습니다.
주어진 스니펫으로 '장바구니에 추가됨' 이벤트를 추적하는 데 어려움이 있나요?주어진 스니펫으로 '장바구니에 추가됨' 이벤트를 추적하는 데 어려움이 있나요?
주어진 코드 조각으로 장바구니에 추가됨를 추적하는 데 문제가 있는 경우, 아래의 두 가지 추가 코드 조각(스니펫 2 및 스니펫 3)을 사용해 볼 수 있습니다. 새 스니펫을 테스트하기 전에는 먼저 작동하지 않는 스니펫을 제거해야 합니다.
시도할 백업 스니펫 결정하기시도할 백업 스니펫 결정하기
스토어에서 버튼 ID를 사용하여 장바구니에 추가됨 버튼을 정의하나요? 만약 그럴 경우, 스니펫 2를 사용해 보세요. 장바구니에 추가됨 버튼이 대신 클래스 표기법으로 정의된 경우에는 스니펫 3을 사용해야 합니다. 스토어에서 버튼 ID, 클래스 표기법 중 무엇을 사용하는지 확인하는 방법은 다음과 같습니다.
-
- 사이트의 제품 페이지 중 하나를 엽니다.
- '장바구니에 추가됨' 버튼을 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다.
- 콘솔이 열리고, 콘솔의 요소 탭에 '장바구니에 추가됨' 버튼의 소스 코드가 표시됩니다.
-
요소 탭에서 코드는 다음과 같이 보일 수 있습니다.