개요
이 가이드가 제품 feed 생성 방법과 3D Cart 사이트에서 Criteo OneTag를 설치하는 방법을 설명합니다.
참고: 크리테오가 제공하는 플러그인, 확장 또는 코드 스니펫을 다운로드하여 사이트에서 소프트웨어 코드 및/또는 태그를 구현 및 테스트하는 것은 전적으로 사용자의 책임이며, 크리테오는 구현 시 발생한 오류에 대해 어떠한 책임도 지지 않습니다. 태그는 대부분 복사해 붙여 넣을 수 있는 상태이지만, 사이트에 따라 사용자의 수정이 일부 필요할 수도 있습니다.
|
제품 feed 생성 방법
3D Cart에는 부모 - 자식 구조가 있으므로 다른 곳에서 생성된 제품 ID 대신 3D Cart의 내부 제품 ID를 사용하는 것이 좋습니다. 제품 feed를 생성하려면 다음 6단계를 따르면 됩니다.
1단계: 가져오기/내보내기
2단계: 제품>관리로 이동
3단계: "새로 추가(Add New)"를 클릭하여 새로운 가져오기 생성
4단계: Criteo의 제품 feed 사양에 따라 항목 입력
열들은 기본값으로 설정되어 있으며, 필요한 경우 내보내기에 열을 추가할 수 있습니다.
- name (별칭: 제목)
- url_link (별칭: link)
- image1/thumbnail (별칭: image_link) 주의: 사이트 홈 URL을 접두사로 삽입하는 것을 잊지 마십시오.
- description (별칭: description)
- price (별칭: price)
- catalogid (별칭: id)
- saleprice (별칭: sale_price)
- instock_message (별칭: availability)
- categories (별칭: product_type)
- 정적 값에 대한 상수 (선택 사항)
5단계: 내보내기 예약
Go to Products > Choose your export under Custom Export Sets > Schedule
6단계: feed 링크 생성 http://www.domain.com/assets/exports/filename.csv
예약된 내보내기(Scheduled Exports) 메뉴 아래에서, 체크박스 Enable을 선택하고 파일명을 입력합니다. 작업(Action) 메뉴 아래에서 첫 번째 옵션인 파일 저장(Save File)을 선택합니다.
Criteo OneTag를 설치하는 방법
우선, 웹사이트 테마를 이용해야 합니다. Go to Settings > Design > Themes & Styles. 다음, 편집 템플릿 (HTML)을 클릭합니다.
각 템플릿은 다음과 같습니다:
- 홈페이지: home.html
- 페이지 목록: category_0.html. 카테고리 페이지에 2개 이상의 템플릿이 있을 수 있습니다.
- 제품 페이지: listing_0.html. 제품 페이지에 2개 이상의 템플릿이 있을 수 있습니다.
- 제품 페이지 (빨리 보기): quickview.html
- 카트/바스킷 페이지: view_cart.html
- 카트/바스킷 페이지 (빨리 보기 팝업): view_cart_quick.html
- 주문 확인 페이지: checkout-step4.html 4단계 체크아웃 시스템인 경우.
모든 태그를 하나의 조건문에 결합하는 경우 frame.html에 script를 추가할 수 있습니다.
Criteo OneTag를 통합하려면 다음의 5단계 과정을 따르십시오.
참고: 아래의 코드에서 변수 PARTNER_ID는 귀사의 고유 식별자입니다. 크리테오 담당자에게 요청하시면 제공해드립니다. |
1단계: 홈페이지 템플릿 > home.html
<!-- Criteo Homepage Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: PARTNER_ID},
{ event: "setSiteType", type: deviceType },
{ event: "setEmail", email: "" },
{ event: "viewHome", ecpplugin: "3dcart" }
);
</script>
<!-- END Criteo Home Page Tag -->
2단계: 목록 템플릿 > category_0.html
매크로 [catalogid]를 활용해 페이지의 제품 ID들을 HTML 또는 자바스크립 변수로 채워야 합니다.
목록 루프는 보통 다음의 START 및 END 주석과 함께 섹션 내에 위치합니다.
목록 루프 내에 다음 코드를 추가하면 자바스크립트로 제품 ID 어레이를 구축할 수 있습니다.
<!--START: CATEGORY_ITEMS-->
<!--START: ITEM_TEMPLATE_0–->
<script> var prodlist = prodlist||[]; prodlist.push("[catalogid]"); </script>
<!--END: ITEM_TEMPLATE_0-->
<!--END: CATEGORY_ITEMS–>

