# 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
タイプとして新しいタグを作成する必要があります。
# 注文データのオブジェクトを作成する
注文データは1つの注文オブジェクト
と複数のアイテムオブジェクト
で構成されています。(複数点の商品を注文しているデータのためです)
注文オブジェクト
には下記情報が必須です。
パラメーター名 | データ型 | 例 | 備考 |
---|---|---|---|
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とローカル ストレージをクリアしてください