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

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 コードを埋め込んでください。

1ページに複数商品があり各商品でサイズレコメンドを表示する場合、各ボタンの表示箇所に下記のコードを埋め込んでください。data-vs-product-idの値には各商品の固有の ID を設定します。

  • 例(パラメーターの値は一例です。実装に際しては必ず御社でお使いの ID をお使いください。)
<div data-vs-product-id="product-id-1234"></div>

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

  • 1ページに複数商品があり各商品でサイズレコメンドを表示する場合、vs-product-idvs-product-image-urlinputタグの設定は不要です。
no id name 内容
1 vs-user-id 御社がユーザーの識別に使われているユーザー固有のIDを設定してください。データ利用、保護の観点より「メールアドレス"以外"の固有IDの設定」もしくは「ハッシュ化したメールアドレス」どちらかでの送信を推奨しております。
2 vs-product-id 商品ページの URL に含まれる、その商品固有の ID を設定してください。
3 vs-product-version 商品のバージョンを設定ください。商品を更新された場合、こちらの値もあわせて更新いただけると Virtusize サーバー内の商品情報が自動更新されます。 例)掲載時のタイムスタンプ:202202162028
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="商品バージョン" />
<input
  type="hidden"
  id="vs-product-image-url"
  value="https://via.placeholder.com/400x400.jpg"
/>
  • Google Analyticsについて複数トラッカーを利用する場合、以下のinputタグにトラッカーの名前またはトラッカーのIDを指定してください。指定されていない場合、最初に見つかったトラッカーを利用することになります。
no id name 内容
1 vs-ga-tracker トラッカーの名前またはトラッカーのID
// 選択肢 1 (トラッカーの名前を指定する)
<input type="hidden" id="vs-ga-tracker" value="gtm1" />

// 選択肢 2 (トラッカーのIDを指定する)
<input type="hidden" id="vs-ga-tracker" value="UA-000000-1" />

# 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 をご共有ください。