ご利用マニュアル

【ショップサーブ】導入マニュアル

作成者: レコメンドサポート担当｜2024.10.02

概要

shopserveを使用している方向けの「さぶみっと！レコメンド」導入マニュアルです。

本ページは、shopserve管理画面 Ver 3.0をベースに説明しています。
お客様がご利用のshopserve管理画面のバージョンによっては、画面キャプチャや名称が異なる場合がございます。ご了承ください。

 

無料トライアル申込み

 本ページ上部にある「無料トライアル」ボタンより、必須項目をご入力のうえお申込みください。
トライアル期間は、トライアル申込み日の翌月末まで最大2ヶ月間です。
     

アカウント発行・パスワード設定

 トライアルお申込み後、当日～3営業日以内に「さぶみっと！レコメンド」サポート担当がアカウント発行を行い、トライアルお申込み時に入力いただいたメールアドレス宛てにログイン情報をご連絡します。

設置

shopserve管理画面よりタグ設置を行います。

アイテム情報連携（必須）

shopserveの商品情報をレコメンド側に連携するための設定を、レコメンド管理画面で行います。

■編集画面
レコメンド管理画面「アカウント／基本設定 > ショップサーブ連携」変更ボタン押下

■手順

  1. shopserveの情報を入力　※全必須項目
    ショップID：shopserve管理画面ログイン用のショップID（マスターアカウント以外のショップID）
    パスワード：shopserve管理画面ログイン用のパスワード（マスターアカウント以外のショップIDに対するパスワード）
    ショップID（マスターアカウント）：shopserveのショップID（マスターアカウント）
    ショップサーブAPIキー：マネジャー認証キー （お店管理用認証キー ・ 旧認証キー）
  2. 毎日自動で同期を実行するにチェックを入れる
  3. 「登録」ボタン押下

本設定の翌朝より商品情報の連携を開始します。
朝8時以降にレコメンド管理画面「アイテム管理 > アイテム一覧」画面にて、商品情報が取り込まれていることを確認してください。

万が一、商品情報が取り込まれていない場合は、入力した情報に誤りがないかご確認のえ、レコメンドサポート宛てにメールでご連絡ください。

行動履歴収集タグ（必須）

 レコメンド、ランキングデータなどを生成する行動履歴を収集するため、商品ページに行動履歴収集タグを設置します。
 
■編集画面
shopserve管理画面「集客・運用 > PPC・アフィリエイト広告 > リマーケティングタグ設定 > 商品ページ」
 
■手順
  1. 「headタグ」「bodyタグ」入力欄に、下記のコードをそれぞれ貼り付ける
  2. 「設定を保存する」ボタン押下
  3. ページ上部にある「お店ページの更新へ」ボタン押下
  4. 画面内容に従い更新する
※手順3, 4の操作を行わないと、追加した内容がWebサイト上に反映されません。

headタグ
 ※アカウントIDは、レコメンド管理画面ログイン用のアカウントIDを入力してください。
 
bodyタグ

CV情報収集タグ（推奨）

購入完了ページにCV情報収集タグを設置します。
CV予測レコメンド、CVレコメンド、CVランキングをご利用の場合は、設置必須です。
 
CV情報を収集することで、レコメンド機能を経由した商品が購入された回数や金額が、レコメンド管理画面のレポート画面からご確認いただけます。レコメンド効果をご確認いただく際に欠かせない情報ですので、設置を推奨しています。
 
■編集画面
shopserve管理画面「集客・運用 > PPC・アフィリエイト広告 > リマーケティングタグ設定 > 購入完了ページ」
 
■手順
  1. 「headタグ」「bodyタグ」入力欄に、下記のコードをそれぞれ貼り付ける
  2. 「設定を保存する」ボタン押下
  3. ページ上部にある「お店ページの更新へ」ボタン押下
  4. 画面内容に従い更新する
※手順3, 4の操作を行わないと、追加した内容がWebサイト上に反映されません。
 
headタグ
※アカウントIDは、レコメンド管理画面ログイン用のアカウントIDを入力してください。
 
