# 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)}.${new Date().getTime().toString(36)}`
 }
 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 タイプとして新しいタグを作成する必要があります。

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

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

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

パラメーター名	データ型	例	備考
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 などの数値を設定してください。`文字列の入力は不可です。`	商品の購入数を設定してください。

次のアイテムオブジェクトパラメータは必須ではありませんが、設定されることを強くお勧めします:

パラメーター名	データ型	例	備考
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"; //★注意★ 検証環境・開発環境（window.vsEnv = "staging" の環境）では、値に "com" を設定してください。本番環境（window.vsEnv = "production" の環境）では、ECサイトを展開している国・地域に応じて値（日本＝"jp"、韓国＝"kr"、中国＝"com.cn"、それ以外="com"）を設定してください。
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"; //★注意★ 検証環境・開発環境（window.vsEnv = "staging" の環境）では、値に "com" を設定してください。本番環境（window.vsEnv = "production" の環境）では、ECサイトを展開している国・地域に応じて値（日本＝"jp"、韓国＝"kr"、中国＝"com.cn"、それ以外="com"）を設定してください。
  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でワークスペースをデバッグ/プレビューモードで実行してみてください。これによりイベントをトリガーしカスタム変数の値を確認するオプションが提供されます。

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

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

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

← Google Tag Manager(GTM)を用いて商品詳細ページ(PDP)にバーチャサイズタグを実装する購入履歴をインポートする →