レコメンドタグをサイトに設置したい
回答
レコメンドタグとは
レコメンドタグとは、サイトレコメンド用データを作成したいで作成したレコメンド表示用のデータをwebサイトに表示させるためのタグを指します。
レコメンドタグの実装方法
レコメンドタグに対して、レコメンド表示用データを表示させる処理を追加実装する必要がありますが、この実装には「b→dashのワンタグに追加実装する方法」と「レコメンドタグを新規実装する方法」の2通りあります。
基本的にはワンタグへの追加実装を推奨しますが、レコメンド表示させるHTML属性を取得できないサイト構成である場合はレコメンドタグを追加実装する方法を採用する必要があります。
同一のURLに複数のレコメンドを表示する場合、「b→dashのワンタグに追加実装する方法」と「レコメンドタグを新規実装する方法」では、リクエスト数が異なります。
● b→dashのワンタグに追加実装する方法
ワンタグにレコメンドタグを追加するため、PVが発生すると、1つのURLでまとめてリクエストが発生します。
例えば、同一のURLに2つのレコメンドを表示する場合でも、リクエストは1つにまとめられるため、
”1PV = 1リクエスト”となります。
● レコメンドタグを新規実装する方法
レコメンドごとにタグを埋め込んでいるため、PVが発生した場合は、レコメンドの数だけリクエストが発生します。
例えば、同一のURLに2つのレコメンドを表示する場合、それぞれのレコメンドに対してリクエストが発生するため、
”1PV = 2リクエスト”となります。
このように、「レコメンドタグを新規実装する方法」でレコメンドタグを実装した場合、レコメンドの数だけリクエストが発生するため、想定以上にリクエスト数が増加し、従量課金の上限を超過してしまう可能性がありますので、ご注意ください。
[参考]
b→dashのワンタグに追加実装する方法
「レコメンド」をクリックします
サイトに表示したい「レコメンドデータ」をクリックします
「レコメンドタグの確認」をクリックします
「編集」をクリックします
赤枠内の「ワンタグ編集画面」にレコメンドタグを追加実装していきます
ワンタグにレコメンドタグを追加実装するには、「サンプルデータ」と「サンプルコード」を参考に「ワンタグ編集画面」でコーディングをしていく必要があります。
サンプルデータの確認方法
「レコメンドタグの確認」をクリックします
「サンプルデータ」をクリックします
サンプルデータが表示されます
上記のサンプルデータには、サイトレコメンド用データを作成したいの「アルゴリズムと利用データの選択」における「商品データ」選択の際に指定したカラムが、どのような形式でタグに引き渡されるかを記載しています。
サンプルデータ画面を下にスクロールすると、実データのイメージを確認することもできます！
サンプルコード
以下にサンプルコードを記載します。
※コメントアウトしたい場合は、「// 」ではなく、コメントアウトしたい行の前に「/*」、後ろに「*/ 」を挿入してください
※「column_481_6291」はサンプルのカラム名を記載しています。貴社環境においてどのようなカラム名になるかは、上記でご紹介した「サンプルデータ」からご確認ください
function onSuccess(items) {
/* サイト上のレコメンド表示させたい場所のHTML属性を指定します*/
/* 以下のケースではID属性が「footer」であるHTML属性が存在する場所にレコメンド表示をさせようとしています*/
var target = document.getElementById("footer");
var html = '';
if (items.length > 0) {
html += '<ul>';
for (var i = 0; i < items.length; i++) {
var item = items[i];
/* レコメンド表示したい項目に値を挿入（サンプルデータに記載されているカラム名を利用）*/
var item_name = item['column_481_6291'];
var item_price = item['column_481_6291'];
/* レコメンドをクリックしたかどうかを計測するために、URLに計測用パラメータを付与 */
var url = item['column_481_6291'].indexOf('?') >= 0 ? item['column_481_6291'] + '&' + item['click_param'] : item['column_481_6291'] + '?' + item['click_param'];
html += "<li style='border-bottom:3px solid red;'><a href=" + url + ">" + item_name + "</a></li>";
}
html += '</ul>';
} else {
html = "<p>現在おすすめアイテムはありません。</p>";
}
target.innerHTML = html;
}
上記のサンプルコード内に記載されている以下のソースコードは、レコメンドをクリック計測するために必要なソースコードとなります。
var url = item['column_481_6291'].indexOf('?') >= 0 ? item['column_481_6291'] + '&' + item['click_param'] : item['column_481_6291'] + '?' + item['click_param'];
html += "<li style='border-bottom:3px solid red;'><a href=" + url + ">" + item_name + "</a></li>";「ワンタグ編集画面」でコーディングすることができたら、
「保存」をクリックします
b→dashからレコメンドの配信を行った場合、貴社webサイトとb→dash間において、下記のデータの受け渡しが発生します。
レコメンドタグを新規実装する方法
「レコメンド」をクリックします
サイトに表示したい「レコメンドデータ」をクリックします
「レコメンドタグの確認」をクリックします
「レコメンド表示タグ」をクリックします
「サンプルのレコメンド表示タグ（貴社サイトに埋め込むコードのサンプル）」が表示されます
「コピー」をクリックして、カスタマイズの上、貴社サイトへの埋め込みをお願いします
表示されるサンプルコードを参考に、貴社のサイトに埋め込むために、レコメンドタグをカスタマイズする必要があります。以下の「サンプルデータ」をご利用の上、カスタマイズの実施をお願いいたします。
サンプルデータの確認方法
「レコメンドタグの確認」をクリックします
「サンプルデータ」をクリックします
サンプルデータが表示されます
上記のサンプルデータには、サイトレコメンド用データを作成したいの「アルゴリズムと利用データの選択」における「商品データ」選択の際に指定したカラムが、どのような形式でタグに引き渡されるかを記載しています。
サンプルデータ画面を下にスクロールすると、実データのイメージを確認することもできます！
サイトレコメンドは、大きく『①IDデータの連携』『②レコメンドデータの作成』『③レコメンドデータの連携』という3つのStepを経て実現されます。
この際、b→dash側の責任範囲としては『貴社webサイトにJSON形式でレコメンドデータを連携するまで』となりますので、受け取ったJSONデータをどのようにwebサイトに表示するか、どのようにコーディングするか、などの要件定義/設計/開発/テストは貴社での実施をお願いいたします。
サイトレコメンドを開始する
レコメンドタグを実装できたら、レコメンドデータのTOP画面からレコメンドタグを「運用」に切り替えます。
