Future Shopに実装する

導入の流れ

1. ストア名とAPIキーを取得する

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

2. Future Shop で任意タグを登録する
1.Future Shop の 管理画面から、構築メニュープロモーション管理任意測定タグ設定任意測定タグ新規登録

サンプル

2. 新規タグ名を "VS-TAG" にする。「各ページの出力設定を有効にする」をチエックする。

サンプル

3. VS-TAG を編集、商品詳細ページ内に<input> タグとjavascriptを出力する
1. 出力設定は「 <body>タグ内に出力する 」と設定。

sample

2. <input> タグ作成
no id名 説明
1 vs-user-id ユーザーID 。$MEMBER_ID$ を設定する。
検証方法: jQuery("#vs-user-id").val() で値が返ればOK(ユーザーログインの場合のみ)。
2 vs-product-id 商品の品番。{店舗KEY}_$GOODS_URL$ を設定する。
検証方法: jQuery("#vs-product-id").val() で値が返ればOK。
3. サンプルのjavascriptをコピーして、出力する。

ストア名は、担当者からお知らせする値に書き換えてください。

  • PC用

 
 
 








<script type="text/javascript">
var vsStoreName = '{ストア名}';
var vsEnv = 'staging';
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://') + 'd2m7rhdanvg09z.cloudfront.net/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
  • Mobile用

 
 
 








<script type="text/javascript">
var vsStoreName = '{ストア名}';
var vsEnv = 'staging';
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://') + 'd2m7rhdanvg09z.cloudfront.net/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
4. VS-TAG を編集、注文完了ページ内に javascript を 出力する

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

1.出力内容
<script type="text/javascript">
var vsEnv = "production";

!(function(a,d,g,b){var c,h,e,f;a.Virtusize=b;a[b]=a[b]||[];a[b].env=null!=a.vsEnv?a.vsEnv:"production";a[b].url=null!=a.vsUrl?a.vsUrl:a.location.host;a.vsEnv=void 0;a.vsUrl=void 0;a[b].methods="setApiKey setRegion setLanguage setWidgetOverlayColor addWidget ready setMobile on setAvailableSizes setSizeAliases addOrder addFindByFit setUserId".split(" ");a[b].factory=function(c){return function(){var d;d=Array.prototype.slice.call(arguments);d.unshift(c);a[b].push(d);return a[b]}};f=a[b].methods;c=0;for(h=f.length;c<h;c++)e=f[c],a[b][e]=a[b].factory(e);a[b].snippetVersion="4.0.0";c=d.createElement(g);d=d.getElementsByTagName(g)[0];c.async=1;c.src={production:"https://cdn.api.virtusize.jp/integration/v4.js",staging:"https://cdn.staging.virtusize.com/integration/v4.js",local:"//"+a[b].url+"/integration/v4.source.js"}[a[b].env];c.id="vs-integration";d.parentNode.insertBefore(c,d)})(window,document,"script","vs");


vs.setApiKey("{ストアのAPIキー}");
vs.addOrder({
  orderId: "$ORDER_ID$",
  userId:  "$MEMBER_ID$",
  region:  "JP",
  items: [$ITEM_INFO$]
});
</script>
2. 商品情報置換文字
{ productId: "{店舗KEY}_$GOODS_URL$",
size: "$GOODS_DETAIL_NO$",
variantId: "NA",
url: "http://{店舗KEY}.c04.future-shop.jp/fs/{店舗KEY}/$GOODS_URL$", 
imageUrl:  "NA",
color:     "NA",
gender:    "NA",
unitPrice: $GOODS_PRICE_INTAX$,
quantity:  $GOODS_COUNT$,
currency:  "JPY"}
5. ウィジェット用タグをテストする
1. PC用サイト
  • PC用タグを商品詳細ページのBODY閉じタグの直前に設置してください。
  • ブラウザでVirtusizeに対応している商品詳細ページを開き、ボタンが表示されれば動作しています。
2. スマホ用サイト
  • スマホ用タグを商品詳細ページのBODY閉じタグの直前に設置してください。
  • Virtusizeに対応している商品詳細ページを開き、ボタンが表示されれば動作しています。

以上