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

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

# 動作環境

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

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

バーチャサイズの御社ご担当者に「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 コードを埋め込んでください。

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

キッズを表示させたい位置に、下記の HTML コードを埋め込んでください。

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

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

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

例（パラメーターの値は一例です。実装に際しては必ず御社でお使いの ID をお使いください。）

<div data-vs-product-id="product-id-1234"></div>

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

１ページに複数商品があり各商品でサイズレコメンドを表示する場合、vs-product-idとvs-product-image-urlのinputタグの設定は不要です。

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_NAME、YOUR_ENVIRONMENTとYOUR_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 をご共有ください。

← 概要：必ずはじめにお読みください購入完了ページにバーチャサイズタグを実装する →