ご利用マニュアル

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

概要

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

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

 

無料トライアル申込み

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

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

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

設置

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

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

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

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

■手順

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

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

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

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

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

headタグ
<trackingtag_global>
<script type="text/javascript" src="//d.rcmd.jp/アカウントID/item/recommend.js" charset="UTF-8"></script>
</trackingtag_global>
 ※アカウントIDは、レコメンド管理画面ログイン用のアカウントIDを入力してください。
 
bodyタグ
<trackingtag_global>
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
type: 'pv',
template: 'tracking'
});
} catch(err) {}
</script>
</trackingtag_global>

CV情報収集タグ（推奨）

購入完了ページにCV情報収集タグを設置します。
CV予測レコメンド、CVレコメンド、CVランキングをご利用の場合は、設置必須です。
 
CV情報を収集することで、レコメンド機能を経由した商品が購入された回数や金額が、レコメンド管理画面のレポート画面からご確認いただけます。レコメンド効果をご確認いただく際に欠かせない情報ですので、設置を推奨しています。
 
■編集画面
shopserve管理画面「集客・運用 > PPC・アフィリエイト広告 > リマーケティングタグ設定 > 購入完了ページ」
manual-setting-06
 
■手順
  1. 「headタグ」「bodyタグ」入力欄に、下記のコードをそれぞれ貼り付ける
  2. 「設定を保存する」ボタン押下
  3. ページ上部にある「お店ページの更新へ」ボタン押下
  4. 画面内容に従い更新する
※手順3, 4の操作を行わないと、追加した内容がWebサイト上に反映されません。
 
headタグ
<trackingtag_global>
<script type="text/javascript" src="//d.rcmd.jp/アカウントID/item/recommend.js" charset="UTF-8"></script>
</trackingtag_global>
※アカウント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-recommendtop-ranking
カテゴリページlist-per-recommendlist-ranking
検索結果ページsearch-per-recommendsearch-ranking
商品ページdetail-per-recommenddetail-ranking
カートページcart-per-recommendcart-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」パラメータによって柔軟に指定可能です。
詳細は、表示位置の指定についてをご覧ください。
 次の手順へ
マニュアル一覧に戻る

関連するマニュアル

【カラーミーショップ】【Tips】価格表示を税込み価格に変更する方法

カラーミーショップご利用者様向け さぶみっと！レコメンドの価格表示を税込み価格に変更する...

【カラーミーショップ】さぶみっと！レコメンドご利用方法

カラーミーショップご利用者様向け さぶみっと！レコメンドのはじめ方をご案内します。

【カラーミーショップ】さぶみっと！レコメンドご利用方法（手動タグ連携アカウント向け）

カラーミーショップご利用者様 手動タグ連携アカウント向け さぶみっと！レコメンドのはじめ...

【カラーミーショップ】【Tips】価格表示に単位をつける方法

カラーミーショップご利用者様向け さぶみっと！レコメンドの価格表示に単位をつける方法につ...

関連するよくあるご質問

請求はどのタイミングで発生しますか？

さぶみっと！レコメンドのよくあるご質問

利用料金のPVはどのように計測していますか？

さぶみっと！レコメンドのよくあるご質問

代理店制度はありますか？

さぶみっと！レコメンドのよくあるご質問

月間PV数を超えた場合の請求はどうなりますか？

さぶみっと！レコメンドのよくあるご質問
TOPへ