Order Confirmation Page Integration

On the Order Confirmation Page, 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 before you integrate the Product Page script. This way your customers will benefit as soon as you integrate Virtusize on your product pages by having purchase history from their previous purchases already in place.

Dependencies

jQuery 1.3 or higher

Staging

Before you start

Please contact your sales representative to receive an API Key.

1. 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. Here is example code to generate a random value for the userId of a guest user:

userId = "guest_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  • 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
// 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. Send the created object

After creating the object above, please send it to Virtusize using the following script:

var vsEnv = "staging";

!(function(a,d,g,b){var c,h,e,f;a.Virtusize=b;a[b]=a[b]||[];a[b].env=null!=a.vsEnv?a.vsEnv:"staging";a[b].url=null!=a.vsUrl?a.vsUrl:a.location.host;a.vsEnv=void 0;a.vsUrl=void 0;a[b].methods="setApiKey setRegion setLanguage setWidgetOverlayColor addWidget ready setMobile on setAvailableSizes setSizeAliases addOrder addFindByFit setUserId".split(" ");a[b].factory=function(c){return function(){var d;d=Array.prototype.slice.call(arguments);d.unshift(c);a[b].push(d);return a[b]}};f=a[b].methods;c=0;for(h=f.length;c<h;c++)e=f[c],a[b][e]=a[b].factory(e);a[b].snippetVersion="4.0.0";c=d.createElement(g);d=d.getElementsByTagName(g)[0];c.async=1;c.src={production:"https://cdn.api.virtusize.com/integration/v4.js",staging:"https://cdn.staging.virtusize.com/integration/v4.js",local:"//"+a[b].url+"/integration/v4.source.js"}[a[b].env];c.id="vs-integration";d.parentNode.insertBefore(c,d)})(window,document,"script","vs");


vs.setApiKey("{received api key}"); // this is the api key from the "before you start" instruction
vs.addOrder(orderObject); // this is the order object created in step 1

3. Test the Order Confirmation Page Integration

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

Production

Before you start

Please contact your sales representative to receive an API Key.

1. 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 generate a random string starting with guest_ as the value for the userId parameter. Here is example code to generate a random value for the userId of a guest user:

userId = "guest_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
  • 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
// 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. Send the created object

After creating the object above, please send it to Virtusize using the following script:

// set production or staging
var vsEnv = "production";

!(function(a,d,g,b){var c,h,e,f;a.Virtusize=b;a[b]=a[b]||[];a[b].env=null!=a.vsEnv?a.vsEnv:"production";a[b].url=null!=a.vsUrl?a.vsUrl:a.location.host;a.vsEnv=void 0;a.vsUrl=void 0;a[b].methods="setApiKey setRegion setLanguage setWidgetOverlayColor addWidget ready setMobile on setAvailableSizes setSizeAliases addOrder addFindByFit setUserId".split(" ");a[b].factory=function(c){return function(){var d;d=Array.prototype.slice.call(arguments);d.unshift(c);a[b].push(d);return a[b]}};f=a[b].methods;c=0;for(h=f.length;c<h;c++)e=f[c],a[b][e]=a[b].factory(e);a[b].snippetVersion="4.0.0";c=d.createElement(g);d=d.getElementsByTagName(g)[0];c.async=1;c.src={production:"https://cdn.api.virtusize.com/integration/v4.js",staging:"https://cdn.staging.virtusize.com/integration/v4.js",local:"//"+a[b].url+"/integration/v4.source.js"}[a[b].env];c.id="vs-integration";d.parentNode.insertBefore(c,d)})(window,document,"script","vs");


vs.setApiKey("{received api key}"); // this is the api key from the "before you start" instruction
vs.addOrder(orderObject); // this is the order object created in step 1

3. Test the Order Confirmation Page Integration

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