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

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

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

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

2. Virtusize スクリプトの統合

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

3. 検証

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

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

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

# 始める前に

Virtusize担当者に、APIキーと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_NAME、ENVIRONMENT、DEVICE_TYPE、USER_ID、ORDER_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とローカルストレージ情報をクリアした後に,以下テストにご協力いただけますと幸いでございます。以下の通りテストを実施してください：

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

← 商品詳細ページ (PDP) の統合 Google Tag Managerを用いた商品詳細ページへの実装 →