Recobellのシステムを使用するためには下記の情報が必要です。

商品情報/ コンテンツ情報
使用者の履歴(商品、コンテンツのクリック)
使用者の履歴(検索)
使用者の履歴(コンバージョン) : ショッピングモールの場合には商品の注文や会員加入、1対1の問い合わせ等

この文書は使用者の履歴を収集する方法の一つであるJavaScriptをお客様のサイトに追加するための方法について説明するものです。

スクリプトの位置

Recobellのスクリプトはbodyのどの部分に位置しても問題なし

(共通スクリプトと他のスクリプト間の位置も気にする必要なし)

<!DOCTYPE html>
<html>
	<head>
		// .. <meta> , <script>
	</head>
	<body>
		..
		<!-- Recobellスクリプト -->
		<script type="text/javascript">
			..
		</script>
		<!-- Recobellスクリプトおわり -->
		..
	</body>
</html>

共通スクリプト

Keyword7の場合、あらゆるページに共通して下記スクリプトを挿入することで、サイトに流入されるキーワードを探す

このスクリプトの場合、サイトの全てのページに適用されなければならないため、一般的に「ヘッダー」/「フッター」に一括して挿入することをご推奨

一つのページに二つ以上Recobellのログが挿入されても誤作動はなし

<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} : Recobellが発行するお客様のサイトID。契約後に発行
{$device} : 現在、訪問したページの分類。下記4つの値の内一つを指定。任意の値を指定することも可能。
- PW : PCウェブサイトの場合
- MW : モバイルウェブサイトの場合
- MI : IPhoneハイブリッドアプリのウェブビュー
- MA : Androidハイブリッドアプリのウェブビュー
{$userId} : 訪問した使用者のログインID (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} : Recobellが発行したお客様のサイトID。契約後に発行される
{$device} : 現在訪問したページの分類。下記4つの値の内一つを指定。任意の値を指定することも可能。
- PW : PCウェブサイトの場合
- MW : モバイルウェブサイトの場合
- MI : iPhoneハイブリッドアプリのウェブビュー
- MA : Androidハイブリットアプリのウェブビュー
{$userId} : 訪問した使用者のログインID (optional) の個人情報保護のイシューによりHASH等に変換された値を指定.
{$itemId} : 現在訪問した商品ID、お客様の商品ID（商品ID）を入れる
{$searchTerm} : サイト内部での検索を通じて商品詳細ページに入った場合、検索キーワードを追跡するために指定

商品情報の追跡

詳細ページとともにRecobellに商品情報を伝達しようとする場合、<meta>タグを通じて必要な情報を記述し、これをスクリプトが読んでRecobellのサーバーに送信します。

一般的に「View」の追跡をしているページでは、 _rblq.push(['track','product']); の追加を通じてこの動作を遂行します。

<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="" />

<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	商品 landing 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, ...	-
description	String	description	Sttext	NULL	商品説明	コンテンツ内容
extraImage	String	extra_image	text	NULL	商品の追加イメージ。多数のイメージ可能。フィールド区分者で区分	コンテンツの追加イメージ
locale	String	locale	varchar(20)	NULL	地域コード。通貨や商品名が適用を受けるe.g., KR, US, ...	コンテンツ地域コード

決済完了ページ

