Criteo OneTag¶
웹사이트의 소스 코드에 Criteo OneTag를 직접 구현하기위한 가이드
[[disclaimer-developer_ko]]
개요¶
이 가이드에서는 Criteo OneTag 솔루션을 소스코드에 어떻게 구현해야 하는지를 설명 할 것입니다. 그리고 Criteo OneTag는 웹사이트의 각 페이지에 헤드(head) 나 본문(body)태그에 적용을 해야 하며 아래에 있는 로더 파일 및 태그들를 적용해야 합니다.
피드¶
Google Shopping Feed가 있다면 Criteo 담당자에게 전달하여 주시고 아직 없는 경우에는 Criteo 피드 사양과 일치하는 제품 피드를 만들어 주시면 됩니다.
이메일 해싱¶
[[email_hashing_kor]]
태그¶
앱 서비스를 같이 운영하는 경우, 앱(웹뷰)에서는 웹페이지 내 Criteo OneTag를 호출하지 않도록 처리 부탁드립니다.
로더 스크립트¶
Criteo OneTag를 활성화하려면 로더 스크립트(Loader script)가 필요합니다. 아래 스크립트를 사이트의 '헤드(head)' 부분에 위치시켜 모든 페이지에 포함되도록 해야, 동시에 로딩되는 다른 스크립트로 인해 지연이 발생하지 않습니다. 페이지에서 한번만 트리거되면 되고, 단일 페이지에서 여러차례 트리거되어도 상관없습니다.
<!-- Criteo 로더 파일 -->
<script type="text/javascript" src="//dynamic.criteo.com/js/ld/ld.js?a={{accountid}}" async="true"></script>
<!-- END Criteo 로더 파일 -->
홈페이지 태그¶
웹 사이트의 아래 페이지에 다음 태그를 설치 하실 수 있습니다:
- 홈페이지 (예: {{homepageurl}})
- 카테고리, 검색, 리스팅, 상품, 장바구니, 구매완료 페이지를 제외한 오디언스를 트랙킹 하기 원하는 페이지 (예: {{homepageurl}}/event_1)
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256 혹은 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법. sha256 해싱 이메일의 경우는 'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
구조 및 설명¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예제 참조
<!-- Criteo 홈페이지 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
// To Do 1. 현재 유저의 이메일 주소를 SHA256과 MD5로 해시화 시켜 문자열로 전달
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
// To Do 2. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
{ event: "setZipcode", zipcode: "##Zip Code##" },
{ event: "setSiteType", type: deviceType},
{ event: "viewHome"});
</script>
<!-- END Criteo 홈페이지 태그 -->
예제¶
<!-- Criteo 홈페이지 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: "12345" },
{ event: "setSiteType", type: deviceType},
{ event: "viewHome"});
</script>
<!-- END Criteo 홈페이지 태그 -->
카테고리/검색/리스팅 태그¶
웹 사이트의 아래 페이지에 다음 태그를 설치하실 수 있습니다:
- 목록 페이지
- 카테고리 페이지 (예: {{homepageurl}}/category?id=categoryid_1)
- 검색 결과 페이지 (예: {{homepageurl}}/search?q=search_keywords)
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256과 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법. sha256 해싱 이메일의 경우는 'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
| Product ID | 상품의 고유 ID | ProductID_1 | 문자열(String) | 필수 |
| Category ID | 사용자가 둘러보고 있는 페이지의 카테고리. 이 값은 상품 카탈로그로 전달되는 카테고리 값과 일치해야 합니다. | 전자제품>오디오>헤드폰 | 문자열(String) | 권장 |
| Search Keyword | 사용자가 검색을 위해 입력한 키워드 | 헤드폰 | 문자열(String) | 권장 |
구조 및 설명¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예 참조
<!-- Criteo 카테고리/검색/리스팅 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
// To Do 1. 현재 유저의 이메일 주소(공백 제거 및 소문자로 변환 후) 전달. 유저의 이메일을 알수 없는 상황이면 빈 문자열로 전달
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
// To Do 2. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
{ event: "setZipcode", zipcode: "##Zip Code##" },
{ event: "setSiteType", type: deviceType},
{ event: "viewList",
// To Do 3. 가장 위에있는 3개의 상품 ID를 전달. 태그에서 전달되는 상품 ID와 피드에서 전달 주신 상품 ID가 매칭이 되어야 함. 3개 이상의 상품을 넣을 경우 엔진 학습에는 사용되지 않으며 웹사이트 퍼포먼스가 낮아지니 되도록이면 3개의 상품 ID만 전달주시기를 추천
item: ["##Product ID 1##", "##Product ID 2##", "##Product ID 3##"],
// To Do 4. 유저가 현재 보고있는 카테고리 페이지의 카테고리 값을 전달. 카테고리 페이지가 아닐 경우 해당 라인 삭제 혹인 빈 문자열로 전달
category: "##Category Id##",
// To Do 5. 유저가 현재 검색한 키워드. 검색 리스팅 페이지가 아닐 경우 해당 라인 삭제 혹은 빈 문자열로 전달
keywords: "##Search Keyword##"
});
</script>
<!-- END Criteo 카테고리/검색/리스팅 태그 -->
예제¶
<!-- Criteo 카테고리/검색/리스팅 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: "12345" },
{ event: "setSiteType", type: deviceType},
{ event: "viewList", item: ["ProductID_1", "ProductID_2", "ProductID_3"], category: "전자제품>오디오>헤드폰", keywords: "헤드폰" });
</script>
<!-- END Criteo 카테고리/검색/리스팅 태그 -->
상품 태그¶
웹 사이트의 상품 세부 사항 페이지에 다음 태그를 설치하십시오. URL 예 : {{homepageurl}}/product?id=productid_1
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256 혹은 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법. sha256 해싱 이메일의 경우는 'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
| Product ID | 상품의 고유 ID | ProductID_1 | 문자열(String) | 필수 |
구조 및 설명¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예 참조
<!-- Criteo 상품 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
// To Do 1. 현재 유저의 이메일 주소(공백 제거 및 소문자로 변환 후) 전달. 유저의 이메일을 알수 없는 상황이면 빈 문자열로 전달
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
// To Do 2. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
{ event: "setZipcode", zipcode: "##Zip Code##" },
{ event: "setSiteType", type: deviceType},
// To Do 3. 현재 유저가 보고있는 상품의 ID 전달. 태그에서 전달되는 상품 ID와 피드에서 전달 주신 상품 ID가 매칭이 되어야 함
{ event: "viewItem", item: "##Product ID 1##" });
</script>
<!-- END Criteo 상품 태그 -->
예제¶
<!-- Criteo 상품 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: "12345" },
{ event: "setSiteType", type: deviceType},
{ event: "viewItem", item: "ProductID_1" });
</script>
<!-- END Criteo 상품 태그 -->
장바구니에 추가 태그¶
장바구니에 추가 태그는 장바구니에 상품을 추가한 사용자를 식별하는 데 도움을 줍니다. 장바구니 이탈 고객을 파악하고, 장바구니에 상품을 추가한 후 장바구니를 방문하지 않은 사용자를 놓치지 않도록 해줍니다. 사용자가 장바구니에 상품을 추가할 때 이 이벤트를 호출하십시오.
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256 혹은 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법. sha256 해싱 이메일의 경우는 'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
| Product ID | 상품의 고유 ID | ProductID_1 | 문자열(String) | 필수 |
| Unit Price | 상품 단가 | 20000 | 소수(Decimal) | 필수 |
| Quantity | 추가 된 유닛 수 | 2 | 정수(Integer) | 필수 |
구조 및 설명¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예 참조
<!-- Criteo 장바구니에 추가 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
// To Do 1. 현재 유저의 이메일 주소(공백 제거 및 소문자로 변환 후) 전달. 유저의 이메일을 알수 없는 상황이면 빈 문자열로 전달
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
// To Do 2. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
{ event: "setZipcode", zipcode: "##Zip Code##" },
{ event: "setSiteType", type: deviceType},
{ event: "addToCart", item: [
// To Do 3. 현재 유저가 추가한 상품의 정보(상품 ID, 상품 단가, 추가한 수량)를 아래 객체 포멧으로 전달
// 상품 ID는 태그에서 전달되는 상품 ID와 피드에서 전달 주신 상품 ID가 매칭이 되어야 함
// 상품 단가는 유저가 선택한 상품의 단가로 전달(옵션 추가 가격 및 할인 가격 포함). 통화 기호 및 천단위 구분자는 제외
// 수량은 유저가 선택한 값으로 전달
// Tip 1. 복잡한 추가 구성 상품 및 옵션으로 인해 제대로된 상품 단가 및 수량 전달이 어려운 경우, 최종 가격으로 전달 후 수량은 1로 전달 해주셔도 됩니다.
{id: "##Product ID 1##", price: ##Unit Price##, quantity: ##Quantity## }
]}
);
</script>
<!-- END Criteo 장바구니에 추가 태그 -->
예제¶
<!-- Criteo 장바구니에 추가 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: "12345" },
{ event: "setSiteType", type: deviceType},
{ event: "addToCart", item: [
{id: "ProductID_1", price: 20000, quantity: 2 }
]}
);
</script>
<!-- END Criteo 장바구니에 추가 태그 -->
장바구니 태그¶
장바구니 태그는 장바구니 페이지를 방문한 사용자를 식별하는 데 도움을 줍니다. 장바구니 이탈 고객을 파악하는 데 유용합니다. 웹 사이트의 장바구니 페이지에 다음 태그를 설치하십시오. URL 예: {{homepageurl}}/cart
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256 혹은 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법. sha256 해싱 이메일의 경우는 'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
| Product ID | 상품의 고유 ID | ProductID_1 | 문자열(String) | 필수 |
| Unit Price | 상품 단가 | 20000 | 소수(Decimal) | 필수 |
| Quantity | 추가 된 유닛 수 | 2 | 정수(Integer) | 필수 |
구조 및 설명¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예 참조
<!-- Criteo 장바구니 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
// To Do 1. 현재 유저의 이메일 주소(공백 제거 및 소문자로 변환 후) 전달. 유저의 이메일을 알수 없는 상황이면 빈 문자열로 전달
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
// To Do 2. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
{ event: "setZipcode", zipcode: "##Zip Code##" },
{ event: "setSiteType", type: deviceType},
{ event: "viewBasket", item: [
// To Do 3. 현재 유저가 추가한 상품의 정보(상품 ID, 상품 단가, 추가한 수량)를 아래 객체 포멧으로 전달
// 상품 ID는 태그에서 전달되는 상품 ID와 피드에서 전달 주신 상품 ID가 매칭이 되어야 함
// 상품 단가는 유저가 선택한 상품의 단가로 전달(옵션 추가 가격 및 할인 가격 포함). 통화 기호 및 천단위 구분자는 제외
// 수량은 유저가 선택한 값으로 전달
// Tip 1. 복잡한 추가 구성 상품 및 옵션으로 인해 제대로된 상품 단가 및 수량 전달이 어려운 경우, 최종 가격으로 전달 후 수량은 1로 전달 해주셔도 됩니다.
{id: "##Product ID 1##", price: ##Unit Price##, quantity: ##Quantity## }
// 장바구니에 추가 된 각 상품에 대한 새 객체 추가. 새 객체를 추가하실때, 객체 사이를 쉼표(,)로 구분
]}
);
</script>
<!-- END Criteo 장바구니 태그 -->
예제¶
<!-- Criteo 장바구니 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: "12345" },
{ event: "setSiteType", type: deviceType},
{ event: "viewBasket", item: [
{id: "ProductID_1", price: 20000, quantity: 2 },
{id: "ProductID_2", price: 15000, quantity: 1 }
]}
);
</script>
<!-- END Criteo 장바구니 태그 -->
세일즈 태그¶
웹 사이트의 판매 확인 또는 감사 페이지에 다음 태그를 설치하십시오. URL 예: {{homepageurl}}/thankyou
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256 혹은 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법. 'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
| Product ID | 상품의 고유 ID | ProductID_1 | 문자열(String) | 필수 |
| Unit Price | 상품 단가 | 20000 | 소수(Decimal) | 필수 |
| Quantity | 추가 된 유닛 수 | 2 | 정수(Integer) | 필수 |
| Transaction ID | 확인 또는 주문 번호 | 7654322 | 문자열(String) 또는 정수(Integer) | 필수 |
구조 및 설명¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예 참조
<!-- Criteo 세일즈 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
// To Do 1. 현재 유저의 이메일 주소(공백 제거 및 소문자로 변환 후) 전달. 유저의 이메일을 알수 없는 상황이면 빈 문자열로 전달
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
// To Do 2. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
{ event: "setZipcode", zipcode: "##Zip Code##" },
{ event: "setSiteType", type: deviceType},
// To Do 3. 확인 또는 주문 번호를 전달. 확인 또는 주문 번호가 없을 경우, Math.floor(Math.random()*99999999999)와 같이 랜덤한 숫자를 만들어 전달
{ event: "trackTransaction", id: ##Transaction ID##, item: [
// To Do 4. 현재 유저가 추가한 상품의 정보(상품 ID, 상품 단가, 추가한 수량)를 아래 객체 포멧으로 전달
// 상품 ID는 태그에서 전달되는 상품 ID와 피드에서 전달 주신 상품 ID가 매칭이 되어야 함
// 상품 단가는 유저가 선택한 상품의 단가로 전달(옵션 추가 가격 및 할인 가격 포함). 통화 기호 및 천단위 구분자는 제외
// 수량은 유저가 선택한 값으로 전달
// Tip 1. 복잡한 추가 구성 상품 및 옵션으로 인해 제대로된 상품 단가 및 수량 전달이 어려운 경우, 최종 가격으로 전달 후 수량은 1로 전달 해주셔도 됩니다.
// Tip 2. 크리테오는 이 세일즈 태그에서 전달 주는 상품 단가와 수량을 곱하기하여 매출을 리포팅 하오니, 최대한 정확하게 전달이 중요합니다.
{id: "##Product ID 1##", price: ##Unit Price##, quantity: ##Quantity## }
// 장바구니에 추가 된 각 상품에 대한 새 객체 추가. 새 객체를 추가하실때, 객체 사이를 쉼표(,)로 구분
]}
);
</script>
<!-- END Criteo 세일즈 태그 -->
예제¶
<!-- Criteo 세일즈 태그 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
window.criteo_q.push(
{ event: "setAccount", account: {{accountid}}},
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: "12345" },
{ event: "setSiteType", type: deviceType},
{ event: "trackTransaction", id: 7654322, item: [
{id: "ProductID_1", price: 20000, quantity: 2 },
{id: "ProductID_2", price: 15000, quantity: 1 }
]}
);
</script>
<!-- END Criteo 세일즈 태그 -->
세일즈 태그(네이버페이 주문형)¶
이 세일즈 태그는 네이버페이(주문형)를 사용하시는 경우에만 적용이 됩니다.
웹 사이트의 네이버페이 버튼이 노출되는 페이지에 다음 태그를 설치하십시오. 대게 상품 세부 사항 및 장바구니 페이지. URL 예: {{homepageurl}}/product?id=productid_1
네이버페이 버튼을 클릭시 새 브라우저 탭에서 오픈이 되게 설정을 해주셔야 합니다.
| 필드 | 개요 | 예제 | 구문 | 필수 |
|---|---|---|---|---|
| Email Address | SHA256 혹은 MD5 해시 | 46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938 | sha256과 md5로 해시화된 문자열(String) | 필수 |
| Hash Method | 이메일에 사용된 해싱 방법.'sha265'를 입력하고 md5 해싱 이메일의 경우는 'md5'를 입력합니다. | sha256, md5 | 문자열(String) | 필수 |
| Zip Code | 배송지 우편번호. | 12345 | 문자열(String) | 권장 |
| Product ID | 상품의 고유 ID | ProductID_1 | 문자열(String) | 필수 |
| Unit Price | 상품 단가 | 20000 | 소수(Decimal) | 필수 |
| Quantity | 추가 된 유닛 수 | 2 | 정수(Integer) | 필수 |
[[disclaimer-npay_ko]]
구조¶
##으로 둘러싸인 필드를 동적인 사용자 정보로 바꿉니다. 예 참조
<!-- Criteo 세일즈 태그 - 네이버페이 주문형 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push({
requiresDOM: "non-blocking", cb: function () {
addEvent("npay_btn_pay", "click", function () {
if (typeof(Storage) !== "undefined") {
// Tip 1. 해당 태그의 확인 또는 주문 번호는 npay를 접두사로 랜덤한 11숫자로 만들어지게 셋업이 되어있습니다.
criteoNpayEvent(
{{accountid}},
// To Do 1. 현재 유저가 추가한 상품의 정보(상품 ID, 상품 단가, 추가한 수량)를 아래 객체 포멧으로 전달
// 상품 ID는 태그에서 전달되는 상품 ID와 피드에서 전달 주신 상품 ID가 매칭이 되어야 함
// 상품 단가는 유저가 선택한 상품의 단가로 전달(옵션 추가 가격 및 할인 가격 포함). 통화 기호 및 천단위 구분자는 제외
// 수량은 유저가 선택한 값으로 전달
// Tip 2. 복잡한 추가 구성 상품 및 옵션으로 인해 제대로된 상품 단가 및 수량 전달이 어려운 경우, 최종 가격으로 전달 후 수량은 1로 전달 해주셔도 됩니다.
// Tip 3. 크리테오는 이 세일즈 태그에서 전달 주는 상품 단가와 수량을 곱하기하여 매출을 리포팅 하오니, 최대한 정확하게 전달이 중요합니다.
[{ id: "##Product ID 1##", price: ##Unit Price##, quantity: ##Quantity##}],
// To Do 2. 현재 유저의 이메일 주소(공백 제거 및 소문자로 변환 후) 전달. 유저의 이메일을 알수 없는 상황이면 빈 문자열로 전달
"##Email Address##",
// To Do 3. 현재 유저의 저장된 배송지 우편번호. 유저의 배송지 우편번호를 알수 없는 상황이면 빈 문자열로 전달
"##Zip Code##"
);
}
});
}
});
function criteoNpayEvent(parterId, itemArray, email="", zipcode="") {
var lastNpayTransaction = localStorage.lastNpayTransaction;
var itemIdArray = [];
for (item in itemArray)
itemIdArray.push(itemArray[item].id);
itemIdArray.sort();
if (lastNpayTransaction !== undefined){
var lastNpayTimestamp = lastNpayTransaction.split("||")[0];
var lastNpayProductsArray = lastNpayTransaction.split("||")[1].split(",").sort();
if ((Date.now() - lastNpayTimestamp)/1000/60 < 10 && arraysMatch(itemIdArray, lastNpayProductsArray))
return;
}
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
criteo_q.push(
{ event: "setAccount", account: parterId },
// To Do 4. 이메일에 사용된 해싱 방법. SHA256해싱 = sha256 그리고 MD5해싱 =md5
{ event: "setEmail", email: "##SHA256로 해시된 유저의 이메일 주소##", hash_method: "sha256" },
{ event: "setEmail", email: "##MD5 해시된 유저의 이메일 주소##", hash_method: "md5" },
{ event: "setZipcode", zipcode: zipcode },
{ event: "setSiteType", type: deviceType },
{ event: "trackTransaction", id: "npay" + Math.floor(Math.random()*99999999999), item: itemArray }
);
localStorage.lastNpayTransaction = Date.now() + "||" + itemIdArray.join();
}
function arraysMatch(arr1, arr2) {
if (arr1.length !== arr2.length) return false;
for (var i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
};
function addEvent(className, evType, fn) {
document.addEventListener(evType, function(e){
if (e.target && e.target.classList.contains(className)) {
fn();
return true;
}
});
}
</script>
<!-- END Criteo 세일즈 태그 - 네이버페이 주문형 -->
예제¶
<!-- Criteo 세일즈 태그 - 네이버페이 주문형 -->
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push({
requiresDOM: "non-blocking", cb: function () {
addEvent("npay_btn_pay", "click", function () {
if (typeof(Storage) !== "undefined") {
criteoNpayEvent({{accountid}}, [{ id: "ProductID_1", price: 20000, quantity: 2},{id: "ProductID_2", price: 15000, quantity: 1 }], "46a828eb4c5d239d631a15094c934cada1812d5fc22cd14155ca684832a70938", "12345");
}
});
}
});
function criteoNpayEvent(parterId, itemArray, email="", zipcode="") {
var lastNpayTransaction = localStorage.lastNpayTransaction;
var itemIdArray = [];
for (item in itemArray)
itemIdArray.push(itemArray[item].id);
itemIdArray.sort();
if (lastNpayTransaction !== undefined){
var lastNpayTimestamp = lastNpayTransaction.split("||")[0];
var lastNpayProductsArray = lastNpayTransaction.split("||")[1].split(",").sort();
if ((Date.now() - lastNpayTimestamp)/1000/60 < 10 && arraysMatch(itemIdArray, lastNpayProductsArray))
return;
}
var deviceType = /iPad/.test(navigator.userAgent) ? "t" : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? "m" : "d";
criteo_q.push(
{ event: "setAccount", account: parterId },
{ event: "setEmail", email: "79054025255fb1a26e4bc422aef54eb4....", hash_method: "sha256" },
{ event: "setEmail", email: "e4d909c290d0fb1ca068ffaddf22cbd1", hash_method: "md5" },
{ event: "setZipcode", zipcode: zipcode },
{ event: "setSiteType", type: deviceType },
{ event: "trackTransaction", id: "npay" + Math.floor(Math.random()*99999999999), item: itemArray }
);
localStorage.lastNpayTransaction = Date.now() + "||" + itemIdArray.join();
}
function arraysMatch(arr1, arr2) {
if (arr1.length !== arr2.length) return false;
for (var i = 0; i < arr1.length; i++) {
if (arr1[i] !== arr2[i]) return false;
}
return true;
};
function addEvent(className, evType, fn) {
document.addEventListener(evType, function(e){
if (e.target && e.target.classList.contains(className)) {
fn();
return true;
}
});
}
</script>
<!-- END Criteo 세일즈 태그 - 네이버페이 주문형 -->
확인¶
[[accurate_ko]]
