購入完了ページにバーチャサイズタグを実装する

商品ページと同様に、購入完了ページにもバーチャサイズタグを実装してください。このタグは下記のために必要です。

・ユーザーが購入したアイテムをバーチャサイズクローゼットに登録

・クローゼットに購入商品が登録されることでユーザーが商品を比較することができるようにになる

購入完了ページを商品詳細ページより先に本番環境まで実装すると、その時点から購入履歴が記録されていきます。これによって、御社のユーザーがバーチャサイズのサービス開始直後から商品を比較できるようになります。

実装前

バーチャサイズの御社ご担当者に「API キー」をお訊ねください。

1. 注文データのオブジェクトを作成する

注文データは1つの注文オブジェクトと複数のアイテムオブジェクトで構成されています。(複数点の商品を注文しているデータのためです)

  • 注文オブジェクトには下記情報が必須です。
パラメーター名 データ型 備考
orderId String "A00001" 購入に際して発行された注文 ID
userId String "UserId" UserID を 設定してください。必ず商品詳細ページにセットしたvs-user-idと同じ値になるようにしてください。 ※1
region String "JP" ISO-3166 の国家コードを設定してください。
items Array of Objects (下記の表参照) 各アイテムの配列はそれぞれユーザーが購入した商品毎にアイテムオブジェクトに対応しています。(例:もしユーザーがシャツを2枚、パンツを1本購入した場合はアイテムの配列は3つのアイテムオブジェクトになります。)

※1 もしゲスト購入・Amazon Pay など、御社サービスのログインなしで購入された場合は必ずguest_{random_value}に設定してください。ランダムな値になっていない場合、ゲストユーザーが同一の ID となってしまうため他のユーザーの購入履歴がクローゼットに追加されてしまいます。下記はランダムな値を設定するためのコードの1例です。

userId =
  "guest_" +
  Math.random()
    .toString(36)
    .substring(2, 15) +
  Math.random()
    .toString(36)
    .substring(2, 15);
  • それぞれのitem objectは下記のように設定してください
パラメーター名 データ型 備考
productId String "A00001" 商品 ID です。必ず商品詳細ページに設定した商品IDと同じものにしてください。このIDが異なると、Virtusize経由で購入された製品か判別出来なくなります。
size String "S" や "M"など サイズの名称です。
imageUrl String "http://example.com/coat.jpg" 商品画像の URL です。この画像がバーチャサイズのサービスに登録されます。
currency String "JPY" 通貨コードです。
url String "http://example.com/coat.html" 商品詳細ページの URL です。ユーザーがアクセス可能な URL で設定してください。
unitPrice Float 1234123 などの数字を設定してください。文字列の入力は不可です。 税抜きの価格を設定してください。
quantity Integer 1 や 5 などの数値を設定してください。文字列の入力は不可です。 商品の購入数を設定してください。
variantId String "A00001-001-002" 商品の SKU、色、サイズなどの情報を設定してください。
color String "Red", etc. 商品の色を設定してください。
gender String "W", "Womens", etc. 商品の対象の性別を設定してください。

※上記のitem objectのいずれかを設定できない場合、担当者にご相談ください。

// Example
var orderObject = {
  // order object
  orderId: xxx,
  userId: xxx,
  region: xxx,
  // item objects
  items: [
    {
      productId: "P001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "http://example.com/products/P001",
      imageUrl: "http://images.example.com/products/P001/red/image1xl.jpg",
      color:     "Red",
      unitPrice: 5100,
      quantity:  1,
      currency:  "JPY",
      gender: "W"
    }
    ...// Create an object for each of the items that were purchased in the order
  ]
}

2. 作成したオブジェクトを送信する

上記のオブジェクトを作成いただいたのち、バーチャサイズに下記のスクリプトでお送りください。

window.vsEnv = "staging"; // これは"staging"または"production"の開発環境です。
window.vsDomain = "jp"; // これはサイトを展開している国です。"jp"、"kr"、"com"からお選びください。
window.vsApiKey = "{API_KEY}"; // これは"実装前"でバーチャサイズの御社担当からお伝えしたAPIキーです。
window.vsOrderObject = orderObject; // これは1で作成した注文オブジェクトです。

(function(d) {
  var s = d.createElement("script");
  s.type = "text/javascript";
  s.charset = "utf-8";
  s.async = true;
  s.src = "https://integration.virtusize.com/orders/confirmation.js";
  var s1 = d.getElementsByTagName("script")[0];
  s1.parentNode.insertBefore(s, s1);
})(document);

3. 購入完了ページの実装確認テスト

購入完了ページのタグの実装確認テストの手順は下記です。

  1. *キャッシュを初期化したブラウザでバーチャサイズのウィジェットでサイズを比較せずに購入する
  2. *キャッシュを初期化したブラウザでバーチャサイズのウィジェットでサイズを比較してから購入する
  3. 上記 2 点のorderIdproductId、サイズ情報をバーチャサイズの御社担当者へ連絡する
  4. 結果に問題がないかバーチャサイズの御社担当者からのフィードバックを確認する

*キャッシュを初期化したブラウザ: テスト前にクッキーとローカルストレージ情報を消去してください