既存のリコメンデーションのウィジェットを上書きすることは、下記のような場合に活用できます。
- すでに設置されたウィジェットのエリア内にあるリコメンデーションのサブセットを書き換えたい場合。
- 他のリコメンデーションエンジンに対してA/Bテストを実行したい場合。
- ユーザがリコメンデーションを取得できない場合（ユーザ側のブラウザの問題、ネットワーク接続の問題、または弊社側のサーバーのタイムアウトによる場合）に、予備のリコメンデーションが必要になる場合。
1. 例: 一つのウィジェット上でリコメンデーションの書き換えを行う
お客様のページに下記のようなリコメンデーションのエリアがあるとします:
<div id="li-recommendation-unit">
<div class='recommended_item'>
<a class='headline' href='//url-1'>Title 1</a>
</div>
<div class='recommended_item'>
<a class='headline' href='//url-2'>Title 1</a>
</div>
<div class='recommended_item'>
<a class='headline' href='//url-3'>Title 3</a>
</div>
<div class='recommended_item'>
<a class='headline' href='//url-4'>Title 4</a>
</div>
</div>ここで2番目と4番目の[recommended_item]をLiftIgniterのリコメンデーションで上書きする場合は、下記のとおりに行ってください:
***1. 書き換えたいアイテムにタグを付加する（例: [li-widget-item]のclass指定をする）:
<div id="li-recommendation-unit">
<div class='recommended_item'>
<a class='headline' href='//url-1'>Title 1</a>
</div>
<div class='recommended_item li-widget-item'>
<a class='headline' href='//url-2'>Title 1</a>
</div>
<div class='recommended_item'>
<a class='headline' href='//url-3'>Title 3</a>
</div>
<div class='recommended_item li-widget-item'>
<a class='headline' href='//url-4'>Title 4</a>
</div>
</div>***2. タグを追加した部分に対するMustacheテンプレートを追加する:
<script type="application/mustache" id="recommended-item-template">
<div class='recommended_item'>
<a class='headline' href='{{url}}'>{{title}}</a>
</div>
</script>***3. 適切なcallbackでリコメンデーションを表示する
// リコメンデーションを表示して、'li-widget-item'でマークされたエリアを上書きする。
var overwrite_callback = function(resp) {
var els = document.querySelectorAll(
'#li-recommendation-unit > div.li-widget-item');
var template = document.querySelector(
'#recommended-item-template').innerHTML;
for (var i = 0;
i < els.length && i < resp.items.length;
++i) {
els[i].innerHTML = $p('render', template, resp.items[i]);
// 基本的には、Mustache.render(template, resp.items[i]);
}
$p('track', {
elements: document.querySelectorAll('#li-recommendation-unit > div.li-widget-item'
), // LiftIgniterのりこめんでーしょんをトラックする
name: 'default-widget',
source: 'LI',
opts: {} // Optional parameters to track with each event.
// registerコールがオプションのフィールドを持っている場合は、
// そのフィールドはここに表示してください。
}
);
}
// リコメンデーションをfetchするためのregisterコール
// 上書きのcallbackを適用する。
$p('register', {
max: 2,
widget: 'default-widget',
callback: overwrite_callback // 上書きするウィジェットが確実に読み込まれるように、jQueryまたは他のリスナーにWrapすることもできます。
}
);
// registerコールの実行
$p('fetch');
読み込みの順番に関する問題callbackが実行されても上書きするリコメンデーションが読み込まれない場合は、LiftIgniterのリコメンデーションで上書きを行うことはできません。これは、callbackをjQueryの中にWrapすることで解決できます。詳細については、読み込みの順番のドキュメントを参照してください。
複数のウィジェットコールからのリコメンデーションでアイテムを書き換える異なるウィジェットコールから取得したリコメンデーションを、Webサイトに表示することができます。