決済完了後、使用者が注文した内容と購入した内容を「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} : 決済された商品の1つあたりの価格
{$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} : Recobellが発行したお客様のサイトID。契約後に発行される
{$device} : 現在訪問したページの分類。下記4つの値の内一つを指定。任意の値の指定も可能。
- PW : PCウェブサイトの場合
- MW : モバイルウェブサイトの場合
- MI : iPhoneハイブリッドアプリのウェブビュー
- MA : Androidハイブリッドアプリのウェブビュー
{$userId} : 訪問した使用者のログインID (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>

検索ページ

検索レコメンドを行うためには、使用者の検索履歴を「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} : Recobellで発行するお客様のサイトID。契約後に発行される。
{$device} : 現在訪問したページの分類。下記4つの値の内一つを指定。任意の値の指定も可能。
- PW : PC Web
- MW : Mobile Web
- MI : Mobile iOS
- MA : Mobile Android
{$userId} : 訪問した使用者のログインID (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} : Recobellで発行したお客様のサイトID。契約後に発行される。
{$device} : 現在訪問したページの分類。下記4つの値の内、一つを指定。任意の値の指定も可能。
- PW : PCウェブサイトの場合
- MW : モバイルウェブサイトの場合
- MI : iPhoneハイブリッドアプリのウェブビュー
- MA : Androidハイブリッドアプリのウェブビュー
{$userId} : 訪問した使用者のログインID (optional)の個人情報保護イシューにより HASH等に変換された値を指定
{$gender} : 使用者性別 (optional)の個人情報の保護のため、M/F よりはA/Bのような形式で変換される値を入れることをお勧めします。
{$age} : ユーザーの年齢帯(optional)の個人情報の保護および適切な母数の確保のために年齢を直接入れるのではなく、20,30,40,50,60の形のレンジで変化する値を入れなければならない

その他ページの追跡

上記のカテゴリに属していない使用者が定義した情報を追跡することが可能。

下記にて指定された変数以外に必要により他の値を指定することができる。この場合、指定されたあらゆる情報を含めてサーバーに転送する。

下記の例にて_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} : Recobellで発行したお客様のサイトID。契約後に発行される。
{$device} : 現在訪問したページの分類。下記4つの値の内一つを指定。任意の値の指定も可能。
- PW : PCウェブサイトの場合
- MW : モバイルウェブサイトの場合
- MI : iPhoneハイブリッドアプリのウェブビュー
- MA : Androidハイブリッドアプリのウェブビュー
{$userId} : 訪問した使用者のログインID (optional) の個人情報保護のイシューにより HASH等に転換された値を指定
{$logType} : 事前に定義されたログタイプを使用。

RecobellのLoggerに情報を伝達する方法

レコメンド領域が挿入され、そのレコメンド領域における寄与度を Recobellの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=椅子と入れれば大丈夫です。

障害対備事項

Recobellのログスクリプトはスクリプトを呼び出せなかったり、サーバーの応答がない場合に次のような動作を行うようになっている。

すべての JavaScript コードは非同期 (asynchronous)で動作する。
ロゴはデータ送信に GET を使用して、その応答として 1x1 image を受けることで動作。これは IE8等の過去ブラウザーでも動作する。
応答にて imageのロードが2秒以上かかる場合、要請を停止(abort)する。

直近クリック商品の利用方法

「view」の追跡が動作する際に、使用者の直近クリック商品情報を使用者のブラウザーに保存する。

使用者のブラウザーの localStorage に使用者がクリックした商品の商品番号を直近の順序通りに最大10個まで保存している。

localStorage のRB_VIEWED_ITEMS 項目にコンマ (,)で区分される形式で保存される。

localStorageを活用することのできない環境の場合、下記コードの内、rblconf.useCookieStorage の設定により Cookieでも追加で直近クリック商品情報を保存する。

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>

POSTを利用した直接入力

RecobellのログはPOSTをサポート。

URL : http(s)://rblogger-receiver-apne1.recobell.io/rest/logs
Content-Type : Application/Json

Body : 下記のように使用が可能

{
	"cuid": "{$cuid}",
	"type": "{$type}"
	"device": "{$device}",
	"pcId": "{$pcId}"
}

ログ挿入ガイド

スクリプトの位置

共通スクリプト

商品詳細ページ

商品IDの追跡

商品情報の追跡

決済完了ページ

決済完了ページ例

検索ページ

使用者のログイン情報

その他ページの追跡

RecobellのLoggerに情報を伝達する方法

内部検索キーワード情報を伝達する方法

障害対備事項

直近クリック商品の利用方法

同期化の追跡

POSTを利用した直接入力