3D Cart 태그와 Feed 통합 가이드

개요

이 가이드가 제품 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단계 과정을 따르십시오.

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 내에 있는 제품의 단가 정보를 수집한다는 사실을 기억하시기 바랍니다. 각 제품의 단가를 제품 개수에 곱해서 보고서에 표시되는 총 주문액이 계산됩니다. 배송비, 세금, 바우처, 할인 또는 특별 할인 코드를 적용하는 경우, 이러한 항목들이 총 주문액에 올바르게 적용되는지 반드시 확인하시기 바랍니다.