# Google Tag Manager(GTM)を用いて購入完了ページにバーチャサイズタグを実装する

注文確認ページにGTMを用いてバーチャサイズタグを実装する方法をご説明いたします。 タグの導入はバーチャサイズサービスの利用開始前であっても、利用中であっても行うことができます。

注文された商品の情報を連携していただくことによって、ユーザーは購入履歴に基づいてアイテムを比較することができます。

# 始める前に

弊社担当からお伝えしたAPIキーをご用意ください

# ご注意点

GTMのワークプレイスがecommerceサービスとして登録されていることをご確認ください。 これは、データレイヤバリューを取得可能にするために必要です。

# 1. ユーザー定義カスタムJavaScript変数の作成

注文された商品を送信するために、複数のダイナミックデータを引き渡す必要があります。 それを満たすために、下記の注文データオブジェクトのための変数を定義する必要があります。

# ランダムなユーザーIDを生成します

現在のユーザーがログインしているかどうかを区別するには、ユーザー ステータスを定義するカスタム JavaScript 型変数を作成してください。 この場合、GTMにユーザー ステータスを示すuserStatus変数があると仮定します。

# 例 Sample custom Javascript function to generate random user ID
// name:  CJS - Virtusize - userId
function getUserId() {
 if ({{DLV - userStatus === "guest"}})  {
  return "guest_" +
  Math.random()
    .toString(36)
    .substring(2, 15) +
  Math.random()
    .toString(36)
    .substring(2, 15);
 }
 return {{DLV - userId }}
}

# アイテムオブジェクト

アイテムオブジェクトはorderObjectに渡され、送信される必須フィールドです。 このオブジェクトは、GTM ワークスペースでカスタム Javascript タイプの変数を選択することで作成できます。

アイテムオブジェクトの例は次のようになります。

購入データを取得するには、既存の ecommerce.purchase オブジェクトを使用します。 (これはビルトイン変数です)

// name: CJS - Virtusize - orderItems

function getProductItems() {
  var productItems = []
  for (var i = 0; i < {{DLV - ecommerce.purchase.products}}.length; i++) {
      var 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
      productItems.push(item)
  }
  return productItems
}

items はオブジェクトの配列でなければならないことに注意してください。 以下にアイテムの一例を示します。 (この値はGTMの組み込みのecommerce購入オブジェクトから取得できるため、データ型がオブジェクトの配列であるかどうかを確認してください)

// 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. 注文オブジェクト スクリプトを実行するタグを作成する

タグ名はVirtusize-order-confirmationでも構いません。 Virtusize 注文スクリプトを正しく実行するには、<script> セクションを持つ Custom HTML タイプとして新しいタグを作成する必要があります。

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

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

  • 注文オブジェクトには下記情報が必須です。
パラメーター名 データ型 備考
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", など 商品の色を設定してください。
gender String "W", "Womens", など 商品の対象の性別を設定してください。

ワークスペースですでにecommerceが有効になっている場合、購入アイテムの値は、DLV - ecommerce.purchaseまたは GTM ecommerceで定義された同様の組み込み値を介してアクセスできる必要があります。

サンプルのorderObject商品アイテム オブジェクトは次のようになります。必要なすべての変数がGTMで設定されていると仮定します。

var orderObject = {
  orderId: {{DLV - ecommerce.purchase.actionField.id}}, // built-in var
  userId: {{CJS - Virtusize - userId}}, // in step 1, we've created this variable
  region: {{DLV - storeCountryCode}} // or "JP",
  items: {{CJS - Virtusize - orderItems}} // in step 1, we've created this variable

}

# VS グローバル変数を作成する

注文オブジェクトを正常に作成したら、スクリプトを実行するために VSグローバル変数を定義してください。

window.vsEnv = "staging"; // can be "staging" or "production"
window.vsDomain = "com"; // can be "jp" or "kr" or "com" depending on the region of your store
window.vsApiKey = "API_KEY"; // this is the api key from the "before you start" instruction
window.vsOrderObject = orderObject; // this is the order object created in step 1

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

上記手順で作成されたタグは最終的に下記の様になります。

<script>
    var orderObject = {
      orderId: {{DLV - ecommerce.purchase.actionField.id}},
      userId: {{CJS - Virtusize - userId}},
      region: {{DLV - storeCountryCode}},
      items: {{CJS - Virtusize - orderItems}}
    }

  window.vsEnv = "production"; // can be "staging" or "production"
  window.vsDomain = "com"; // can be "jp" or "kr" or "com" depending on the region of your store
  window.vsApiKey = "API_KEY"; // this is the api key from the "before you start" instruction
  window.vsOrderObject = orderObject; // this is the order object created in step 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);
</script>

# トリガーを起動する

このタグは、購入または新しいトランザクションの成功イベントでトリガーする必要があります。 ユーザーがアイテムを正常に購入した後でのみ、このスクリプトを実行してユーザーの購入情報を送信する必要があるためです。

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

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

注: 製品ページでテストを実施する前に、GTMでワークスペースをデバッグ/プレビューモードで実行してみてください。これによりイベントをトリガーしカスタム変数の値を確認するオプションが提供されます。

注文確認ページのタグを次の手順でテストしてください。

  1. *互換性のあるブラウザを使用して、Virtusize上で比較をせずに商品を購入します。
  2. *互換性のあるブラウザを使用して、Virtusize上で比較をして商品を購入します。
  3. 上記で行った購入のorderIdproductIdをVirtusize営業担当者にご連絡ください。
  4. Virtusize営業担当者にご連絡ください。正しく連携出来ているかどうかご確認いたします。

*互換性のあるブラウザ: テストの前にCookieとローカル ストレージをクリアしてください