1.同じページビュー上の複数のウィジェット: 例
表示したいすべてのウィジェットをregisterしてください。例えば、"bottom-widget"と"trending-widget"の2つのウィジェットを表示する場合は、単独のウィジェットと同様の手順で、それぞれのウィジェットを設定するようにしてください。
***1. ウィジェットごとにリコメンデーションのプレースホルダを追加する。
<div id="li-bottom-recommendation-unit"></div>
<div id="li-trending-recommendation-unit"></div>***2. ウィジェットごとにMustacheテンプレートを追加する。
<script type="application/mustache"
id="li-bottom-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>
<script type="application/mustache"
id="li-trending-recommendation-template">
{{#items}}
<div class='recommended_item'>
<a href="{{url}}">
<img src="{{thumbnail}}" width="150" height="150" />
<span class="title">{{title}}</span>
</a> by {{author}}
</div>
{{/items}}
</script>3
// 各ウィジェットへのregisterコール
$p('register', {
max: 6, // 表示するアイテムの数
widget: 'bottom-widget',
opts : {},
callback: function(resp) {
// クエリセレクタは1.のdiv名と一致させる
var el = document.querySelector('#li-bottom-recommendation-unit');
// テンプレートは2.のMustacheテンプレートと一致させる
var template = document.querySelector('#li-bottom-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', {
elements: document.querySelectorAll('#li-bottom-recommendation-unit > div.recommended_item'),
// ウィジェット名と一致させる
name: 'bottom-widget',
// LiftIgniterからのリコメンデーションには"LI"を使用する
// by LiftIgniter
source: 'LI',
// 各イベントをトラックするためのオプションパラメータ
// 'register'コールがオプションのフィールドを持っている場合、
// そのフィールドはここに表示してください。
opts: {},
_debug : true
});
}
});
$p('register', {
max: 4, // 表示するアイテムの数
widget: 'trending-widget',
opts : {},
callback: function(resp) {
// クエリセレクタは1.のdiv名と一致させる
var el = document.querySelector('#li-trending-recommendation-unit');
// テンプレートは2.のMustacheテンプレートと一致させる
var template = document.querySelector('#li-trending-recommendation-template').innerHTML;
// 基本的には、Mustache.render(template, resp);
el.innerHTML = $p('render', template, resp);
console.log("Debug was set to true; disable it in production!"); // Remove in production
$p('track', {
// 1.のdiv名と2.のリコメンデーションアイテムのdiv名
elements: document.querySelectorAll('#li-trending-recommendation-unit > div.recommended_item'),
// ウィジェット名と一致させる
name: 'trending-widget',
// LiftIgniterからのリコメンデーションには"LI"を使用する
// by LiftIgniter
source: 'LI',
// 各イベントをトラックするためのオプションのパラメータ
// 'register'コールがオプションのフィールドを持っている場合、
// そのフィールドはここに表示してください。
opts: {},
_debug : true
});
}
});
// リコメンデーションを取得して、registerされたすべてのcallbackを実行する。
$p('fetch');Fetch
Fetch関数は、すべてのコールが登録された後に一度だけコールしてください。そうすることで、各ウィジェットに重複するリコメンデーションが表示されず、ModelサーバへのHTTPコールが混在する際の遅延を最小限にとどめることができます。
複数のウィジェットの登録
ウィジェットはFetchの前に複数回registerすることができます。ウィジェットをregisterするごとに、その前のregisterは上書きされます。ウィジェットを再度registerすると、Javascriptコンソールにメッセージが表示されます。
2. ウィジェットの優先順位、重複削除、ウィジェットごとのリコメンデーション表示数
同じWebページに複数のウィジェットを表示している場合、ウィジェットの優先順位は、ウィジェットをregisterした順になります。優先したいウィジェット（より効果の高いリコメンデーションを表示したいウィジェット）がある場合は、最初にregisterを行うようにしてください。
複数のウィジェットを表示している場合、それぞれのウィジェットに必要な数だけのリコメンデーションをリクエストするようにしてください。リコメンデーションの重複削除をすることでリコメンデーションの質が低下する可能性があります。
3. 追加フィールドのリクエスト
すべてのウィジェットに対して、1セットのフィールドのみを使用できます。もしウィジェットごとに異なる組み合わせのフィールドが必要な場合は、すべてのウィジェットにおいて必要なすべてのフィールドを取得するようにしてください。
インベントリアイテムのフィールドに値が存在しない場合は、そのフィールドは返されません。
4. コンテキストごとに異なるウィジェットを呼び出す
ユーザコンテキストごとに異なるウィジェット名を使用する場合があります。よくある例としては、デスクトップPC、モバイル端末、タブレット端末ごとに異なるページレイアウトを使用していて、デスクトップではボトムウィジェットととレンディングウィジェット、モバイルではボトムウィジェットを使用しているような、環境ごとに異なるレイアウトでウィジェットの配置をしている場合などです。
コンテキスト上で使用するウィジェットのみをregisterするようにしてください。そうすることで、質の高いリコメンデーションが取得できるようになります。ここで使用しないウィジェットを呼び出すことで、リコメンデーションの重複削除が発生した場合に、表示するリコメンデーションの効果が低くなる可能性があります。