헤드리스 Magento 2 설정을 통합하는 방법
학습 내용
헤드리스 Magento 2 설정에서 Klaviyo를 통합하는 방법을 알아보세요. Magento 2를 전자상거래 스토어 백엔드를 구동하는 데 사용하지만 프런트엔드에는 다른 프레임워크(예: React.js)를 사용하는 경우, Angular 등을 사용하는 경우 다음 정보가 도움이 돼요.
이 연동에는 3단계가 필요해요:
- Klaviyo의 기본 제공 연동을 통해 Magento 2 스토어를 연결해 주문, 카탈로그, 구독자 데이터를 동기화하세요.
- 온사이트 트래킹 기능을 사용 설정하려면 사이트에 코드 조각을 수동으로 추가하세요.
- (제품 카탈로그에 맞춤 URL 구조를 사용 중인 경우) 제품 URL의 재작성 규칙을 추가해 주세요.
Klaviyo 기본 연동 연결
먼저 Klaviyo의 기본 연동을 통해 Magento 2 스토어를 연결하여 주문, 카탈로그, 구독자 데이터를 동기화하세요. Magento 2 시작하기의 단계를 따라 진행하면 됩니다.
Klaviyo의 Magento 2 연동은 대부분 Magento의 서버 측 API를 통해 데이터를 가져오는 방식에 의존합니다. 일반적으로 디커플드 프런트엔드를 사용해도 영향이 없으며, 기본 연동은 추가 설정 없이 다음 이벤트를 추적합니다.
- '완료된 주문'
- '처리된 주문'
- '처리된 배송'
- '취소된 주문'
- '환불된 주문'
- 결제 시작
또한 다음 사항에 유의해 주세요:
- 사용자가 체크아웃할 때 계속 견적을 생성하고 여기에 이메일 주소를 할당하고 있다면 Started Checkout 이벤트가 동기화돼요.
- Magento 2 뉴스레터 테이블에 구독한 고객을 동기화하도록 설정했다면 동기화는 예상대로 작동할 거예요.
코드 조각을 수동으로 추가
헤드리스 설정을 사용 중이라면 Klaviyo의 “사이트 내 활성” JavaScript(또는 Klaviyo.js)를 사이트에 수동으로 추가해야 해요. Klaviyo.js는 사용자가 사이트에서 활성 상태인지 추적하고 Klaviyo 양식을 사용할 수 있도록 해요.
또한 다음 작업을 할 수 있도록 스니펫을 제공해요:
- 조회한 제품 트래킹
사용자가 사이트에서 특정 제품을 조회할 때를 트래킹해요(탐색 이탈 플로우에서 활용할 수 있어요). - 최근 조회한 항목 트래킹
사용자 프로필에서 최근에 조회한 항목을 트래킹하세요. - 장바구니에 추가됨 트래킹
사용자가 장바구니에 항목을 추가하는 시점을 트랙킹합니다. - 로그인한 사용자 트래킹
계정 생성 기능이 있다면, 사용자가 로그인하는 시점을 트래킹하세요.
'사이트 내 활성 상태'
다음 Klaviyo.js 코드 조각을 추가해 웹사이트의 모든 페이지에 표시되도록 하세요. 그러면 사이트에서 활성 트래킹과 Klaviyo 양식을 사용할 수 있어요. PUBLIC_API_KEY를 Klaviyo 공개 API 키로 바꿔 주세요.
<script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>Klaviyo.js를 추가한 후, Viewed Product, Added to Cart 등 다음 스니펫 중 하나를 추가하려는 모든 페이지에서 Klaviyo object 를 로드해야 해요. klaviyo 객체는 페이지당 한 번만 로드하면 돼요.
klaviyo 객체를 로드하려면 필요한 페이지에 아래 스니펫을 수동으로 설치해 주세요:
<script type="text/javascript"> !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=new 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>조회한 제품
탐색 이탈 플로우를 설정하거나 제품 탐색 활동을 기반으로 세그먼트를 만들려면 Viewed Product 지표에 대한 JavaScript 이벤트 트래킹을 추가해야 해요. 모든 Viewed Product 지표는 사용자 프로필에 연결돼 있어요. 제품 페이지 템플릿에 다음 스니펫을 추가하세요.
<script type="text/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("Viewed Product", item);
</script>스니펫의 JSON 속성 값이 해당 속성에 필요한 관련 정보를 동적으로 가져오도록 값을 업데이트해 주세요.
최근 조회한 품목
또한 사용자의 프로필에서 시각적 “최근 본 항목” 피드에 항목을 추가할 수 있는 다른 스니펫도 있어요. 다음 스니펫은 조회한 제품 스니펫 바로 아래에 추가할 수 있어요.
스니펫에서 item.___를 플랫폼에서 제품 속성에 사용하는 item 객체로 바꿔 주세요.
<script type="text/javascript">
var klaviyo = window.klaviyo || [];
klaviyo.trackViewedItem({
"Title": item.ProductName,
"ItemId": item.ProductID,
"Categories": item.Categories,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"Metadata": {
"Brand": item.Brand,
"Price": item.Price,
"CompareAtPrice": item.CompareAtPrice
}
});
</script>'장바구니에 추가됨'
장바구니에 상품을 추가했지만 결제 페이지까지 진행하지 않은 방문자에게 장바구니 이탈 이메일을 보내려면 Added to Cart 지표를 추적해야 해요. 이 이벤트를 추적하려면 고객이 식별되어야 해요(즉, 쿠키가 설정되어야 해요). 다음은 장바구니에 이미 항목 1개(위니 더 푸)가 들어 있고, 다른 항목 1개(두 도시 이야기)가 방금 장바구니에 추가된 예시 요청이에요:
<script type="text/javascript">
klaviyo.track("Added to Cart", {
"$value": 29.98,
"AddedItemProductName": "A Tale of Two Cities",
"AddedItemProductID": "1112",
"AddedItemSKU": "TALEOFTWO",
"AddedItemCategories": ["Fiction", "Classics", "Children"],
"AddedItemImageURL": "http://www.example.com/path/to/product/image2.png",
"AddedItemURL": "http://www.example.com/path/to/product2",
"AddedItemPrice": 19.99,
"AddedItemQuantity": 1,
"ItemNames": ["Winnie the Pooh", "A Tale of Two Cities"],
"CheckoutURL": "http://www.example.com/path/to/checkout",
"Items": [{
"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 제품 카탈로그는 기본 연동을 통해 Klaviyo와 정상적으로 동기화되어야 하지만, 맞춤 URL 구조를 사용 중이라면 코드베이스에 몇 가지 rewrite 규칙을 추가해야 해요.
기본 Magento 2 제품 URL은 아래 구조를 따릅니다:
https://[YOUR STORE]/catalog/product/view/id/[PRODUCT ID]스토어에서 다음과 같은 URL 구조를 사용하는 경우:
https://[YOUR STORE]/products/[Product Name]그런 다음 표준 Magento 2 제품 링크를 맞춤 URL 구조로 리디렉션하도록 코드베이스에 일부 다시 쓰기 규칙을 추가해야 해요.