bodyタグ
<trackingtag_global>
<script type="text/javascript">
  try{
    var rcmdjp_cv_data = "__CST_ITMS rcmdjp_cv=[ITM_NO],[ITM_CNT]__";
    var rcmdjp_cv_split = rcmdjp_cv_data.split('rcmdjp_cv=');
    var rcmdjp_cv_hash = {};
    for (rcmdjp_data of rcmdjp_cv_split) {
      if (rcmdjp_data) {
        var rcmdjp_data_split = rcmdjp_data.split(',');
        rcmdjp_cv_hash[rcmdjp_data_split[0]] = rcmdjp_data_split[1];
      }
    }
    _rcmdjp._trackConversion(rcmdjp_cv_hash);
  } catch(err) {}
</script>
</trackingtag_global>

 

機能表示

 商品ページに行動履歴収集タグを設置いただいた後、「さぶみっと！レコメンド」が自動で各機能のデータ生成を行います。
 
レコメンド機能は、行動履歴が収集できていない状態でも補填機能により、アカウント発行日の翌日からおすすめ商品が表示できるようになります。
補填が有効なレコメンド機能は、以下のとおりです。
PVレコメンド／CVレコメンド／カート内レコメンド／パーソナライズレコメンド／CV予測レコメンド／テキストレコメンド／画像レコメンド

設置方法

■編集画面
shopserve管理画面「集客・運用 > PPC・アフィリエイト広告 > リマーケティングタグ設定」
 
■手順
  1. リマーケティングタグ設定画面内のタブより、レコメンド機能を表示したいページを選択
  2. 表示タグを設置するページの「headタグ」には、必ず下記のコードを1つ記述する。※複数記述しない 
    <trackingtag_global>
    <script type="text/javascript" src="//d.rcmd.jp/アカウントID/item/recommend.js" charset="UTF-8"></script>
    </trackingtag_global>

    ※アカウントIDは、レコメンド管理画面ログイン用のアカウントIDを入力してください。

  3. 「タグ設置対象ページとご利用可能な機能」から表示したい機能を押下し、表示したい機能のタグをコピーし、「bodyタグ」入力欄に貼り付ける
  4. 「設定を保存する」ボタン押下
  5. 手順3、４を繰り返し、レコメンドを表示したいすべてのページに、表示タグを貼り付ける
  6. ページ上部にある「お店ページの更新へ」ボタン押下
  7. 画面内容に従い更新する
※手順6, 7の操作を行わないと、追加した内容がWebサイト上に反映されません。

タグ設置対象ページとご利用可能な機能

ページごとにご利用いただける機能が異なります。
対象ページ ご利用可能な機能
トップページ
カテゴリページ
検索結果ページ
商品ページ
カートページ
購入完了ページ

各種タグ

■PVレコメンド・CVレコメンド

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

通常のレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv', //CVレコメンドは「cv」
template: 'detail-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>
閲覧中商品の商品カテゴリで絞り込んだレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv', //CVレコメンドは「cv」
filter: 'category',
template: 'detail-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>
購入完了ページで通常のレコメンド

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

<trackingtag_global>
<script type="text/javascript">
  try{
    var rcmdjp_cv_data = "__CST_ITMS rcmdjp_cv=[ITM_NO],[ITM_CNT]__";
    var rcmdjp_cv_split = rcmdjp_cv_data.split('rcmdjp_cv=');
    var rcmdjp_cv_hash = {};
    for (rcmdjp_data of rcmdjp_cv_split) {
      if (rcmdjp_data) {
        var rcmdjp_data_split = rcmdjp_data.split(',');
        rcmdjp_cv_hash[rcmdjp_data_split[0]] = rcmdjp_data_split[1];
      }
    }
    _rcmdjp._trackConversion(rcmdjp_cv_hash);

// レコメンド表示タグ start
    _rcmdjp._displayRecommend({
      el: document.querySelectorAll('form[name="regist"]')[0],
      el_append: 'after',
      type: 'cv', //PVレコメンドは「pv」
      code: rcmdjp_cv_hash,
      template: 'thanks-recommend'
    });
//レコメンド表示タグ end
  } catch(err) {}
</script>
</trackingtag_global>
 ※「レコメンド表示タグ start ～ レコメンド表示タグ end」以外は、CV情報収集タグです。
購入完了ページにすでにCV情報収集タグが入っている場合は、「レコメンド表示タグ start ～ レコメンド表示タグ end」のみを追加してください。
■カート内レコメンド

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

