# Google Tag Managerによる購入完了ページの実装

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

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

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

2. カスタムトリガーを作成する

GTMのワークスペースにカスタムトリガーを追加する方法を説明します。

3. Virtusize スクリプトの統合

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

4. 検証

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

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

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

# 始める前に

Virtusize担当者に、Store Nameをお尋ねくださいまた、Google Tag Manager で作業するワークスペースが Ecommerce 有効で設定されていることを確認してください。これにより、購入データを含む組み込み変数 ecommerce へのアクセスが可能になり、特定のユーザー関連データを取得するためにウェブページのデータレイヤーに格納される特定の値を指す Data Layer Value (DLV) にもアクセスできます。

# 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"
    }
    ...// 注文された各アイテムごとにオブジェクトを作成します
  ]
}

# アイテムオブジェクトを作成する

上記のように items を構築するには、buildOrderItems という名前の関数を作成して、注文オブジェクトに割り当てる商品アイテムの配列を生成します。各アイテムの値はDLVとecommerce変数を使用して設定できます。

// 名前: CJS - Virtusize - orderItems

function buildOrderItems() {
  const orderItems = []

  for (let i = 0; i < {{DLV - ecommerce.purchase.products}}.length; i++) {
      let item = {};
      item.productId = {{DLV - ecommerce.purchase.products}}[i].id;
      item.size = {{DLV - ecommerce.purchase.products}}[i].dimension3;
      item.imageUrl = "";
      item.currency = {{DLV - ecommerce.currencyCode}};
      item.variantId = {{DLV - ecommerce.purchase.products}}[i].dimension16;
      item.url = "";
      item.unitPrice = parseFloat({{DLV - ecommerce.purchase.products}}[i].price);
      item.quantity = parseInt({{DLV - ecommerce.purchase.products}}[i].quantity);
      item.color = {{DLV - ecommerce.purchase.products}}[i].dimension4
      item.gender = {{DLV - ecommerce.purchase.products}}[i].category
      orderItems.push(item)
  }

  return orderItems
}

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

DLVにある値と、buildOrderItems 関数を実行するために使用した参照名 CJS - Virtusize - orderItems を使用して、注文オブジェクトを作成します。

// 例
const orderObject = {
  orderId: {{DLV - ecommerce.purchase.actionField.id}},
  items: {{CJS - Virtusize - orderItems}}
}

# 2. カスタムトリガーを作成する

<script> セクションを持つ Custom HTML タイプとして、virtusize-order-confirmation-page などの新しいタグ名を作成してください。

このタグは、purchase または new transaction success イベントでのみトリガーされる必要があります。このスクリプトを実行し、ユーザーが購入を完了した後にのみ購入情報を送信する必要があります。

トリガーを設定するには、GTMワークスペースにカスタムトリガーを追加し、その名前に基づいてトリガーを選択してください。

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

スクリプトは、スクリプト内の各環境に変数を設定することで簡単に統合できます。次のスクリプトを <script> タグ内に配置し、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で作成した注文オブジェクトです。

# 4. 検証

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

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

← Google Tag Managerを用いた商品詳細ページへの実装購入履歴をインポートする →