Virtusize ガイド

# 商品詳細ページ (PDP) の統合

このページでは、ウェブサイトの商品詳細ページ (PDP) に Virtusize を実装する手順を 3 つのステップで説明します。

1. プレースホルダータグの追加

現在、6 種類のウィジェットボタンをサポートしています：

  • Inpage Standard
  • Inpage Minimal
  • Smart Table
  • Fitting Room Recommend
  • Fitting Room Discovery
  • Kids

このウィジェットはページのどこにでも配置できます。プレースホルダータグを使用して配置を指定することをお勧めします。プレースホルダータグを追加することで、今後ボタン位置を変更されたい場合、クライアント様にてプレースホルダータグを移動していただくことで Virtusize ウィジェットを壊すことなく自由に変更できます。

2. Virtusize スクリプトの統合

このスクリプトは、ウィジェットを表示するために必要な中央アプリケーションを呼び出すためのものです。

3. 検証

# 始める前に

Virtusize担当者に、APIキーとStore Nameをお尋ねください

# 1. プレースホルダータグの追加

Virtusizeの表示位置については、事前にVirtusize担当者とすり合わせします。

Virtusize Inpage Standard ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：

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

Virtusize Inpage Minimal ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：

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

Virtusize Smart Table (ST) ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：

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

Virtusize Fitting Room Recommend (FRR) ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：

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

Virtusize Fitting Room Discovery (FRD) ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：

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

Virtusize Kids ウィジェットを実装する場合は、表示させたい場所にプレースホルダータグを追加してください：

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

Inpage Standard、Inpage Minimal、Smart Table、FRR、Kids の複数のウィジェットを追加する場合は、複数のプレースホルダータグを追加することが可能です。

# 2. Virtusize スクリプトの統合

スクリプトは、スクリプト内の各環境に変数を設定することで簡単に統合できます。次のスクリプトを <body /> タグの閉じる直前に配置し、STORE_NAME、ENVIRONMENT、DEVICE_TYPE、USER_ID、PRODUCT_ID、PRODUCT_VERSION を正しい値に置き換えてください。

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  product: { id: "PRODUCT_ID" version: "PRODUCT_VERSION" },
  page: "pdp"
};

(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などのハッシュ関数を使用して）設定します。
PRODUCT_ID 商品ID。必ず商品詳細ページに設定した商品IDと同じものにしてください。このIDが異なると、Virtusize経由で購入された製品か判別出来なくなります。
PRODUCT_VERSION 商品のバージョンを設定ください。商品情報が更新された際にこちらの値も同時に更新更新されると、 Virtusize サーバー内の商品情報が自動更新され、Virtusizeに変更が反映されます。　例）掲載時のタイムスタンプ：202202162028

# 3. 検証

統合が完了したら、商品詳細ページのURLをVirtusize担当者に共有してください。

← 購入完了ページ（OCP）の実装 →