로거 삽입 가이드
로거 삽입 가이드
- Former user (Deleted)
- namkung hyeon (Unlicensed)
- Former user (Deleted)
Owned by Former user (Deleted)
Last updated: 2019-11-27 by namkung hyeon (Unlicensed)
레코벨 시스템을 사용하기 위해서 아래와 같은 정보들이 필요하다.
- 상품정보 / 컨텐츠 정보
- 사용자 이력 (상품, 컨텐츠 클릭)
- 사용자 이력 (검색)
- 사용자 이력 (전환) : 쇼핑몰의 경우에는 상품의 주문이며, 회원가입, 1:1 문의 등
이 문서는 사용자의 이력을 수집하는 방법 중 하나인 JavaScript 를 고객사의 사이트에 추가하는 방법에 대해 설명한다.
위 컨텐츠들 중에서 사용하는 서비스에 따라서 아래 페이지들을 보면 된다.
- 레코벨 추천서비스
- 상품 상세 페이지
- 결제 완료 페이지
- 검색 페이지
- Keyword7
- 공통 스크립트
- 결제 완료 페이지
- 검색 페이지
- 기타 페이지 추적 (미리 합의된 경우에 한해서)
스크립트 위치
레코벨 스크립트는 body 의 어느 부분에 위치해도 된다.
(공통 스크립트와 타 스크립트 간의 위치도 신경쓸 필요가 없다.)
<!DOCTYPE html> <html> <head> // .. <meta> , <script> </head> <body> .. <!-- 레코벨 스크립트 --> <script type="text/javascript"> .. </script> <!-- 레코벨 스크립트 끝 --> .. </body> </html>
공통스크립트 (Keyword7)
Keyword7 의 경우 모든 페이지 공통적으로 아래 스크립트를 삽입함으로써 사이트로 유입되는 키워드를 찾고자 한다.
이 스크립트의 경우 사이트 모든 페이지에 적용되어야하기 때문에 일반적으로 '헤더'/'푸터'에 일괄적으로 삽입하는 것이 좋다.
한 페이지에 두 개 이상의 레코벨 로거가 삽입되더라도 오작동은 없다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','userId','{$userId}']); // optional
_rblq.push(['track','visit']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
각 변수는 아래와 같다.
{$cuid}: 레코벨에서 발급한 고객사 사이트 ID. 계약 후에 발급된다.{$device}: 현재 방문한 페이지의 분류. 아래 4가지 값 중 하나를 지정하며, 임의의 값 지정도 가능하다.PW: 피씨 웹사이트의 경우MW: 모바일 웹사이트의 경우MI: 아이폰 하이브리드 앱의 웹뷰MA: 안드로이드 하이브리드 앱의 웹뷰
{$userId}: 방문한 사용자의 로그인 아이디 (optional) 개인정보 보호 이슈로 인해 HASH 등으로 변환된 값을 지정한다.
상품 상세 페이지 (추천서비스)
상품ID 추적
상품상세페이지와 같이 사용자가 클릭하여 방문하는 페이지를 "view" 로 추적할 수 있다.
"view" 를 추적하는 스크립트는 아래와 같다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','itemId','{$itemId}']);
_rblq.push(['setVar','userId','{$userId}']); // optional
_rblq.push(['setVar','searchTerm','{$searchTerm}']);
_rblq.push(['track','view']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
각 변수는 아래와 같다.
{$cuid}: 레코벨에서 발급한 고객사 사이트 ID. 계약 후에 발급된다.{$device}: 현재 방문한 페이지의 분류. 아래 4가지 값 중 하나를 지정하며, 임의의 값 지정도 가능하다.PW: 피씨 웹사이트의 경우MW: 모바일 웹사이트의 경우MI: 아이폰 하이브리드 앱의 웹뷰MA: 안드로이드 하이브리드 앱의 웹뷰
{$userId}: 방문한 사용자의 로그인 아이디 (optional) 개인정보 보호 이슈로 인해 HASH 등으로 변환된 값을 지정한다.{$itemId}: 현재 방문한 상품 아이디, 고객사의 상품ID(상품코드)를 넣는다.{$searchTerm}: 사이트 내부에서 검색을 통해서 상품상세 페이지로 들어 온 경우, 검색 키워드를 추적하기 위해 지정한다.
상품 정보 추적
상세페이지와 함께 레코벨로 상품 정보를 전달하고자 할 경우, <meta> 태그를 통해 필요한 정보를 기술하고, 이를 스크립트가 읽어 레코벨 서버로 전송한다.
일반적으로 'view' 추적을 하고 있는 페이지에서 _rblq.push(['track','product']); 의 추가를 통해 이 동작을 수행한다.
<meta> 태그는 다음과 같다.
<meta property="rb:type" content="product" /> <meta property="rb:cuid" content="" /> <meta property="rb:itemId" content="" /> <meta property="rb:itemName" content="" /> <meta property="rb:itemImage" content="" /> <meta property="rb:itemUrl" content="" /> <meta property="rb:originalPrice" content="" /> <meta property="rb:salePrice" content="" /> <meta property="rb:category1" content="" /> <meta property="rb:category2" content="" /> <meta property="rb:category3" content="" /> <meta property="rb:brandId" content="" /> <meta property="rb:brandName" content="" /> <meta property="rb:regDate" content="" /> <meta property="rb:updateDate" content="" /> <meta property="rb:stock" content="" /> <meta property="rb:state" content="" /> <meta property="rb:description" content="" /> <meta property="rb:extraImage" content="" /> <meta property="rb:locale" content="" />
<meta> 태그가 나타난 페이지에서 다음 스크립트를 통해 이 정보를 서버로 전송한다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','itemId','{$product_no}']);
_rblq.push(['setVar','userId','{$user_id}']);
_rblq.push(['setVar','searchTerm','{$searchTerm}']);
_rblq.push(['track','view']);
_rblq.push(['track','product']); /* -- IMPORTANT -- */
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
meta 태그의 property 는 변수의 이름을 의미하며, content 에 적절한 값을 넣어야한다. 각 변수의 의미는 아래와 같다.
| Field Name | Java Data Type | Column Name | MySql Data Type | Nullable | E-commerce Description | media Description |
|---|---|---|---|---|---|---|
| cuid | String | Client Unique Identifier | Client Unique Identifier | |||
| type | String | product | CONTENTS | |||
| itemId | String | item_id | varchar(100) | NOT NULL | 상품ID | 컨텐츠 ID |
| itemName | String | item_name | varchar(500) | NOT NULL | 상품명 | 컨텐츠 제목 |
| itemImage | String | item_image | text | NULL | 상품 이미지 URL | 컨텐츠 이미지 URL |
| itemUrl | String | item_url | text | NULL | 상품 ladning URL | 컨텐츠 landing URL |
| originalPrice | double | original_price | decimal(16,6) | NOT NULL | 제품가격 | - |
| salePrice | double | sale_price | decimal(16,6) | NOT NULL | 판매가격 | - |
| category1 | String | category1 | varchar(50) | NOT NULL | 카테고리 (대) | 섹션 (대) |
| category2 | String | category2 | varchar(50) | NOT NULL | 카테고리 (중) | 섹션 (중) |
| category3 | String | category3 | varchar(50) | NULL | 카테고리 (소) | 섹션 (소) |
| category4 | String | category4 | varchar(50) | NULL | 카테고리 (세) | 섹션 (세) |
| category5 | String | category5 | varchar(50) | NULL | 카테고리 (세세) | 섹션 (세세) |
| brandId | String | brand_id | varchar(100) | NULL | 브랜드 ID | - |
| brandName | String | brand_name | varchar(500) | NULL | 브랜드명 | - |
| regDate | String | reg_date | datetime | NULL | 상품 등록일, ex) 2015-06-25T05:43:18Z | 컨텐츠 게재일 |
| updateDate | String | update_date | datetime | NULL | 상품 갱신일, ex) 2015-06-25T05:43:18Z | 컨텐츠 변경일 |
| expireDate | String | expire_date | datetime | NULL | 상품 만료일, ex) 2015-06-25T05:43:18Z | 컨텐츠 만료일 |
| stock | int | stock | int | NULL | 재고 | - |
| state | String | state | varchar(100) | NULL | 상품 상태 기술 필드. e.g. available / soldout, pause, stop, ready | - |
| description | String | description | Sttext | NULL | 상품 설명 | 컨텐츠 내용 |
| extraImage | String | extra_image | text | NULL | 상품 추가 이미지. 다수의 이미지 가능. 필드 구분자로 구분. | 컨텐츠 추가 이미지 |
| locale | String | locale | varchar(20) | NULL | 지역 코드. 화폐나 상품명이 적용받음. e.g., KR, US, ... | 컨텐츠 지역 코드 |
결제완료페이지 (추천서비스, Keyword7)
결제완료 후 사용자가 주문 내용과 구입한 상품들은 "order" 를 통해 추적할 수 있다.
구입한 상품이 여러개인 경우가 일반적이기 때문에, 상품 마다 그 정보를 추가하는 부분이 필요하다. (뉴스 등의 미디어의 경우는 제외)
상품 정보를 추가하는 스크립트는 다음과 같다.
<script type="text/javascript">
window._rblq = window._rblq || [];
/* STAR LOOP: 구매한 모든 상품에 대해 */
_rblq.push(['addVar', 'orderItems', {itemId:'{$itemId}', price:'{$productPrice}', quantity:'{$productQuantity}'}]);
/* END LOOP */
</script>
각 변수는 아래와 같다.
{$itemId}: 구입한 상품 ID (상품코드). 이때의 상품ID는 상품상세 페이지(view)에서 추적한 상품ID와 동일해야 한다.{$productPrice}: 결제된 상품의 개당 가격{$productQuantity}: 결제된 상품의 수
구입한 상품에 대한 정보를 추가하는 스크립트가 수행 된 후 다음 스크립트를 통해 주문 정보와 함께 서버로 전송한다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','orderId','{$orderId}']);
_rblq.push(['setVar','orderPrice','{$orderPrice}']);
_rblq.push(['setVar','userId','{$userId}']); // optional
_rblq.push(['track','order']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
각 변수는 아래와 같다.
{$cuid}: 레코벨에서 발급한 고객사 사이트 ID. 계약 후에 발급된다.{$device}: 현재 방문한 페이지의 분류. 아래 4가지 값 중 하나를 지정하며, 임의의 값 지정도 가능하다.PW: 피씨 웹사이트의 경우MW: 모바일 웹사이트의 경우MI: 아이폰 하이브리드 앱의 웹뷰MA: 안드로이드 하이브리드 앱의 웹뷰
{$userId}: 방문한 사용자의 로그인 아이디 (optional) 개인정보 보호 이슈로 인해 HASH 등으로 변환된 값을 지정한다.{$orderId}: 주문번호{$orderPrice}: 총 결제 금액
결제완료 페이지 예시
아래와 같이 상품을 샀다고 가정하면,
주문번호 : 20170101-12345
| 상품명 | 상품 ID | 갯수 | 단가 |
|---|---|---|---|
| 레코벨 패딩 | PO2222 | 2 | 100,000 |
| YX 원피스 | PO5555 | 1 | 50,000 |
| 키워드7 달력 | PO7777 | 6 | 3,000 |
| 쿠폰할인 | -2,000 | ||
| 배송비 | 2,500 | ||
| 합계 | 268,500 | ||
아래처럼 스크립트가 작성되어야한다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['addVar', 'orderItems', {itemId:'PO2222', price:'100000', quantity:'2'}]); // 레코벨 패딩
_rblq.push(['addVar', 'orderItems', {itemId:'PO5555', price:'50000', quantity:'1'}]); // YX 원피스
_rblq.push(['addVar', 'orderItems', {itemId:'PO7777', price:'3000', quantity:'6'}]); // 키워드7 달력
</script>
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','12345667']); // cuid = 12345667
_rblq.push(['setVar','device','PW']); // PC 인 경우
_rblq.push(['setVar','orderId','20170101-12345']);
_rblq.push(['setVar','orderPrice','268500']);
_rblq.push(['track','order']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
검색 페이지 (추천서비스, Keyword7)
검색추천을 위해 사용자의 검색 이력을 "search" 를 통해 추적한다.
"search" 를 추적하는 스크립트는 다음과 같다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','userId','{$userId}']); // optional
_rblq.push(['setVar','searchTerm','{$searchTerm}']);
_rblq.push(['track','search']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
각 변수는 아래와 같다.
{$cuid}: 레코벨에서 발급한 고객사 사이트 ID. 계약 후에 발급된다.{$device}: 현재 방문한 페이지의 분류. 아래 4가지 값 중 하나를 지정하며, 임의의 값 지정도 가능하다.PW: PC WebMW: Mobile WebMI: Mobile iOSMA: Mobile Android
{$userId}: 방문한 사용자의 로그인 아이디 (optional) 개인정보 보호 이슈로 인해 HASH 등으로 변환된 값을 지정한다.{$searchTerm}: 현재 검색 결과가 나타난 페이지의 '검색어'
사용자 로그인 정보
사용자의 로그인 또는 사용자의 추가적인 정보를 전달하는 경우 "user" 를 통해 추적한다.
추적 스크립트는 다음과 같다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','userId','{$userId}']);
_rblq.push(['setVar','gender','{$gender}']);
_rblq.push(['setVar','age','{$age}']);
_rblq.push(['track','user']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
각 변수는 아래와 같다.
{$cuid}: 레코벨에서 발급한 고객사 사이트 ID. 계약 후에 발급된다.{$device}: 현재 방문한 페이지의 분류. 아래 4가지 값 중 하나를 지정하며, 임의의 값 지정도 가능하다.PW: 피씨 웹사이트의 경우MW: 모바일 웹사이트의 경우MI: 아이폰 하이브리드 앱의 웹뷰MA: 안드로이드 하이브리드 앱의 웹뷰
{$userId}: 방문한 사용자의 로그인 아이디 (optional) 개인정보 보호를 위해 HASH 등으로 변환된 값을 지정한다.{$gender}: 사용자의 성별 (optional) 개인정보 보호를 위해 M/F 보다는 A/B 와 같은 형식으로 변환된 값으로 넣는 것을 추천한다.{$age}: 유저의 나이대, (optional) 개인정보 보호 및 적절한 모수 확보를 위해 나이를 직접 넣지 않고, 20,30,40,50,60 형태의 구간으로 변환된 값으로 넣어야 한다.
콘텐츠 노출 로그 수집 (Exposure)
동기 방식
아래의 두 JS 파일을 html 파일에 포함시킵니다.
// in <head> or <body>, before target <{tag}>
<script type="text/javascript" src="//assets.recobell.io/rblc/js/rblc-apne1.min.js">
<script type="text/javascript" src="//assets.recobell.io/rblc/js/rblexposure.min.js">
메타 태그를 이용해서 cuid, device, userId를 설정해 줍니다. cuid, device는 필수이며, userId는 설정하지 않아도 무방합니다.
<meta property="rb:cuid" content="{$cuid}">
<meta property="rb:device" content="{$device}">
<meta property="rb:userId" content="{$userId}"> //optional
노출 로그를 수집할 콘텐츠가 포함된 최상위 DOM의 class에 rb-exposure를 추가하고, 수집될 정보를 rb-id 혹은 rb-data에 포함시켜 줍니다.
// for single id
<div class="rb-exposure" rb-id="{$exposedItemId}"></div>
<img class="rb-exposure" rb-id="{$exposedItemId}">
<div class="rb-exposure-slide" rb-id="{$exposedItemId}"></div> // slide item for Goodoc
// for json
<div class="rb-exposure" rb-data="{$jsonString}"></div>
<img class="rb-exposure" rb-data="{$jsonString}">
<div class="rb-exposure-slide" rb-data="{$jsonString}"></div> // slide item for Goodoc
...
콘텐츠를 모두 표시한 다음에는 아래의 함수를 호출하여 콘텐츠가 노출되었을 때 노출 로그가 서버로 전송될 수 있도록 합니다.
... <script type="text/javascript"> rblc.exposure(); // bind event </script>
비동기 방식
노출 로그를 수집할 콘텐츠가 포함된 최상위 DOM의 class에 rb-exposure를 추가하고, 수집될 정보를 rb-id 혹은 rb-data에 포함시켜 줍니다.
// for single id
<div class="rb-exposure" rb-id="{$exposedItemId}"></div>
<img class="rb-exposure" rb-id="{$exposedItemId}">
<div class="rb-exposure-slide" rb-id="{$exposedItemId}"></div> // slide item for Goodoc
// for json
<div class="rb-exposure" rb-data="{$jsonString}"></div>
<img class="rb-exposure" rb-data="{$jsonString}">
<div class="rb-exposure-slide" rb-data="{$jsonString}"></div> // slide item for Goodoc
...
메타 태그를 이용해서 cuid, device, userId를 설정해 줍니다. cuid, device는 필수이며, userId는 설정하지 않아도 무방합니다.
<meta property="rb:cuid" content="{$cuid}">
<meta property="rb:device" content="{$device}">
<meta property="rb:userId" content="{$userId}"> //optional
아래의 코드를 HTML 파일의 아래 부분에 삽입하여 노출 로그가 수집될 수 있도록 합니다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['exposure']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(t, x);})();
</script>
기타 페이지 추적
위 범주에 속하지 않는 사용자가 정의한 정보를 추적할 수 있다.
아래 지정된 변수 외에 필요에 따라 다른 값을 지정할 수 있으며, 이 경우 모든 지정된 정보를 포함하여 서버로 전송한다.
아래 예시에서 _rblq.push(['track','page']); 로 지정되어 있는 부분은 'page' 외에 다른 값으로 지정 가능하다.
<script type="text/javascript">
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','userId','{$userId}']); // optional
_rblq.push(['setVar','url']); // optional if url is neeeded.
_rblq.push(['setVar','referrer']); // optional if referrer is needed.
_rblq.push(['track','{$logType}']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
각 변수는 아래와 같다.
{$cuid}: 레코벨에서 발급한 고객사 사이트 ID. 계약 후에 발급된다.{$device}: 현재 방문한 페이지의 분류. 아래 4가지 값 중 하나를 지정하며, 임의의 값 지정도 가능하다.PW: 피씨 웹사이트의 경우MW: 모바일 웹사이트의 경우MI: 아이폰 하이브리드 앱의 웹뷰MA: 안드로이드 하이브리드 앱의 웹뷰
{$userId}: 방문한 사용자의 로그인 아이디 (optional) 개인정보 보호 이슈로 인해 HASH 등으로 변환된 값을 지정한다.{$logType}: 사전에 정의된 로그 타입을 사용한다.
레코벨 Logger 에 정보를 전달하는 방법
추천영역이 삽입되고, 그 추천영역에서의 기여도를 레코벨 Logger 에서 보고싶다면 아래와 같은 Query Parameter 를 상품상세로 가는 href 에 추가하면 된다.
<a href="상품링크?foo=bar&rccode={$parameterValue}">link</a>
{$parameterValue} 는 임의의 값으로 지정한다.
예를 들면, rccode=recobell_pc_detail 또는 rccode=pc_main_rec1 와 같은 형태이다.
내부 검색 키워드 정보를 전달하는 방법
내부 검색 이후 상품상세페이지를 방문했을 때 어떠한 검색어를 검색한 후 상품상세페이지를 방문했는지에 대한 정보를 전달하기 위해서는 rbst 라는 Query Parameter에 해당 검색어를 넣으면 된다.
<a href="상품링크?foo=bar&rbst={$searchTerm}">link</a>
예를 들어, 의자라는 검색어를 (내부)검색한 후, 특정 상품의 상세페이지를 방문했을 경우 rbst=의자 를 넣어주면 된다.
장애 대비 사항
레코벨 로거 스크립트는 스크립트를 불러오지 못하거나 서버의 응답이 없을 경우에 다음과 같이 동작하도록 되어 있다.
- 모든 JavaScript 코드는 비동기(asynchronous)로 동작한다.
- 로그는 데이터 전송에 GET을 사용하고 그 응답으로 1x1 image 를 받는 것으로 동작하며, 이는 IE8 등의 과거 브라우저에서도 동작한다.
- 응답으로 image 로드가 2초이상 걸릴 경우, 요청을 중지(abort) 한다.
최근 클릭 상품 이용 방법
"view" 추적이 동작할 때 사용자의 최근 클릭 상품 정보를 사용자의 브라우저에 저장한다.
사용자의 브라우저의 localStorage 에 사용자가 클릭한 상품의 상품번호를 최근 순서대로 최대 10개까지 저장하고 있다.
localStorage 의 RB_VIEWED_ITEMS 항목에 콤마(,)로 구분된 형식으로 저장이 된다.
localStorage 를 활용할 수 없는 환경의 경우, 아래 코드 중 _rblconf.useCookieStorage 설정으로 Cookie 에도 추가적으로 최근클릭 상품정보를 저장한다.
쿠키에 저장되는 RB_VIEWED_ITEMS 항목은 urlencode된 콤마(,), 즉 %2C로 구분된 형식으로 저장이 된다.
<script type="text/javascript">
window._rblconf = window._rblconf || {};
_rblconf.useCookieStorage = true;
window._rblq = window._rblq || [];
_rblq.push(['setVar','cuid','{$cuid}']);
_rblq.push(['setVar','device','{$device}']);
_rblq.push(['setVar','itemId','{$itemId}']);
_rblq.push(['setVar','userId','{$userId}']); // optional
_rblq.push(['setVar','searchTerm','{$searchTerm}']);
_rblq.push(['track','view']);
(function(s,x){s=document.createElement('script');s.type='text/javascript';
s.async=true;s.defer=true;s.src=(('https:'==document.location.protocol)?'https':'http')+
'://assets.recobell.io/rblc/js/rblc-apne1.min.js';
x=document.getElementsByTagName('script')[0];x.parentNode.insertBefore(s, x);})();
</script>
동기화 추적
위 방식은 비동기(asynchronous) 방식으로, Array 에 동작을 저장한 후, 스크립트가 로딩됨과 동시에 추적이 수행되는 방식이다.
이와 다르게 동기화된 추적이 필요할 경우, 사전에 스크립트 로딩 후 함수 호출을 사용하여 스크립트를 구성할 수 있다.
<body>
<script type='text/javascript' src='//assets.recobell.io/rblc/js/rblc-apne1.min.js'></script>
<script type='text/javascript'>
// Product 는 cuid 만 설정 후 track 함수 호출
rblc.op('setVar','cuid','{$cuid}');
rblc.op('track','product');
</script>
<script type='text/javascript'>
// 그 외의 페이지
rblc.op('setVar','cuid','{$cuid}');
rblc.op('setVar','device','{$device}');
rblc.op('setVar','itemId','{$itemId}');
rblc.op('setVar','userId','{$userId}'); //optional
rblc.op('setVar','searchTerm','{$searchTerm}');
rblc.op('track','view');
</script>
</body>
Order 동기화 추적
위와 같은 방식으로 동작. 고객이 주문한 각 상품에 대한 정보를 orderItems 배열에 저장하는 반복문 실행. 차례로 cuid, device, orderid, orderPrice(총 주문금액), userId(optional)을 작성하고 track함수를 호출해 order 로그 전송.
<body>
...
...
...
<script type='text/javascript' src='//assets.recobell.io/rblc/js/rblc-apne1.min.js'></script>
<script type="text/javascript">
/* STAR LOOP: 구매한 모든 상품에 대해 */
rblc.op('addVar', 'orderItems', {itemId:'{$itemId}', price:'{$productPrice}', quantity:'{$productQuantity}'});
/* END LOOP */
</script>
<script type='text/javascript'>
rblc.op('setVar','cuid','{$cuid}');
rblc.op('setVar','device','{$device}');
rblc.op('setVar','orderId','{$orderId}');
rblc.op('setVar','orderPrice','{$orderPrice}');
rblc.op('setVar','userId','{$userId}'); // optional
rblc.op('track','order');
</script>
</body>
A-B 테스트를 이용한 초기화면 PCID 강제 생성 스크립트
A-B 테스트를 실시할 경우 초기화면에 로거가 없을 경우 PCID가 생성되지 않을 수 있다. 이에 초기화면에 PCID를 강제 생성하는 스크립트를 삽입하는 것을 권장한다.
POST 를 이용한 직접 입력
레코벨 로거는 POST 를 지원한다.
- URL : http(s)://rblogger-receiver-apne1.recobell.io/rest/logs
- Content-Type : application/json
Body : 아래와 같이 사용이 가능하다.
{ "cuid": "{$cuid}", "type": "{$type}" "device": "{$device}", "pcId": "{$pcId}", "sessionId": "{$sessionId}" }
view{ "cuid": "{$cuid}", "type": "view" "device": "{$device}", "itemId": "{$itemId}", "userId": "{$userId}", "searchTerm": "{$searchTerm}", "pcId": "{$pcId}", "sessionId": "{$sessionId}" }product
{ "cuid": "{$cuid}", "type": "product" "itemId": "{$itemId}", "itemName": "{$itemName}", "itemUrl": "{$itemUrl}", "originalPrice": "{$originalPrice }", "salePrice":"{$salePrice}", "category1":"{$category1}", "category2":"{$category2}", "category3":"{$category3}", "brandId":"{$brandId}", "brandName":"{$brandName}", "regDate":"{$regDate}", "updateDate":"{$updateDate}", "stock":"{$stock}", "state":"{$state}", "description": "{$description}", "extraImage": "{$extraImage}", "locale": "{$locale}", "pcId": "{$pcId}", "sessionId": "{$sessionId}" }order
{ "cuid": "{$cuid}", "type": "order" "device": "{$device}", "orderId": "{$orderId}", "orderPrice": "{$orderPrice}", "userId ": "{$userId}", "pcId": "{$pcId}", "sessionId": "{$sessionId}" }visit (**visit은 모든페이지에 적용되도록 작업해주세요.)
{ "cuid": "{$cuid}", "type": "visit" "device": "{$device}", "itemId": "{$itemId}", "userId": "{$userId}", "pcId": "{$pcId}", "sessionId": "{$sessionId}" }user
{ "cuid": "{$cuid}", "type": "user" "device": "{$device}", "userId ": "{$userId}", "gender": "{$gender}", "age": "{$age}", "pcId": "{$pcId}", "sessionId": "{$sessionId}" }- 이 때 pcId 값은 웹뷰를 사용할 경우 쿠키 중 RB_PCID 값으로, sessionId 값은 쿠키 중 RB_SSID 값으로 설정을 하면 된다.
- 웹뷰를 사용하지 않을 경우
- pcId 값은 ms 단위의 타임스탬프 값과 100000에서 999999 사이의 무작위 6자리 숫자를 이어붙인 값으로 설정하고,
- sessionId 값은 10자리의 무작위 알파벳대소문자+숫자의 조합으로 설정을 하되, 세션이 끊기거나, 30분 이상 활성화가 되지 않을 경우 새로운 값으로 변경을 하면 된다
, multiple selections available,