그리고 난 후 다음 태그를 복사합니다.
<!-- Criteo Listing Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var prodlist = prodlist||[]; prodlist.push("[catalogid]");
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: PARTNER_ID},
{ event: "setSiteType", type: deviceType },
{ event: "setEmail", email: "" },
{ event: "viewList", ecpplugin: "3dcart", item: prodlist }
);
</script>
<!-- END Criteo Listing Page Tag -->
Step 3: Product/Quick-view Template > listing_0.html or quickview.html
<!-- Criteo Product Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: PARTNER_ID},
{ event: "setSiteType", type: deviceType },
{ event: "setEmail", email: "" },
{ event: "viewItem", ecpplugin: "3dcart", item: "[catalogid]" }
);
</script>
<!-- END Criteo Product Page Tag -->
4단계: 장바구니/빠른 조회 템플릿 > view_cart.html or view_cart_quick.html
목록 태그와 마찬가지로, 장바구니 항목의 HTML 루프 내에 제품 어레이를 구축할 필요가 있습니다. 이는 다음의 START 및 END 주석의 섹션 내에 위치합니다.
<!--START: SHOPPING_CART_ITEM-->
<script> var cartData = cartData||[]; cartData.push({id: "[catalogid]", price: ("[ITEM_PRICE]").replace('$',''), quantity: [ITEM_QUANTITY] }); </script>
<!--END: SHOPPING_CART_ITEM-->
그리고 난 후 다음 태그를 복사합니다.
<!-- Criteo Product Basket Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
var cartData = [];
jQuery( document ).ready(function() {
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: PARTNER_ID},
{ event: "setSiteType", type: deviceType },
{ event: "viewBasket", ecpplugin: "3dcart", item: cartData });
});
</script>
<!-- END Criteo Basket Page Tag -->
5단계: 주문 확인 템플릿 > checkout-step4.html
목록 및 장바구니 태그와 마찬가지로, 다음의 START 및 END 주석 내에 제품 어레이를 구축해야 합니다.
<!--START: items-->
<script> var orderData=orderData||[]; orderData.push({ id: "[catalogid]", price: ("[unitprice]").replace('$',''), quantity: "[numitems]" }); </script>
<!--END: items-->
다음 태그를 복사합니다.
<!-- Criteo Sales Page Tag -->
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
{ event: "setAccount", account: PARTNER_ID},
{ event: "setSiteType", type: deviceType },
{ event: "setEmail", email: "[oemail]"},
{ event: "trackTransaction", ecpplugin: "3dcart", id: "[invoicenum]" , item: orderData });
</script>
<!-- END Criteo Sales Page Tag -->
검증
- 크리테오 통합 플랫폼에 대한 액세스 권한이 있는 경우,태그 검증 대시보드에 로그인하여 태그를 시험해볼 수 있습니다.
- 크롬 확장 프로그램인 Criteo Accurate을 다운로드하여 태그를 테스트할 수도 있습니다.
- 크리테오가 OneTag 내에 있는 제품의 단가 정보를 수집한다는 사실을 기억하시기 바랍니다. 각 제품의 단가를 제품 개수에 곱해서 보고서에 표시되는 총 주문액이 계산됩니다. 배송비, 세금, 바우처, 할인 또는 특별 할인 코드를 적용하는 경우, 이러한 항목들이 총 주문액에 올바르게 적용되는지 반드시 확인하시기 바랍니다.