商品詳細ページにバーチャサイズタグを実装する

HTML コードとバーチャサイズタグを入れることで、全ての最新のバーチャサイズサービスをご利用いただけます。 実装には2つのステップがあります。 ステージング環境への実装と、本番環境への実装です。 もしステージング環境が存在しない場合、本番環境への実装のみ行なってください。

動作環境

  • PC でのブラウザ: Microsoft Edge、Safari、Chrome、Firefox、Opera
  • スマートフォン: iOS 7.0.4 以上, Android 4.4.4 以上

実装作業を始められる前に

バーチャサイズの御社ご担当者に「API キー」と「ストア名」をお訊ねください。

1. まずバーチャサイズの御社ご担当者に、バーチャサイズタグの表示位置・デザイン・文言などをご相談ください。

おすすめサイズボタンを表示させたい位置に、下記の HTML コードを埋め込んでください。

<div class="vs-placeholder-inpage"></div>

おすすめサイズボタン・ミニを表示させたい位置に、下記の HTML コードを埋め込んでください。

<div class="vs-placeholder-inpage-mini"></div>

スマートテーブル を表示させたい位置に、下記の HTML コードを埋め込んでください。

<div class="vs-placeholder-smart-table"></div>

各ボタンを複数表示させる場合、複数箇所に HTML コードを埋め込んでください。

2. 4つのinputタグにそれぞれ御社ですでにお使いのパラメーターを割り当ててください。

no id name 内容
1 vs-user-id 御社がユーザーの識別に使われているユーザー固有のメールアドレスです。メールアドレスがない場合、ユーザー固有の ID を設定してください。
2 vs-product-id 商品ページの URL に含まれる、その商品固有の ID を設定してください。
3 vs-product-version 商品のバージョンです。これは通常、プロダクトのリリース日を割り当てます。もし不明な場合はこれを1にしてください。
4 vs-product-image-url .jpg.png といった商品画像の URL です。これはバーチャサイズのプラットフォーム内で表示される画像になります。
  • 例(各パラメーターの値は一例です。実装に際しては必ず御社でお使いの値をお使いください。)
<input type="hidden" id="vs-product-id" value="product-id-1234" />
<input type="hidden" id="vs-user-id" value="example@virtusize.com" />
<input type="hidden" id="vs-product-version" value="1" />
<input
  type="hidden"
  id="vs-product-image-url"
  value="https://via.placeholder.com/400x400.jpg"
/>

3. スクリプトコードの実装

設置用 Script は、共通スクリプトに各環境用の変数を設定することで簡単に実装可能です。下記のスクリプトを<body />タグのクロージングタグの前に入れてください。その後、下記スクリプト内のYOUR_STORE_NAMEYOUR_ENVIRONMENTYOUR_DEVICE_TYPEを下記の表に従って正しい値を入れてください。


 
 
 








<script type="text/javascript">
var vsStoreName = 'YOUR_STORE_NAME';
var vsEnv = "YOUR_ENVIRONMENT";
var vsDeviceType = 'YOUR_DEVICE_TYPE';

(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>
value 内容
YOUR_STORE_NAME バーチャサイズの御社担当者から共有されたストア名を設定してください。
YOUR_ENVIRONMENT stagingまたはproduction、どちらかの環境設定を指定してください。
YOUR_DEVICE_TYPE タグを入れるページが PC からのアクセスを想定されている場合はdesktop、スマホからアクセスされる想定の場合はmobileを設定してください。レスポンシブサイトの場合、ここはdesktopに設定してください。

4. 確認作業

ここまでの実装を完了されましたら、バーチャサイズの御社担当者に URL をご共有ください。