ご利用マニュアル

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

作成者: レコメンドサポート担当|2023.12.19
概要
カラーミーショップをご利用の方で、お客様にてJavaScriptタグを設置いただく手動タグ連携を選択いただいた方向けのマニュアルです。
※カラーミーショップをご利用ではないお客さまは、「さぶみっと!レコメンド」管理画面より閲覧可能なマニュアルをご覧ください。

1. 基本タグ設置

情報収集タグ、表示タグを動作させるために必須となる基本タグをHTMLのheadタグ内に設置します。

  1. カラーミーショップ管理画面「集客 > 検索エンジン対策 > 検索エンジン対策」にアクセス
  2. 共通タブを選択
  3. headタグ内フリースペース設定の「PCショップ用設定」「スマートフォンショップ用の設定」それぞれの入力欄に以下を貼り付ける
<script type="text/javascript" src="//d.rcmd.jp/●●●/item/recommend.js" charset="UTF-8">
</script>

※「●●●」は、レコメンド管理画面ログイン時に必要なアカウントIDに置き換える

2. 行動履歴収集タグ設置

サイト内の行動履歴を収集するため、カラーミーショップの商品詳細デザインテンプレートにレコメンドタグを設置します。

  1. カラーミーショップ管理画面「ショップ作成 > デザイン > デザイン > 利用中のテンプレート > テンプレート編集」にアクセス
  2. ページ種類:商品詳細の「HTML・CSS」リンクを押下
  3. HTML編集枠内の最下部に、以下のレコメンドタグを貼り付ける
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
code: '<{$product.id}>',
type: 'pv',
template: 'tracking'
});
} catch(err) {}
</script>

3. CV情報収集タグ設置

購入情報を収集するため、カラーミーショップの購入完了ページにCV情報収集タグを設置します。

  1. カラーミーショップ管理画面「ツール > コンバージョンタグ > コンバージョンタグ」にアクセス
  2. 「bodyタグ内設置」に以下のタグを貼り付ける
<script type="text/javascript" src="//d.rcmd.jp/●●●/item/recommend.js" charset="UTF-8">
</script>

<script type="text/javascript">
let products = {};
for (const i in <{$order_products}>) {
products[<{$order_products}>[i]['id']] = <{$order_products}>[i]['quantity'];
}
_rcmdjp._trackConversion(products, {'order': <{$order_no}>});
</script>
※「●●●」は、レコメンド管理画面ログイン時に必要なアカウントIDに置き換える

4. 表示タグ設置

カラーミーショップ管理画面「ショップ作成 > デザイン > デザイン > 利用中のテンプレート > テンプレート編集」配下にて、表示したいページのテンプレートにレコメンド表示タグ貼り付けてください。

4-1. カート内レコメンド表示

カラーミーショッププレミアムプランのご契約かつ「タグ管理 for  GTM」アプリのご利用が必須です。

カート内レコメンドは、Googleタグマネージャーを使用して設置します。
別途「手動タグ連携アカウント様向け-カート内レコメンドGTM設置マニュアル.pdf」をご覧ください。

4-2. レコメンド表示

回遊促進・滞在時間アップのため、商品詳細ページでご利用いただく機能です。

  1. カラーミーショップ管理画面「ショップ作成 > デザイン > デザイン > 利用中のテンプレート > テンプレート編集」へアクセス
  2. ページ種類:商品詳細の「HTML・CSS」リンクを押下
  3. HTML編集枠内のレコメンドを表示したい位置最下部に、以下のレコメンドタグを貼り付ける
<script type="text/javascript">
try{
_rcmdjp._displayRecommend({
code: '<{$product.id}>',
type: 'pv',//CVレコメンド表示希望の場合は「cv」に変更
template: 'recommend'//レコメンド管理画面よりHTML、CSS変更可
});
} catch(err) {}
</script>

4-3. パーソナライズレコメンド表示

リピーター向け、離脱防止にトップ、商品一覧など、商品詳細ページ以外でのご利用がおすすめです。

  1. カラーミーショップ管理画面「ショップ作成 > デザイン > デザイン > 利用中のテンプレート > テンプレート編集」へアクセス
  2. レコメンドを表示したいページの「ページ種類」の「HTML・CSS」リンクを押下
  3. HTML編集枠内のレコメンドを表示したい位置最下部に、以下のレコメンドタグを貼り付ける
<script type="text/javascript">
try{
  if (_rcmdjp._target._viewed().length) {
    _rcmdjp._displayRecommend({
      type: 'pv',//CVレコメンド表示希望の場合は「cv」に変更
      code: _rcmdjp._target._viewed,
      template: 'personalized_recommend'//レコメンド管理画面よりHTML、CSS変更可
    });
  } else {
    _rcmdjp._displayRanking({
      type: 'pv',
      span: 'month',
      template: 'ranking'
    });
  }
} catch(err) {}
</script>

5. スマートフォンテンプレートが別設定になっている場合

行動履歴収集タグ設置、表示タグ設置(カート内レコメンドタグ以外)を以下の画面より設置してください。

設定画面

  1. カラーミーショップ管理画面「ショップ作成 > スマートフォンショップ > デザイン設定」アクセス
  2. ご利用中を表す緑色のチェックが入っているテンプレート名の「デザイン設定」を押下
  3. 2. 行動履歴収集タグ設置」「4. 表示タグ設置」と同様の手順でタグを設置

6. タグの動作確認

設置したタグが問題なく動作しているかブラウザの開発コンソールと、レコメンド管理画面で確認します。

  1. ブラウザの開発コンソール上での確認
    動作確認マニュアルページをご覧いただき、それぞれのタグ動作を確認してください。
  2. レコメンド管理画面での確認
    タグ設置と1の確認が終わった翌日以降にレコメンド管理画面にアクセスし、ダッシュボードよりPV数、クリック数、CV情報の数値の取得ができているか確認してください。

タグ設置、動作にご不安な点がある場合は、遠慮なくレコメンドサポート宛てにお問い合わせください。
メール、オンライン会議でサポートいたします。

さぶみっと!レコメンドに関するお問い合わせ

ご不明点などございましたら、お気軽に「さぶみっと!レコメンド」サポート宛て(recommend_support@dragon.jp)にご連絡ください。

サポート受付時間
平日 10時~17時(土日祝日除く)