これはA/Bテストの組み込みのドキュメントに対する補足ドキュメントです。ここでは、リコメンデーションを正常に表示させるための詳細を説明します。
A/Bテストの組み込みのドキュメントを参照してくださいA/Bテストの組み込みに関する全体像を把握するためには、A/Bテストの組み込みのドキュメントを参照することを推奨します。
各関数の仕様に関する技術ドキュメントについては、下記を参照してください:
- $p("register") のドキュメント。
- $p("render") のドキュメント。
コードスニペットの中にもトラッキングのコードが存在していますが、トラッキングに関する詳細については、トラッキングウィジェットのドキュメントを参照してください。
2. Mustacheテンプレートを使用してウィジェットを表示する
**1. リコメンデーションユニットのプレースホルダをウィジェットに追加する。
<div id="li-recommendation-unit"></div>**2. ページにリコメンデーションを表示するためのMustacheテンプレートを追加する。
<script type="application/mustache"
id="li-recommendation-template">
{{#items}}
<div class='recommended_item'>
<a href="{{url}}">
<img src="{{thumbnail}}" width="150" height="150" />
<span class="title">{{title}}</span>
</a>
</div>
{{/items}}
</script>**3. リコメンデーションを表示する。
// callbackが結果をプレースホルダに表示して挿入します。
$p('register', {
max: 5, // 表示したいアイテムの数
widget: 'default-widget',
callback: function(resp) {
// クエリセレクタは、1.のdiv名称と一致する必要があります
var el = document.querySelector('#li-recommendation-unit');
// テンプレートは、2.のMustacheテンプレートと一致する必要があります
var template = document.querySelector('#li-recommendation-template').innerHTML;
// 基本的には、Mustache.render(template, resp);
el.innerHTML = $p('render', template, resp);
console.log("Debug was set to true; disable it in production!"); // 本番環境ではこれを削除する
$p('track', {
// 1.のDIV名称と2.のリコメンデーションアイテムのdiv名称
elements: document.querySelectorAll('#li-recommendation-unit > div.recommended_item'),
name: 'default-widget',
// ウィジェット名と一致する
source: 'LI',
// "LI"は、リコメンデーションがLiftIgniterから提供されたことを示します
_debug : true
// オプション: イベントがクリックされた、または可視（Visible）状態にあるときにアラートを表示する（本番環境ではこの設定を無効にする）
});
}
});
// registerされたコールを実行する。
$p('fetch');テンプレート名とクエリセレクタは、Mustacheテンプレートとdiv名称と常に一致させてください。
3. リコメンデーションが正常に表示されているかテストする
registerおよびfetchのコードを実行すると、指定した場所にLiftIgniterからのリコメンデーションが表示されます。リコメンデーションが正常に表示されていることを確認してください。リコメンデーションのアイテムがLiftIgniterから提供されたものであることと、リコメンデーションが正しい位順番で表示されていることを確認するには、下記の行を追加して、コンソールにログが記録されるようにして、リコメンデーションを検証してください。
console.log(resp);// これは、callback関数の一行目に追加してくださいリコメンデーションとして返されたアイテムの数に問題がある場合は、LiftIgniterの簡単な検証方法のデバッグに関する説明を参照してください。返されるフィールドに問題がある（間違えた画像を返しているなど）場合は、フィールドの編集/アイテムの非表示のドキュメントにあるデバッグに関する説明を参照してください。
クライアント側でリコメンデーションのフィルタリングを行う場合は、返されるリコメンデーションの順番を維持する必要があります。
トラッキングの追加本番環境にコードをプッシュする前に、トラッキングが正常に組み込まれているかを、次のドキュメントで確認してください。