Virtusize Guide

# Order confirmation page integration for Google Tag Manager

To integrate order confirmation page on Google Tag Manager, client can either use VS new compare view or Harajuku version. This integration can be done at any point such as beginning of the VS service or middle of the service.

With help of enabling order integration, your customers will benefit comparing items based on their purchase history.

# Before you start

Please contact your sales representative to receive an API Key.

# Things to note

Please make sure that your workplace on Google Tag Manager is enabled as ecommerce service where data layer value is available for fetching.

# 1. Create custom JavaScript type (user-defined) variables

To create order data, multiple dynamic data need to be passed. To fulfill that, you need to create variables which used in below order data object.

# Generate random user ID

In order to distinguish whether current user is logged in or not, please create a custom JavaScript type variable which defines user status. In this case, we assume you have userStatus variable in GTM which tells user status.

# 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 }}
}

# Product items object

Product items object is passed to orderObject and it is a required field to be sent. This object can be created by selecting custom Javascript type variables in GTM workspace.

Example product item object would be look like below:

In order to fetch purchase data, use existing ecommerce.purchase object. (This is built-n variable)

// 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
}

Please keep note that items should be an array of objects. Below showing an example of items. (Since this value can be fetched from GTM's built-in ecommerce purchase object, make sure to check whether data type is array of objects)

// 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. Create a tag which runs order object script

A tag name can be Virtusize-order-confirmation. In order to trigger Virtusize order script to run correctly, it is required to create a new tag as Custom HTML type with <script> section.

# Create an object for order data

An order object consists of 1 order object and several item objects (to account for orders with multiple item purchases).

  • An order object requires the following:
Parameter Name Data Structure Example Notes
orderId String "A00001" The Order ID issued.
userId String "UserId" UserID is converted to MD5, SHA-, etc. Please make sure that the UserID set on the product information page is the same. ※1
region String "JP" A country code is set for each region i.e. ISO-3166.
items Array of Objects (see table below) each item of the array is an item object corresponding to each product purchased in the order. (e.g. if a user purchases 2 shirts and 1 pair of pants, the items array will have 3 item objects)

※1 If a user makes a purchase without logging in, please set guest_{random_value} as the value for the userId parameter as described in section 1.

  • Each item object requires the following:
Parameter Name Data Structure Example Notes
productId String "A00001" Product ID. Please make sure this is the same Product ID set on the product page.
size String "S", "M", etc. Size string. Please make sure this is the same size selected from the product page.
imageUrl String "http://example.com/coat.jpg" imageURL of the item. The image that will be shared with Virtusize. The image must be the same as the one that was set from the product page
currency String "JPY" Currency Code
url String "http://example.com/coat.html" URL of the product page. Please make sure this is a URL that users can access.
unitPrice Float Please input integers such as 1234123. Characters are not supported Please list product prices without sales tax.
quantity Integer Please input integers such as 1 or 5. Characters are not supported Number of items purchased

The following item object parameters are optional but highly recommended:

Parameter Name Data Structure Example Notes
variantId String "A00001-001-002" An ID that is set on Product SKU, Color, Size, etc.
color String "Red", etc. Product Color
gender String "W", "Womens", etc. Gender

If your workspace already enabled ecommerce then purchase items value should be accessible via DLV - ecommerce.purchaseor similar built-in values defined by GTM ecommerce.

Sample orderObject product item object would look like below: Assuming all required variables are set up on Google Tag Manager.

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

}

# Create VS global variables

After successfully creating order object, please define VS global variables in order to run the script.

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. Send the created object

After successfully creating the object, a complete HTML tag would look like below.

<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"; // "com" is used for staging and production. The only exception is that if your store is located in Japan, Korea or China, in production, the value is respectively "jp", "kr" or "com.cn" (the staging version is still "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>

# Firing the triggers

This tag must be triggered on purchase or new transaction success event. Because only after user successfully purchased the items, it should run this script and send user purchased information.

In order to set triggers, please add custom triggers to your GTM workplace and select triggers by their names.

# 4. Test the Order Confirmation Page Integration

Note: Before conducting the test on product page, try running the workspace as debug/preview mode on Google Tag Manager which gives option to trigger the events and to check the custom variable values.

In order to test the Order Confirmation Page tag, please conduct the test below:

  1. Using a *compatible browser, purchase an item without making a comparison using Virtusize.
  2. Using a *compatible browser, purchase an item after making a comparison using Virtusize.
  3. Contact your sales representative with the orderId and productId of the purchases made above.
  4. Verify the attribution of Virtusize with the sales representative.

*compatible browser: Please clear your Cookies and Local Storage before testing

← StyleBank Data Crawler →