運用サポート(平日10:00~17:00) 06-6485-6485
コマースクリエイター無効コマースクリエイター有効コマースクリエイター運用中?

自動生成ページ以外(静的ページ・CMS)にレコメンドを表示する方法

×

マニュアル閲覧上の注意

店舗の状態にあわせて、上のボタンからいずれかを選択してください。表示される項目が変更されます。

コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

上記のボタンは再選択できます。店舗の状態がわからない方はコマースクリエイターご利用状況の確認方法についてをご覧ください。

静的なページにもレコメンドやランキング、閲覧履歴など各種レコメンドを表示する方法です。

静的なページとは、以下などを指します。

自動生成ページとは別管理のため、ご自身で基本設定タグを記述する必要があります。

またfutureshop自動生成ではなく、独自の「商品情報(詳細)ページ」を作成する場合に、商品をレコメンド対象としたい場合は、アイテム(商品)データの追記も必要になりますので、こちらの注意点をご確認ください。

FTPでアップロードした静的HTMLファイルへの表示設定(以前からのユーザー画面)

作成したHTMLファイルに下記のタグを設定してください。

基本タグ設定
<head></head>タグ内に下記の「基本タグ」を記述します。
※shopkey(店舗KEY)を書き換えて記述してください。
※改行せずに記述してください。
<script type="text/javascript" src="//r2.future-shop.jp/fs.shopkey/pc/recommend.js" charset="UTF-8"></script>
出力タグ設定
<body></body>タグ内に、表示したい各種レコメンドタグを記述します。
各種レコメンドタグの記述方法については、出力タグについてをご覧ください。

フリーページで作成したページへの表示設定(コマースクリエイター)

コマースクリエイター>パーツ>パーツを追加するにて[フリーパーツ]を追加し、以下を設定します。

パーツ名
任意の名称を記入します。(例:レコメンド2基本タグ)
置換文字
任意の置換文字を記入します。
表示内容
下記の「基本タグ」を記述します。
※shopkey(店舗KEY)を書き換えて記述してください。
※改行せずに記述してください。
<script type="text/javascript" src="//r2.future-shop.jp/fs.shopkey/pc/recommend.js" charset="UTF-8"></script>

[レイアウト一覧]より、レコメンドを表示したいフリーページで利用している(割当している)レイアウトを選択します。
「<head設定>内を変更する」を押下します。

[パーツ一覧]から作成したパーツ(例:レコメンド2基本タグ)を該当レイアウトに配置します。
配置方法が不明な方はコマースクリエイター>レイアウト変更をご確認ください。

該当フリーページの[ページ本文]の、レコメンドを表示したい場所に各種レコメンドタグを記述します。
各種レコメンドタグの記述方法については、出力タグについてをご覧ください。

作成したページが「商品情報(詳細)ページ」である場合の注意点

作成ページの商品をレコメンド対象としたい場合は、アイテム(商品)データをレコメンドエンジンへ送信する必要があります。
FTPでアップロードした静的HTMLファイルの場合は<body></body>タグ内に、コマースクリエイターのフリーページで作成したページの場合は「ページ本文」に、以下の「アイテム(商品)データ(商品情報収集タグ)」を記述してください。

<script type="text/javascript"><!—
try{
_rcmdjp._setItemData({
code: '商品URLコード',
name:'商品名',
url:'商品ページのURL',
image:'商品画像パス(URL)',
price:'商品販売額',
price_before_tax:'販売価格',
tax:'消費税',
stock:'在庫数',
memberprice:'会員価格',
memberprice_before_tax:'会員販売価格',
memberprice_tax:'会員販売価格消費税',
point:'ポイント数',
category:'カテゴリID名',
release_date:'商品登録日時',
disabled:'0'
});
}catch(err){}
//--></script>
  • [disabled:'0']は、レコメンド商品として「公開する」設定となります。この行は削除しないでください。「非公開」にする場合は、[disabled:'1']と記述してください。
  • 1ページで設置できる商品情報収集タグは1商品分のみとなります。
  • futureshopで自動生成されるページに出力されるアイテム(商品)データの「validation」というパラメータはオリジナルHTMLページには使用できません。誤った値を設定すると正しくデータ収集されません。
  • 「url」は絶対パス(http~)で記載してください。
  • 「image」に商品サムネイル画像を登録される場合
    ■以前からのユーザー画面
    image:'/shop/item/店舗Key/picture/goods/サムネイル画像ファイル名', などのように、/shop/~から記述をしてください。httpから画像URLを記述すると、SSLページでセキュリティアラートの原因となります。
    ■コマースクリエイター
    https://{店舗key}.itembox.design/product/{商品IDの万千百の位3桁}/{商品ID・12桁表示}/{商品ID・12桁表示}-{画像番号・2桁表示}-m.jpg
    ※商品IDは商品情報登録時にシステムから自動発番されるIDです。
    ※商品画像ファイル名に使用されているのは半角ハイフンです。
    ※表示される画像はMサイズに固定されています。画像は、商品サムネイル画像に指定されている商品画像が表示されます。商品サムネイル画像は、運用メニュー>商品管理>商品画像設定(コマースクリエイター)にて登録できます。
  • 価格、消費税、在庫数は数字のみ記載してください。桁区切り(,)や単位(円や¥)は不要です。
  • 在庫管理をしない場合、在庫数の「stock」は不要です。
  • 会員価格がない場合は「memberprice・memberprice_before_tax・memberprice_tax」は不要です。
  • ポイントを利用しない場合、ポイント数の「point」は不要です。
  • レコメンドカテゴリを利用しない場合「category:'カテゴリID名',」は必要ありません。カテゴリID名は、設定>レコメンド>レコメンド2設定構築メニュー>ページ設定>レコメンド2設定の「カテゴリレコメンド設定」で設定されたIDを記載してください。設定方法はカテゴリレコメンド設定をご覧ください。
  • 「release_date」は「2016-07-28 10:00:00」などのようにyyyy-MM-dd hh:mm:ss形式で記載してください。

項目表示について

各項目は以前からのECサイト用・コマースクリエイター用・共通の3種類があります。コマースクリエイター有効(切替前)は両方の項目が表示されます。

以前からのECサイト用項目で、コマースクリエイターでは使用しません。(右側にこちらの色の点線が表示されます。)

コマースクリエイター専用ECサイト用の項目です。以前からのECサイトには影響しません。(右側にこちらの色の点線が表示されます。)

上記以外は共通で使用する項目です。(何も表示されません。)

×

店舗の状態にあわせて、下のボタンからいずれかを選択してください。

コマースクリエイター無効 コマースクリエイター有効 コマースクリエイター運用中
コマースクリエイター無効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用されている場合(コマースクリエイターをご利用でない場合)はこちらを選択してください。
コマースクリエイター有効
以前からの管理画面で構築し、以前からのECサイト(ユーザー画面)で店舗を構築・運用しながら、コマースクリエイター管理画面が使用できる場合はこちらを選択してください。
コマースクリエイター運用中(切替後)
コマースクリエイター管理画面で構築し、コマースクリエイター専用ECサイト(ユーザー画面)で店舗を構築・運用されている場合(以前からのユーザー画面をご利用でない場合)はこちらを選択してください。

再度選択できますので、店舗の状態がわからない方はいったん「有効」をお選びください。
詳しくはコマースクリエイターご利用状況の確認方法についてをご覧ください。