# Order Confirmation Page (OCP) integration for Google Tag Manager (GTM)

This page will guide you through integrating Virtusize on the Order Confirmation Page (OCP) of your website using Google Tag Manager (GTM), which requires 4 steps:

1. Create an order object

This step will explain how to create the order object before sending it to us.

2. Create a custom triggers

This step will explain you how to add a custom triggers to your GTM workplace .

3. Integrating the Virtusize script

This script is necessary for calling our central application responsible for sending the orders.

4. Verification

This step is necessary for us to verify the Virtusize script and the orders inside our database on our end.

On the Order Confirmation Page for GTM, please add a script that enables Virtusize to show your customers the items they have recently purchased as part of their Purchase History and use those items to compare with new items they want to buy.

If you would like, you can integrate the Order Confirmation Page script for GTM before integrating the Product Detail Page (PDP) script for GTM. This way, your customers will benefit as soon as you integrate Virtusize on your product pages, as their purchase history from previous purchases will already be in place.

# Before you start

Please contact your sales representative to receive an API Key and Store Name. Also, ensure that your workplace on Google Tag Manager is set up with Ecommerce enabled. This enables access to the built-in variable ecommerce, containing purchase data, as well as Data Layer Value (DLV), which refers to specific values stored within the data layer of a web page for fetching user-related data.

# 1. Create an order object

An order object consists of one 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.
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`)

Each item object requires the following:

Parameter Name	Data Structure	Example	Notes
productId	String	"P00001"	Product ID. Please ensure that this is the same Product ID set on the Product Detail Page.
size	String	"S", "M", etc.	Size string. Please ensure that this is the same Size set on the Product Detail Page.
imageUrl	String	"https://example.com/coat.jpg"	Image URL of the item. The image that will be shared with Virtusize. Please provide the absolute path.
currency	String	"JPY"	Currency Code
url	String	"https://example.com/coat.html"	URL of the Product Detail Page. Please ensure that this is a URL that users can access.
unitPrice	Float	Please input integers such as 1234123. Characters are not supported	Please list product prices excluding sales tax.
quantity	Integer	Please input integers such as 1 or 5. Characters are not supported	Number of items purchased
variantId	String	"A00001-001-002"	An ID that is set on Product SKU, Color, Size, etc.
color	String	"Red", etc.	Product Color

The following item object parameters are optional but highly recommended:

Parameter Name	Data Structure	Example	Notes
gender	String	"W", "Womens", etc.	Gender

// Example
const orderObject = {
  orderId: "A00001",
  items: [
    {
      productId: "P00001",
      size:      "L",
      variantId: "P001_SIZEL_RED",
      url:       "https://example.com/products/P001",
      imageUrl: "https://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
  ]
}

# Create a Product items object

To construct items as described above, you can create a function named buildOrderItems to generate an array of product items that you will then assign to orderObject. Values for each item can be set using DLV and ecommerce variables.

// name: CJS - Virtusize - orderItems

function buildOrderItems() {
  const orderItems = []

  for (let i = 0; i < {{DLV - ecommerce.purchase.products}}.length; i++) {
      let 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
      orderItems.push(item)
  }

  return orderItems
}

# Create an Order object

Create the order object using values located in DLV and the reference name CJS - Virtusize - orderItems used to execute the buildOrderItems function.

// Example
const orderObject = {
  orderId: {{DLV - ecommerce.purchase.actionField.id}},
  items: {{CJS - Virtusize - orderItems}}
}

# 2. Create a custom triggers

Please create a new tag name (e.g virtusize-order-confirmation-page) as Custom HTML type with a <script> section.

This tag should only be triggered on the purchase or new transaction success event. It should run this script and send user purchase information only after the user has successfully completed a purchase.

To set up triggers, please add custom triggers to your GTM workplace and select triggers based on their names.

# 3. Integrating the Virtusize script

The script can be easily integrated by setting variables for each environment in the script. Please place the following script inside the <script> tag and replace STORE_NAME, ENVIRONMENT, DEVICE_TYPE, USER_ID, ORDER_OBJECT with the correct values.

const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "USER_ID",
  orderObject: "ORDER_OBJECT",
  page: "ocp"
};

(function() {
  window.vs = !window.hasOwnProperty("vs")
    ? vsObject
    : Object.assign(window.vs, vsObject);

  const { storeName, env, deviceType } = vsObject;
  const script = document.createElement("script");
  const firstScript = document.getElementsByTagName("script")[0];
  const protocol = document.location.protocol ? 'https' : 'http'

  Object.assign(script, {
    async: true,
    src: `${protocol}://integration.virtusize.com/${env}/${storeName}/${deviceType}.source.js`,
  });

  firstScript.parentNode.insertBefore(script, firstScript);
})();

value	explanation
STORE_NAME	This is the `Store Name` that you received from your sales representative.
ENVIRONMENT	This can be either `staging` or `production` depending on what environment you are integrating on.
DEVICE_TYPE	This can be either `desktop` or `mobile` depending on the device type the page is being accessed from. If your site is responsive (you serve the same resource to both desktop and mobile devices), please set this as `desktop`.
USER_ID	- Set empty string (`''`) when the user is not logged in. - Set the user's ID (using a hash function such as MD5, SHA-1, etc...) when the user is logged in.
ORDER_OBJECT	This is the order object created in step 1

# 4. Verification

After completing the integration, please clear your cache, cookies, and local storage before following the steps below :

Purchase an item without making a comparison using Virtusize.
Purchase an item after making a comparison using Virtusize.
Contact your sales representative with the orderId and productId of the purchases made above.
Verify the attribution of Virtusize with the sales representative.

← Product Detail Page (PDP) integration for Google Tag Manager (GTM) StyleBank Data Crawler →