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

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

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

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

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

実装前

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

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

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

• 注文オブジェクトには下記情報が必須です。

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

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

userId = `guest_${Math.random().toString(36).substring(2, 15)}.${new Date().getTime().toString(36)}`

• それぞれのitem objectは下記のように設定してください

パラメーター名	データ型	例	備考
productId	String	"A00001"	商品 ID です。必ず商品詳細ページに設定した商品IDと同じものにしてください。このIDが異なると、Virtusize経由で購入された製品か判別出来なくなります。
size	String	"S" や "M"など	サイズの名称です。ここで指定するサイズ名称は、商品詳細ページに記載されているサイズ名称の表記と同じになるように設定してください。
imageUrl	String	"http://example.com/coat.jpg"	商品画像の URL です。この画像がバーチャサイズのサービスに登録されます。ここで指定する商品画像URLは、商品詳細ページに掲載されている商品画像URLと同じになるように設定してください。
currency	String	"JPY"	通貨コードです。
url	String	"http://example.com/coat.html"	商品詳細ページの URL です。ユーザーがアクセス可能な URL で設定してください。
unitPrice	Float	1234123 などの数字を設定してください。文字列の入力は不可です。	税抜きの価格を設定してください。
quantity	Integer	1 や 5 などの数値を設定してください。文字列の入力は不可です。	商品の購入数を設定してください。

※以下のitem objectパラメータは任意ですが、強く推奨されています。

パラメーター名	データ型	例	備考
variantId	String	"A00001-001-002"	商品の SKU、色、サイズなどの情報を設定してください。
color	String	"Red", etc.	商品の色を設定してください。
gender	String	"W", "Womens", etc.	商品の対象の性別を設定してください。

// 例
var orderObject = {
  // 注文オブジェクト
  orderId: "xxx",
  userId: "xxx",
  region: "xxx",
  // アイテムの配列
  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"
    }
    ...// 注文で購入された各アイテムに対してオブジェクトを作成してください。
  ]
}

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

上記のオブジェクトを作成いただいたのち、下記のスクリプトを実装して、オブジェクトをVirtusizeに送る処理を追加してください。

なお、検証環境・開発環境（window.vsEnv = "staging" の環境）では、値に "com" を設定してください。本番環境（window.vsEnv = "production" の環境）では、ECサイトを展開している国・地域に応じて値（日本＝"jp"、韓国＝"kr"、中国＝"com.cn"、それ以外="com"）を設定してください。

window.vsEnv = "staging"; // ここでは環境情報を設定します。"staging"または"production"のいずれかを設定してください。
window.vsDomain = "com" //★注意★ 検証環境・開発環境（window.vsEnv = "staging" の環境）では、値に "com" を設定してください。本番環境（window.vsEnv = "production" の環境）では、ECサイトを展開している国・地域に応じて値（日本＝"jp"、韓国＝"kr"、中国＝"com.cn"、それ以外="com"）を設定してください。
window.vsApiKey = "API_KEY"; // これは"実装前"でバーチャサイズの御社担当からお伝えしたAPIキーです。
window.vsOrderObject = orderObject; // これは１で作成した注文オブジェクトです。

(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 点のorderId、productId、サイズ情報をバーチャサイズの御社担当者へ連絡する
4. 結果に問題がないかバーチャサイズの御社担当者からのフィードバックを確認する

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