# 購入完了ページにバーチャサイズタグを実装する
商品ページと同様に、購入完了ページにもバーチャサイズタグを実装してください。このタグは下記のために必要です。
# ・ユーザーが購入したアイテムをバーチャサイズクローゼットに登録
# ・クローゼットに購入商品が登録されることでユーザーが商品を比較することができるようにになる
購入完了ページを商品詳細ページより先に本番環境まで実装すると、その時点から購入履歴が記録されていきます。これによって、御社のユーザーがバーチャサイズのサービス開始直後から商品を比較できるようになります。
# 実装前
バーチャサイズの御社ご担当者に「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)}.${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; // これは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. 購入完了ページの実装確認テスト
購入完了ページのタグの実装確認テストの手順は下記です。
*キャッシュを初期化したブラウザ
でバーチャサイズのウィジェットでサイズを比較せずに購入する*キャッシュを初期化したブラウザ
でバーチャサイズのウィジェットでサイズを比較してから購入する- 上記 2 点の
orderId
、productId
、サイズ情報をバーチャサイズの御社担当者へ連絡する - 結果に問題がないかバーチャサイズの御社担当者からのフィードバックを確認する
*キャッシュを初期化したブラウザ
: テスト前にクッキーとローカルストレージ情報を消去してください