<trackingtag_global>
<script type="text/javascript">
var rcmdjp_cart_items = __DW_ITM_ID__;

if (rcmdjp_cart_items) {
 try{
 var rcmdjp_cart_items2 = rcmdjp_cart_items.split('/');

 _rcmdjp._displayRecommend({
 el: document.querySelectorAll('form[name="NEXTM"]')[0],
 el_append: 'after',
 type: 'pv', //CVレコメンドは「cv」
 code: rcmdjp_cart_items2,
 template: 'cart-recommend'
 });
 } catch(err) {}
}
</script>
</trackingtag_global>
 
■パーソナライズレコメンド
ユーザーの商品詳細ページの閲覧有無により機能の出し分けを行っています。
閲覧履歴がある場合は「パーソナライズレコメンド」を表示し、閲覧履歴がない場合は、PVランキングを表示します。
タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。
<trackingtag_global>
<script type="text/javascript">
try{
if (_rcmdjp._target._viewed().length) {
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv', //CVレコメンドは「cv」
code: _rcmdjp._target._viewed,
template: '※1 本タグを設置するページにより変更 テンプレート名1参照'
});
} else {
_rcmdjp._displayRanking({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv',
span: 'month',//集計対象期間「day／week／month」より選択
template: '※1 本タグを設置するページにより変更 テンプレート名2参照'
});
}
} catch(err) {}
</script>
</trackingtag_global>

※1

設置するページ テンプレート名1 テンプレート名2
トップページ top-per-recommend top-ranking
カテゴリページ list-per-recommend list-ranking
検索結果ページ search-per-recommend search-ranking
商品ページ detail-per-recommend detail-ranking
カートページ cart-per-recommend cart-ranking

↑戻る

■CV予測レコメンド

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

通常のレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv_cv',
template: 'detail-ai-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>

↑戻る

閲覧中商品の商品カテゴリで絞り込んだレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv_cv',
filter: 'category',
template: 'detail-ai-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>
■テキストレコメンド

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

通常のレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'text',
template: 'detail-text-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>

↑戻る

閲覧中商品の商品カテゴリで絞り込んだレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'text',
filter: 'category',
template: 'detail-text-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>
■画像レコメンド

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

通常のレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'img',
template: 'detail-img-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>

↑戻る

閲覧中商品の商品カテゴリで絞り込んだレコメンド
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'img',
filter: 'category',
template: 'detail-img-recommend'
});
} catch(err) {}
</script>
</trackingtag_global>
■ランキング

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

すべてのカテゴリーランキング
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRanking({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv',//CVランキングは「cv」、レコメンド経由PVランキングは「rpv」
span: 'month',//集計対象期間「day／week／month」より選択
template: '※1 本タグを設置するページにより変更 テンプレート名1参照'
});
} catch(err) {}
</script>
</trackingtag_global>

※1

設置するページ テンプレート名1
トップページ top-ranking
カテゴリページ list-ranking
検索結果ページ search-ranking
商品ページ detail-ranking
カートページ cart-ranking
トップで商品カテゴリ別のランキングを表示する場合
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRanking({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
type: 'pv',//CVランキングは「cv」、レコメンド経由PVランキングは「rpv」
span: 'month',//集計対象期間「day／week／month」より選択
category: '●●●', //または category_sub: '●●●',
template: 'top-ranking'
});
} catch(err) {}
</script>
</trackingtag_global>

※「●●●」は、カテゴリ名に置き換えてください。
categoryは「第1階層のカテゴリ名」を、category_subは「第2階層のカテゴリ名」を指定してください。
第3階層以下は指定できません。

↑戻る

カテゴリページで商品カテゴリ別のランキングを表示する場合
※第3階層以下の商品カテゴリページまた該当する商品カテゴリの商品数が10件以下の場合は、全体ランキングを表示します。
タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。
<trackingtag_global>
<script type="text/javascript">
var cate = $("#bread-crumb-listTop > ol > li:eq(1)").html();

 try{
 _rcmdjp._displayRanking({
 el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
 el_append: 'before',
 type: 'pv',
 span: 'month',
 category: cate,
 template: 'list-ranking'
 });
 } catch(err) {}
