# 従来のfutureshopに実装する
こちらの資料は古いバージョンのFutureShopをお使いの場合のページになります。 コマースクリエイターをご利用の場合はこちらを参照ください。
# 導入の流れ
実装にはAPI キー
とストア名
が必要となるため、担当者にお問い合わせください。
# Future Shop で任意タグを登録する
Future Shop の 管理画面
から、構築メニュー
⟶ プロモーション管理
⟶ 任意測定タグ設定
⟶ 任意測定タグ新規登録
を選択。
「各ページの出力設定を有効にする」にチェックを付けて、タグ名をVS-TAG
に設定。
# 商品詳細ページ内に<input>
タグと javascript を出力する
出力設定は「 <body>
タグ内に出力する 」と設定。
<input>
タグを以下の通り作成。店舗 KEY
を正しい値に書き換えてください。
no | id 名 | 置換文字 | コマースクリエーター置換文字 |
---|---|---|---|
1 | vs-user-id | 会員 ID。$MEMBER_ID$ を設定する。 検証方法: document.getElementById("#vs-user-id").value で値が返れば OK(ユーザーログインの場合のみ)。 | {@ member.id @} を設定する。 |
2 | vs-product-id | 商品 URL コード。店舗 KEY_$GOODS_URL$ を設定する。 検証方法: document.getElementById("#vs-product-id").value で値が返れば OK。 | 店舗 KEY_{% analytics.product.url %} を設定する。 |
<input>
タグとサンプルの javascript をコピーして、出力する。
- PC 用
//上記にて作成した<input>タグを出力
<input type="hidden" id="vs-product-id" value="店舗KEY_$GOODS_URL$">
<input type="hidden" id="vs-user-id" value="$MEMBER_ID$">
<script type="text/javascript">
var vsStoreName = 'ストア名'; //担当者からお知らせする値に書き換えてください。
var vsEnv = 'production';
var vsDeviceType = 'desktop';
(function(d) {
var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'integration.virtusize.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
- Mobile 用
//上記にて作成した<input>タグを出力
<input type="hidden" id="vs-product-id" value="店舗KEY_$GOODS_URL$">
<input type="hidden" id="vs-user-id" value="$MEMBER_ID$">
<script type="text/javascript">
var vsStoreName = 'ストア名'; //担当者からお知らせする値に書き換えてください。
var vsEnv = 'production';
var vsDeviceType = 'mobile';
(function(d) {
var s = d.createElement('script'); s.type = 'text/javascript'; s.charset='utf-8'; s.async = true;
s.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + 'integration.virtusize.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
# 注文完了ページ内に javascript を 出力する
出力設定は「 <body>
タグ内に出力する 」と設定。
出力内容にサンプルの javascript をコピーして、出力する。店舗 KEY
を正しい値に書き換えてください。
<script type="text/javascript">
window.vsEnv = "production";
window.vsDomain = "jp";
window.vsApiKey = "API_KEY"; // 担当者からお知らせする値に書き換えてください。
window.vsOrderObject = {
orderId: "$ORDER_ID$",
//コマースクレーターの場合 {% analytics.order_no %}
userId: "$MEMBER_ID$",
//コマースクレーターの場合 {@ member.id @}
region: "JP",
items: [$ITEM_INFO$],
//コマースクレーターの場合 {% analytics.item_info %}
};
(function(d) {
var s = d.createElement("script");
s.type = "text/javascript";
s.charset = "utf-8";
s.async = true;
s.src = "https://integration.virtusize.com/orders/confirmation.js";
var s1 = d.getElementsByTagName("script")[0];
s1.parentNode.insertBefore(s, s1);
})(document);
</script>
商品情報置換文字にサンプルの javascript をコピーして、出力する。店舗 KEY
を正しい値に書き換えてください。
{ productId: "店舗KEY_$GOODS_URL$",
//コマースクレーターの場合 店舗KEY_{% analytics.product.url %}
size: "$GOODS_DETAIL_NO$",
//コマースクレーターの場合 {% analytics.product.sku %}
variantId: "NA",
url: "https://店舗KEY.c04.future-shop.jp/fs/店舗KEY/$GOODS_URL$",
//コマースクレーターの場合 "https://店舗KEY.c04.future-shop.jp/fs/店舗KEY/{% analytics.product.sku %}"
imageUrl: "NA",
color: "NA",
gender: "NA",
unitPrice: $GOODS_PRICE_INTAX$,
//コマースクレーターの場合 {% analytics.product.price_including_tax %}
quantity: $GOODS_COUNT$,
//コマースクレーターの場合 {% analytics.quantity %}
currency: "JPY"}
# ウィジェット用タグをテストする
# 1. PC 用サイト
- PC 用タグを商品詳細ページの BODY 閉じタグの直前に設置してください。
- ブラウザで Virtusize に対応している商品詳細ページを開き、ボタンが表示されれば動作しています。
# 2. スマホ用サイト
- スマホ用タグを商品詳細ページの BODY 閉じタグの直前に設置してください。
- Virtusize に対応している商品詳細ページを開き、ボタンが表示されれば動作しています。
以上