# 購入完了ページ(OCP)の実装

このページでは、ウェブサイトの購入完了ページ (OCP) に Virtusize を実装する手順を 3 つのステップで説明します。

1. 注文オブジェクトを作成する

注文オブジェクトを作成する方法を説明します。

2. Virtusize スクリプトの統合

注文を送信するために必要な中央アプリケーションを呼び出すためのスクリプトです。

3. 検証

購入完了ページタグが正しく実装されているかを確認します。


購入完了ページでは、購入履歴 の一部として、顧客が最近購入したアイテムを表示し、これらのアイテムを使用して新しい購入希望アイテムと比較できるようにするスクリプトを追加してください。

商品詳細ページ (PDP) スクリプトを実装する前に、購入完了ページスクリプトを実装することもできます。この方法では、商品ページに Virtusize を実装した瞬間から、以前の購入履歴がすでに存在しているため、顧客にメリットがあります。


# 始める前に

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

# 1. 注文オブジェクトを作成する

注文オブジェクトは1つの注文オブジェクトと複数のアイテムオブジェクトで構成されます(複数のアイテム購入を伴う注文に対応しているためです)。

  • 注文オブジェクト には次の要素が必要です:
パラメーター名 データ構造 備考
orderId String "A00001" 購入に際して発行された注文 ID
items オブジェクトの配列 (下記の表を参照) 配列内の各アイテムは、注文で購入された各商品の アイテムオブジェクト です。(例: ユーザーがシャツを2枚とパンツを1枚購入した場合、items 配列には3つの アイテムオブジェクト が含まれます)
  • アイテムオブジェクトには次のものが必要です:
パラメータ名 データ構造 注意事項
productId 文字列(String) "A00001" 商品ID。必ず商品詳細ページに設定した商品IDと同じものにしてください。このIDが異なると、Virtusize経由で購入された製品か判別出来なくなります。
size 文字列(String) "S", "M", など サイズの名称です。ここで指定するサイズ名称は、商品詳細ページに記載されているサイズ名称の表記と同じになるように設定してください。
imageUrl 文字列(String) "http://example.com/coat.jpg" 商品画像の URLです。この画像がバーチャサイズのサービスに登録されます。ここで指定する商品画像URLは、絶対パスになるように設定してください。
currency 文字列(String) "JPY" 通貨コードです。
url 文字列(String) "http://example.com/coat.html" 商品詳細ページの URL です。ユーザーがアクセス可能な URL で設定してください。
unitPrice 浮動小数点数(Float) 1234123のような整数を入力してください。文字列の入力は不可です 消費税を含まない商品価格を記載してください。
quantity 整数(Integer) 1や5のような整数を入力してください。文字列の入力は不可です 商品の購入数を設定してください。
variantId 文字列 "A00001-001-002" 商品の SKUを設定してください。
color 文字列 "Red", など 商品の色を設定してください。

次のアイテムオブジェクトパラメータは必須ではありませんが、設定されることを強くお勧めします:

パラメータ名 データ構造 注意事項
gender 文字列 "W", "Womens", など 商品の対象の性別を設定してください。
// 例
const orderObject = {
  orderId: "A00001",
  items: [
    {
      productId: "P00001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "https://example.com/products/P001",
      imageUrl: "https://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY",
      gender: "W"
    }
    ...// 注文された各アイテムごとにオブジェクトを作成します
  ]
}

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

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

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  orderObject: "ORDER_OBJECT",
  page: "ocp"
};

(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などのハッシュ関数を使用して)設定します。
ORDER_OBJECT ステップ1で作成した注文オブジェクトです。

# 3. 検証

購入完了ページタグが正しく実装されているかを確認するため、ブラウザのCookieとローカルストレージ情報をクリアした後に,以下テストにご協力いただけますと幸いでございます。 以下の通りテストを実施してください:

  1. Virtusizeを使用せず(全く触れずに)アイテムを購入する
  2. Virtusizeを使用して(身体情報を登録し、ボディとアイテムの比較画面まで遷移して)比較した後、購入する
  3. 上記2点のorderIdproductIdをVirtusize担当者に共有いただく。
  4. 結果に問題がないかVirtusize側で確認する(場合によっては弊社にて改めてテスト購入を実施し、調査させていただく場合がございます。)