</script>
</trackingtag_global>
商品ページで商品カテゴリ別のランキングを表示する場合
<trackingtag_global>
<script type="text/javascript">
var cate = $("#bread-crumb-listTop > ol > li:eq(1) > a").attr("title");

 try{
 _rcmdjp._displayRanking({
 el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
 el_append: 'before',
 type: 'pv',
 span: 'month',
 category: cate,
 template: 'detail-ranking'
 });
} catch(err) {}
</script>
</trackingtag_global>
■新着商品

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

すべてのカテゴリーの新着商品
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayNewItem({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
span: '2week',//対象期間「1week／2week／1month」より選択。無期限の場合は行ごと削除
template: '※1 本タグを設置するページにより変更 テンプレート名1参照'
});
} catch(err) {}
</script>
</trackingtag_global>

※1

設置するページ テンプレート名1
トップページ top-newitem
カテゴリページ list-newitem
検索結果ページ search-newitem
商品ページ detail-newitem
カートページ cart-newitem
トップで商品カテゴリ別の新着商品を表示する場合
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayNewItem({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
span: '2week',//対象期間「1week／2week／1month」より選択。無期限の場合は行ごと削除
category: '●●●', //または category_sub: '●●●',
template: 'top-newitem'
});
} catch(err) {}
</script>
</trackingtag_global>

※「●●●」は、カテゴリ名に置き換えてください。
categoryは「第1階層のカテゴリ名」を、category_subは「第2階層のカテゴリ名」を指定してください。
第3階層以下は指定できません。

↑戻る

カテゴリページで商品カテゴリ別の新着商品を表示する場合

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

<trackingtag_global>
<script type="text/javascript">
var cate = $("#bread-crumb-listTop > ol > li:eq(1)").html();

try{
 _rcmdjp._displayNewItem({
 el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
 el_append: 'before',
 type: 'pv',
 span: '2week',//対象期間「1week／2week／1month」より選択。無期限の場合は行ごと削除
 category: cate,
 template: 'list-newitem'
 });
} catch(err) {}
</script>
</trackingtag_global>

↑戻る

商品ページで商品カテゴリ別の新着商品を表示する場合

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

<trackingtag_global>
<script type="text/javascript">
var cate = $("#bread-crumb-listTop > ol > li:eq(1) > a").attr("title");

try{
 _rcmdjp._displayNewItem({
 el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
 el_append: 'before',
 type: 'pv',
 span: '2week',//対象期間「1week／2week／1month」より選択。無期限の場合は行ごと削除
 category: cate,
 template: 'detail-newitem'
 });
} catch(err) {}
</script>
</trackingtag_global>
■ピックアップ
レコメンド管理画面よりピックアップ設定を行った後、タグ設置を進めてください。
タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayPickup({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
label: '●●●',
template: '※1 本タグを設置するページにより変更 テンプレート名1参照'
});b
} catch(err) {}
</script>
</trackingtag_global>

※「●●●」は、レコメンド管理画面のピックアップ設定で指定した「ピックアップ名」に置き換えてください。

※1

設置するページ テンプレート名1
トップページ top-pickup
カテゴリページ list-pickup
検索結果ページ search-pickup
商品ページ detail-pickup
カートページ cart-pickup
■閲覧履歴

タグ内の「el」「el_append」に関する詳細はこちらをご覧ください。

<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayHistory({
el: document.querySelectorAll('ページ内の表示したい位置のCSSを確認し、CSSセレクタで記述')[0],
el_append: 'before',
template: '※1 本タグを設置するページにより変更 テンプレート名1参照'
});
} catch(err) {}
</script>
</trackingtag_global>

※1

設置するページ テンプレート名1
トップページ top-history
カテゴリページ list-history
検索結果ページ search-history
商品ページ detail-history
カートページ cart-history

タグの動作確認

各種JavaScriptタグが正しく動作している場合は、ブラウザの開発コンソールよりタグに応じたJavaScriptファイルやgifファイルの読み込みが確認できます。
 
タグの動作確認方法よりタグ動作をブラウザで確認後、翌日レコメンド管理画面にて表示回数やクリック数がレポートに反映されているかご確認ください。

表示位置指定

表示位置の指定は、「el」「el_append」パラメータによって柔軟に指定可能です。
詳細は、表示位置の指定についてをご覧ください。
完全な記事を表示