# 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 |
imageUrl | String | "http://example.com/coat.jpg" | imageURL of the item. The image that will be shared with Virtusize |
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.purchase
or 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:
- Using a
*compatible browser
, purchase an item without making a comparison using Virtusize. - Using a
*compatible browser
, purchase an item after making a comparison using Virtusize. - Contact your sales representative with the
orderId
andproductId
of the purchases made above. - Verify the attribution of Virtusize with the sales representative.
*compatible browser
: Please clear your Cookies and Local Storage before testing