# トップページの統合
このページでは、ウェブサイトのトップページにVirtusizeを実装する手順を3つのステップで説明します。
1. プレースホルダータグの追加
現在、1 種類のウィジェットボタンをサポートしています：
- Fitting Room Discovery
このウィジェットはページのどこにでも配置できます。プレースホルダータグを使用して配置を指定することをお勧めします。プレースホルダータグを追加することで、今後ボタン位置を変更されたい場合、クライアント様にてプレースホルダータグを移動していただくことで Virtusize ウィジェットを壊すことなく自由に変更できます。
2. Virtusize スクリプトの統合
このスクリプトは、ウィジェットを表示するために必要な中央アプリケーションを呼び出すためのものです。
3. 検証
# 始める前に
Virtusize担当者に、Store Nameをお尋ねください
# 1. プレースホルダータグの追加
Virtusizeの表示位置については、事前にVirtusize担当者とすり合わせします。
Virtusize Fitting Room Discovery (FRD) ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：
<div class="vs-placeholder-frd"></div>
FRDの複数のウィジェットを追加する場合は、複数のプレースホルダータグを追加することが可能です。
# 2. Virtusize スクリプトの統合
スクリプトは、スクリプト内の各環境に変数を設定することで簡単に統合できます。次のスクリプトを </body> タグの閉じる直前に配置し、STORE_NAME、ENVIRONMENT、DEVICE_TYPE、USER_ID を正しい値に置き換えてください。
const vsObject = {
storeName: "STORE_NAME",
env: "ENVIRONMENT",
deviceType: "DEVICE_TYPE",
userId: "USER_ID",
page: "topPage"
};
(function() {
window.vs = !window.hasOwnProperty("vs")
? vsObject
: Object.assign(window.vs, vsObject);
const { storeName, env, deviceType } = vsObject;
const script = document.createElement("script");
const firstScript = document.getElementsByTagName("script")[0];
const protocol = document.location.protocol ? 'https' : 'http'
Object.assign(script, {
async: true,
src: `${protocol}://integration.virtusize.jp/${env}/${storeName}/${deviceType}.source.js`,
});
firstScript.parentNode.insertBefore(script, firstScript);
})();
| 値 | 説明 |
|---|---|
| STORE_NAME | これは、営業担当者から受け取った Store Name です。 |
| ENVIRONMENT | 実装している環境に応じて、staging または production のいずれかを設定します。 |
| DEVICE_TYPE | ページにアクセスしているデバイスの種類に応じて、desktop または mobile のいずれかを設定します。サイトがレスポンシブで、デスクトップとモバイルの両方のデバイスに同じリソースを提供している場合、これを desktop に設定してください。 |
| USER_ID | - ユーザーがログインしていない場合は、空の文字列 ('') を設定します。- ユーザーがログインしている場合は、ユーザーのIDを（MD5、SHA-1などのハッシュ関数を使用して）設定します。 |
# 3. 検証
統合が完了したら、トップページのURLをVirtusize担当者に共有してください。