Volusion과 통합하는 방법
학습 내용
Volusion과 클라비요를 통합하는 방법을 알아보세요. 이 단계를 완료하면 동기화된 주문 데이터와 고객 속성을 기반으로 이메일을 개인화 및 타겟팅할 수 있습니다.
클라비요는 Volusion에서 주문한 제품 및 배치된 주문 통계를추적하며, 몇 가지 추가 코드를 추가하면 포기한 장바구니 정보도추적할 수 있습니다.
시작하기 전 안내 사항시작하기 전 안내 사항
Volusion은 90일마다 Volusion 스토어의 관리자 계정 비밀번호를 업데이트해야 합니다. 이 업데이트를 Volusion 계정에서 수행할 때, 클라비요 계정에서 Volusion 연동도 함께 업데이트해야 합니다. 이 문서의 해당 섹션에 있는 단계에 따라 영구 API 키를 만들 수도 있습니다.
클라비요에 Volusion 통합 추가하기클라비요에 Volusion 통합 추가하기
- Klaviyo에서 연동 탭을 선택합니다.
- '앱 탐색'을 선택하세요.
- Volusion을 검색하고 카드를 클릭한 다음 설치를 클릭합니다.
- 다음 페이지에서 스토어 URL, 로그인 이메일, API 키/암호화된 비밀번호를 입력합니 다. 그런 다음 Volusion에 연결을 클릭합니다.
- 다음 페이지에 클라비요 목록에 새로운 Volusion 고객 추가확인란이 표시됩니다. 이 확인란을 선택하면 클라비요에서 향후 고객이 주문할 때 추가할 목록 중 하나를 선택할 수 있습니다.
- 마지막으로 설정 완료를 클릭합니다.
클라비요에서 이메일 웹 추적 비활성화하기
- 클라비요의 "이메일에서 웹 추적" 기능은 클릭 추적을 사용하여 클라비요 이메일을 통해 웹사이트에 도착한 사용자를 원래 식별하기 전(예: 구매를 하거나 이메일 목록에 가입한 경우)에 식별합니다.
- Volusion은 클릭 추적에서 사용하는 URL 형식을 지원하지 않으며 사용자가 이러한 링크 중 하나를 통해 스토어를 방문하려고 할 때 오류가 발생하므로 이메일의 링크가 Volusion 스토어로 올바르게 연결되도록 하려면 Klaviyo에서 이 기능을 비활성화해야 합니다.
- 계정 이름 > 설정 > 이메일 > 어트리뷰션 아래의 계정 설정에서 이 추적을 사용 중지할 수 있습니다.
- 이 기능을 비활성화하면 웹사이트의 새 프로필을 클릭한 이메일을 통해 추적할 수 있는 기능만 손실됩니다. 웹사이트에 클라비요 현장 추적 분석 기능이 있는 한(다음 섹션에서 추가할 예정임), 스토어에서 구매하거나 이메일 목록에 가입할 때 이메일 주소를 받으면 바로 사용자를 추적할 수 있습니다.
Volusion 스토어에 현장 추적 추가
클라비요는 고객에 대한 귀중한 정보를 수집하는 데 도움이 되는 두 가지 현장 추적 스니펫을 제공합니다:
-
사이트에서 활성화됨
이 스니펫은 고객이 사이트를 방문하는 시점을 추적합니다. 조회한 제품 등의 다른 스니펫이 작동하려면 이 스니펫을 사이트에 추가해야 합니다. -
조회한 제품
이 스니펫은 고객이 특정 제품을 조회하는 시점을 추적합니다. 스토어에 조회된 제품 코드 스니펫을 추가하여 이 이벤트를 추적할 수 있습니다.
사이트 내 활성 추적 추가
웹사이트의 모든 페이지에 표시되도록 다음 Klaviyo.js 스니펫을 추가합니다. 이렇게 하면 사이트 내 추적 및 클라비요 양식을 활성화할 수 있습니다. PUBLIC_API_KEY를 클라비요 공개 API 키로 바꿔야 합니다.
<스크립트 유형="application/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>
<script type="text/javascript"> //페이지 로드 시 Klaviyo 객체를 초기화하는 스크립트 !function(){if(!window.Klaviyo){wow._klOnsite=wow._klOnsite||[];try{wow.Klaviyo=새로운 프록시({},{get:function(n,i){return"푸시"===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=새 Promise((function(n){window._klOnsite.푸시([i].concat(o,[function(i){t&&t(i),n(i)}]))});return e}}})}catch(n){window.Klaviyo=window.Klaviyo[],window.Klaviyo.푸시=function(){var n;(n=window._klOnsite).푸시.적용(n,인수)}}}}(); </script>
조회한 제품 추적 추가조회한 제품 추적 추가
조회한 제품 추적을 사용하도록 설정하려면 디자인 > 파일 편집기를 클릭하여 찾을 수 있는 Volusion의 파일 편집기에서 스토어의 템플릿 페이지에 아래 코드 스니펫을 추가해야 합니다.
<스크립트 유형="텍스트/자바스크립트">
// 코드를 실행하기 전에 고객이 제품 페이지에 있는지 확인합니다.
if ($("meta[속성='og:type']").attr("content") == "product") {
var klaviyo = window.klaviyo || [];
// 상품 조회 시간 추적 함수
var trackViewedProduct = function(item) {
klaviyo.track("조회됨 제품", 항목);
klaviyo.trackViewedItem({
"제목": item.ProductName,
"ItemId": item.ProductID,
"ImageUrl": item.ImageURL,
"Url": item.URL,
"메타데이터": {
"Price": item.Price,
"Description": item.Description,
"CompareAtPrice": item.CompareAtPrice,
"YouSave": item.YouSave
}
});
};
var item = {}
.get(`/ProductDetails.asp?ProductCode=${global_Current_ProductCode}`, function(data) {}
var product_saleprice = $("table.colors_pricebox div.product_saleprice").length ?
숫자(`${$("table.colors_pricebox div.product_saleprice").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_saleprice").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : null;
var product_listprice = $("table.colors_pricebox div.product_listprice").length ?
Number(`${$("table.colors_pricebox div.product_listprice").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_listprice").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : null;
var product_productprice = $("table.colors_pricebox div.product_productprice").length ?
Number(`${$("table.colors_pricebox div.product_productprice").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_productprice").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : null;
var product_yousave = $("table.colors_pricebox div.product_yousave").length ?
Number(`${$("table.colors_pricebox div.product_yousave").text().trim().split("$")[1].split(".")[0]}.${$("table.colors_pricebox div.product_yousave").text().trim().split("$")[1].split(".")[1].substring(0,2)}`) : 0;
item = {
"ProductName": $("meta[property='og:title']").attr("content"),
"ProductID": global_Current_ProductCode,
"Description": $("meta[property='og:description']").attr("content"),
"ImageURL": $("meta[property='og:image']").attr("content"),
"URL": $("meta[property='og:url']").attr("content"),
"Price": product_saleprice ? product_saleprice : product_productprice,
"CompareAtPrice": product_listprice ? product_listprice : product_productprice,
"YouSave": product_yousave
};
trackViewedProduct(item);
});
}
</script>
버려진 장바구니 알림 추가버려진 장바구니 알림 추가
Volusion은 통합을 통해 버려진 카트를 추적하는 즉시 사용 가능한 방법을 제공하지는 않지만, Klaviyo에서 이 기능을 사용할 수 있도록 Volusion 스토어에 추가할 수 있는 사용자 지정 스크립트를 만들었습니다. 상점 템플릿에 코드를 추가하는 데 약간의 지식이 필요하므로 개발자가 있는 경우 이 문서를 보내 코드 추가를 안내할 수 있습니다.
버려진 카트 기능은 한 페이지 결제 기능을 사용하는 Volusion 스토어와 사용자가 구매하기 전에 계정이 필요하지 않은 스토어에 서만 작동합니다.
-
디자인 > 파일 편집기를 클릭하여 찾을 수 있는 Volusion의 파일 편집기에서 스토어의 템플릿 페이지에 아래 코드 조각을 추가해야 합니다.
<스크립트 유형="텍스트/자바스크립트"> // 코드를 실행하기 전에 고객이 결제 페이지에 있는지 확인합니다. if (window.location.pathname == "/one-page-checkout.asp") { var klaviyo = window.klaviyo || []; // 결제 시작 시점을 추적하는 함수입니다. var trackStartedCheckout = function() { $.post('/AjaxCart.asp', 함수(데이터) { if (!데이터 || !데이터.제품 || !데이터.제품.길이) { return; } var items = [], names = [], skus = []; // 각 상품과 해당 SKU/이름/수량/가격/총 가격/이미지 URL 가져옵니다. .each(data.Products, function(i, record) { var item_price = +(record.ProductPrice.replace(/[\$,]+/g, '')) / record.Quantity; items.push({ SKU: record.ProductCode, Name: record.ProductName, Quantity: +record.Quantity, ItemPrice: item_price, RowTotal: item_price * record.Quantity, ImageURL: record.ImageSource }); names.push(record.ProductName); skus.push(record.ProductCode); }); // 고객 데이터와 함께 결제 시작 메트릭을 클라비요에 푸시합니다. klaviyo.track("시작됨 체크아웃", { $value: +(data.Totals[0].CartTotal.replace(/[\$,]+/g, "")), Items: items, ProductNames: names, SKUs: skus }); }, 'json'); }; $(function() { // 이메일 양식을 가져와서 고객 이메일을 받고 클라비요에서 해당 이메일에 이벤트를 연결합니다. $('[name="OnePageCheckoutForm"] [name="Email"]').change(function(e) { var email = $(this).val(); // 가벼운 유효성 검사를 수행합니다. 클라비요는 데이터가 수신되면 더 많은 유효성 검사를 수행합니다. if (이메일 && /@/.test(이메일)) { klaviyo.identify({ $email: email }); 트랙스타트 체크아웃(); } }); }); }
</script> - 이 코드는 앞으로의 결제 이벤트만 추적할 수 있으며, 중단된 카트 플로우를 클라비요 내에서 다시 채울 수는 없습니다.
- 이 코드를 스토어에 저장하면 클라비요는 중단된 카트 흐름을 트리거할 수 있는 결제 시작 메트릭을 자동으로 추적하기 시작합니다.
클라비요 동기화 모니터링
- Volusion, Klaviyo 과 통합되면 데이터를 동기화할 시간이 필요합니다. 연동 탭으로 돌아가서 Volusion 활성화 연동 목록에서 연동을 찾으면 이 동기화 상태를 확인할 수 있습니다.