# 商品詳細ページにバーチャサイズタグを実装する
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 コードを埋め込んでください。
<div class="vs-placeholder-frr"></div>
キッズを表示させたい位置に、下記の HTML コードを埋め込んでください。
<div class="vs-placeholder-kids"></div>
各ボタンを複数表示させる場合、複数箇所に HTML コードを埋め込んでください。
1ページに複数商品があり各商品でサイズレコメンドを表示する場合、各ボタンの表示箇所に下記のコードを埋め込んでください。data-vs-product-id
の値には各商品の固有の ID を設定します。
- 例(パラメーターの値は一例です。実装に際しては必ず御社でお使いの ID をお使いください。)
<div data-vs-product-id="product-id-1234"></div>
# 2. 4つのinput
タグにそれぞれ御社ですでにお使いのパラメーターを割り当ててください。
- 1ページに複数商品があり各商品でサイズレコメンドを表示する場合、
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 をご共有ください。