# Product page Integration
Adding an HTML snippet and Virtusize tag allows you to get complete utilization of all updated Virtusize products.
# Dependencies
- Desktop: Modern browsers such as Microsoft Edge, Safari, Chrome, Firefox, Opera
- Mobile: iOS 7.0.4+, Android 4.4.4+
# Before you start
Please contact your sales representative to receive an API Key
and Store Name
.
# 1. Please consult with your sales representative to choose the optimal positioning of the Virtusize tags.
# If you are integrating Virtusize inpage application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-inpage"></div>
# If you are integrating Virtusize inpage mini application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-inpage-mini"></div>
# If you are integrating Virtusize smart table application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-smart-table"></div>
# If you are integrating Virtusize fitting room recommend application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-frr"></div>
# If you are integrating Virtusize kids application, please add a placeholder tag where you want it to appear:
<div class="vs-placeholder-kids"></div>
You can add multiple inpages, inpage minis or smart tables by adding more placeholder tags.
# Adding multiple inpage applications on one page, each one showing a recommended size for a different product:
Please add a placeholder tag where you want the application to appear for each of the products. Inside the data-vs-product-id
attribute please add a product ID for the product it corresponds to.
<div data-vs-product-id="product-id-1234"></div>
# 2. Please include 4 input
tags with the following parameters respectively.
- If you want to use multiple inpage applications on one page, each one showing a recommended size for a different product, you don't need to add
vs-product-id
andvs-product-image-url
tags.
no | id name | explanation |
---|---|---|
1 | vs-user-id | Is set when the user logs in to your website. It is converted into MD5, SHA-1, etc. beforehand. |
2 | vs-product-id | Product ID |
3 | vs-product-version | The version of the product. This is usually set as the date of the product’s release. If unknown, please set this as 1 . If the product version changes, product information will be automatically reparsed. |
4 | vs-product-image-url | A .jpg or .png image url for the product. This will be the primary image used for the product in the Virtusize sizing platform |
- example
<input type="hidden" id="vs-product-id" value="product-id-1234" />
<input type="hidden" id="vs-user-id" value="user-id-1234" />
<input type="hidden" id="vs-product-version" value="1" />
<input
type="hidden"
id="vs-product-image-url"
value="https://via.placeholder.com/400x400.jpg"
/>
- If you use multiple trackers for your Google Analytics, please provide us the tracker name or tracker ID that you want us to use in order to send a google analytic event. If no tracker information is provided, we will use the first tracker we found.
Include the following input tag with the following parameters.
no | id name | explanation |
---|---|---|
1 | vs-ga-tracker | Either a tracker name or a tracker ID |
- example
// Option 1 (set tracker name)
<input type="hidden" id="vs-ga-tracker" value="gtm1" />
// Option 2 (set tracker ID)
<input type="hidden" id="vs-ga-tracker" value="UA-000000-1" />
# 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 just before closing the <body />
tag and replace YOUR_STORE_NAME
, YOUR_ENVIRONMENT
, and YOUR_DEVICE_TYPE
with the correct values according to the table below:
<script type="text/javascript">
var vsStoreName = "YOUR_STORE_NAME";
var vsEnv = "YOUR_ENVIRONMENT";
var vsDeviceType = "YOUR_DEVICE_TYPE";
(function(d) {
var s = d.createElement("script"); s.type = "text/javascript"; s.charset="utf-8"; s.async = true;
s.src = ("https:" == d.location.protocol ? "https://" : "http://") + "integration.virtusize.com/" + vsEnv + "/" + vsStoreName + "/" + vsDeviceType + ".source.js";
var s1 = d.getElementsByTagName("script")[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>
value | explanation |
---|---|
YOUR_STORE_NAME | this is the Store Name that you received from your sales representative |
YOUR_ENVIRONMENT | this can be either staging or production depending on what environment you are integrating on. |
YOUR_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 |
# 4. Verification
After you are finished with the integration, please share the URL with your sales representative.