학습 내용
클라비요를 헤드리스 Magento 2 설정과 통합하는 방법에 대해 알아보세요. Magento 2를 사용하여 전자상거래 스토어의 백엔드를 구동하지만 프런트엔드에는 다른 프레임워크(예: React.js, 각도 등)를 사용하는 경우 다음 정보가 해당됩니다.
이 통합에는 3단계가 필요합니다:
- 클라비요의 기본 통합을 통해 Magento 2 스토어를 연결하여 주문, 카탈로그 및 구독자 데이터를 동기화하세요.
- 사이트에 코드 스니펫을 수동으로 추가하여 현장 추적 기능을 활성화합니다.
- (제품 카탈로그에 사용자 지정 URL 구조를 사용하는 경우) 제품 URL에 대한 재작성 규칙을 추가합니다.
클라비요의 기본 통합 기능 연결
먼저 Magento 2 시작하기의 단계에 따라 클라비요의 기본 통합을 통해 Magento 2 스토어를 연결하여 주문, 카탈로그 및 가입자 데이터를 동기화합니다.
클라비요의 Magento 2 통합의 대부분은 Magento의 서버 측 API를 통해 데이터를 가져오는 데 의존합니다. 일반적으로 디커플링된 프론트엔드를 사용해도 영향을 받지 않으며, 기본 통합은 추가 설정 없이 다음 이벤트를 추적합니다:
- 주문하기
- 주문 처리됨
- 주문 처리된 배송
- 취소된 주문
- 환불된 주문
- 결제 시작
또한 다음 사항에 유의하세요:
- 사용자가 결제할 때 여전히 견적을 생성하고 이메일 주소를 할당하고 있다면 결제 시작 이벤트가 동기화됩니다.
- Magento 2 뉴스레터 테이블에 가입한 고객 동기화를 사용하도록 설정한 경우 동기화가 예상대로 작동합니다.
코드 스니펫 수동 추가
헤드리스 설정을 사용하는 경우 클라비요의 "사이트 내 활성" 자바스크립트( Klaviyo.js라고도 함)를 사이트에 수동으로 추가해야 합니다. Klaviyo.js는 사용자가 사이트에서 활동하는 시간을 추적하고 Klaviyo 양식을 활성화합니다.
또한 다음을 수행할 수 있는 스니펫도 제공합니다:
-
조회한 제품 추적
사용자가 사이트에서 특정 제품을 조회한 시점을 추적합니다( 검색 포기 흐름에서 활용할 수 있음). -
최근 본 항목 추적
사용자 프로필에서 최근에 본 항목을 추적합니다. -
카트 추적에 추가
사용자가 장바구니에 상품을 추가하는 시점을 추적합니다. -
로그인한 사용자 추적
계정 생성 기능이 있는 경우 사용자가 로그인하는 시점을 추적합니다.
사이트에서 활성화
웹사이트의 모든 페이지에 표시되도록 다음 Klaviyo.js 스니펫을 추가합니다. 이렇게 하면 사이트 내 추적 및 클라비요 양식을 활성화할 수 있습니다. PUBLIC_API_KEY를 클라비요 공개 API 키로 바꿔야 합니다.
<스크립트 유형="텍스트/자바스크립트" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Klaviyo.js를 추가한 후 다음 스니펫 중 하나(예: 본 제품 , 장바구니에 추가 등)를 추가하려는 페이지에 클라비요 객체를 로드해야 합니다. klaviyo 객체는 페이지당 한 번만 로드하면 됩니다.
클라비요 객체를 로드하려면 필요한 페이지에 다음 스니펫을 수동으로 설치합니다:
<스크립트 유형="텍스트/자바스크립트"> !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>
조회한 제품
검색 포기 흐름을 설정하거나 제품 검색 활동을 기반으로 세그먼트를 구축하려면 조회한 제품 메트릭에 JavaScript 이벤트 추적을 추가해야 합니다. 모든 조회된 제품 지표는 사용자 프로필에 연결됩니다. 제품 페이지 템플릿에 다음 코드 조각을 추가합니다.
<스크립트 유형="텍스트/자바스크립트">
var klaviyo = window.klaviyo || [];
var item = {
"ProductName": item.ProductName,
"ProductID": item.ProductID,
"SKU": item.SKU,
"Categories": item.Categories,
"ImageURL": item.ImageURL,
"URL": item.URL,
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
};
klaviyo.track("조회됨 제품", 항목);
</script>해당 속성에 필요한 관련 정보에서 동적으로 가져올 수 있도록 스니펫의 JSON 속성 값을 업데이트해야 합니다.
최근 본 항목최근 본 항목
또한 사용자 프로필의 시각적 '최근 본 항목' 피드에 항목을 추가할 수 있는 또 다른 스니펫이 있습니다. 조회한 제품 스니펫 바로 아래에 다음 스니펫을 추 가할 수 있습니다.
스니펫의 item.___을 플랫폼에서 제품 속성에 사용하는 항목 개체로 바꿔야 합니다.
<스크립트 유형="텍스트/자바스크립트">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
"제목": item.ProductName,
"ItemId": item.ProductID,
"카테고리": 항목.카테고리
"ImageUrl": item.ImageURL,
"Url": item.URL,
"메타데이터": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
});
</script>장바구니에 추가
장바구니에 품목을 추가했지만 결제 페이지로 이동하지 않은 방문자에게 중단된 장바구니 이메일을 보내려면 장바구니에 추가됨 메트릭을 추적하는 것이 좋습니다. 이 이벤트를 추적하려면 고객을 식별(즉, 쿠키)해야 합니다. 다음은 카트에 이미 하나의 품목(곰돌이 푸)이 포함되어 있고 다른 품목(두 도시 이야기)이 방금 추가된 요청의 예입니다:
<스크립트 유형="텍스트/자바스크립트">
klaviyo.track("장바구니에 추가", {
" value": 29.98,
"AddedItemProductName": "두 도시 이야기",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["소설", "고전", "어린이"],
"AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
"AddedItemURL": "http://www.example.com/path/to/product2",
"AddedItemPrice": 19.99,
"AddedItemQuantity": 1,
"상품명": ["곰돌이 푸", "두 도시 이야기"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"항목": [{
"ProductID": "1111",
"SKU": "WINNIEPOOH",
"ProductName": "Winnie the Pooh",
"Quantity": 1,
"ItemPrice": 9.99,
"RowTotal": 9.99,
"ProductURL": "http://www.example.com/path/to/product",
"ImageURL": "http://www.example.com/path/to/product/image.png",
"ProductCategories": ["Fiction", "Children"]
},
{
"ProductID": "1112",
"SKU": "TALEOFTWO",
"ProductName": "A Tale of Two Cities",
"Quantity": 1,
"ItemPrice": 19.99,
"RowTotal": 19.99,
"ProductURL": "http://www.example.com/path/to/product2",
"ImageURL": "http://www.example.com/path/to/product/image2.png",
"ProductCategories": ["Fiction", "Classics"]
}
]
});
</script>로그인한 사용자
고객이 웹사이트에서 계정을 만들 수 있는 경우 로그인한 사용자를 식별하고 추적하기 위해 추가 코드를 추가할 수 있습니다. 이 코드는 사용자가 로그인한 후에 실행해야 합니다.
다음은 시작하는 데 도움이 되는 스크립트 예제입니다:
klaviyo.identify({
"$email" : customer.email,
"$first_name" : customer.first_name,
"$last_name" : customer.last_name
});
제품 URL에 대한 재작성 규칙 추가하기
Magento 2 제품 카탈로그는 기본 통합을 통해 클라비요와 정상적으로 동기화되지만, 사용자 지정 URL 구조를 사용하는 경우 코드베이스에 몇 가지 재작성 규칙을 추가해야 합니다.
기본 Magento 2 제품 URL은 아래 구조를 따릅니다:
https://[귀하의 스토어]/카탈로그/제품/보기/id/[제품 ID]스토어에서 다음과 같은 URL 구조를 사용하는 경우:
https://[귀하의 스토어]/제품/[제품명]그런 다음 코드베이스에 몇 가지 재작성 규칙을 추 가하여 표준 Magento 2 제품 링크를 사용자 지정 URL 구조로 리디렉션해야 합니다.
추가 리소스