# 従来のfutureshopに実装する

こちらの資料は古いバージョンのFutureShopをお使いの場合のページになります。コマースクリエイターをご利用の場合はこちらを参照ください。

# 導入の流れ

実装にはAPI キーとストア名が必要となるため、担当者にお問い合わせください。

# Future Shop で任意タグを登録する

Future Shop の 管理画面から、構築メニュー ⟶ プロモーション管理 ⟶ 任意測定タグ設定 ⟶ 任意測定タグ新規登録を選択。

サンプル

「各ページの出力設定を有効にする」にチェックを付けて、タグ名をVS-TAGに設定。

サンプル

# 商品詳細ページ内に`<input>` タグと javascript を出力する

出力設定は「 <body>タグ内に出力する」と設定。

sample

<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>タグ内に出力する」と設定。 sample

出力内容にサンプルの 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 に対応している商品詳細ページを開き、ボタンが表示されれば動作しています。

以上

← コマースクリエイターをお使いのfutureshopに実装する Shopify →