Virtusize Guide

# Product Detail Page (PDP) integration for Google Tag Manager (GTM)

This page will guide you through integrating Virtusize on the Product Detail Page (PDP) of your website using Google Tag Manager (GTM), which requires 5 steps:

1. Create a Custom HTML Tag

2. Adding the placeholders

We currently support six types of widgets:

  • Inpage Standard
  • Inpage Minimal
  • Smart Table
  • Fitting Room Recommend
  • Fitting Room Discovery
  • Kids

This widget can be placed anywhere on your page, but it is recommended to specify the placement using placeholders. Adding placeholders will allow you to freely change the design of your page without worrying about breaking Virtusize widgets in the future.

3. Inserting Virtusize values

This step allows you to define custom variables where you can set the values required for Virtusize to work properly.

4. Integrating the Virtusize script

This script is necessary for calling our central application responsible for displaying our widgets.

5. Verification

# Before you start

Please contact your sales representative to receive an API Key and Store Name.

# 1. Create a Custom HTML Tag

To create a custom HTML Tag select Add a new Tag from your workspace.

sample

Click on Tag Configuration and select Custom HTML as the tag type.

sample

# 2. Adding the placeholders

Please consult with your sales representative to determine the optimal positioning of the Virtusize tags.

If you are integrating the Virtusize Inpage Standard widget, please use the following JavaScript code by replacing inpage-target-div with the target element where you want to place the Inpage Standard widget:

<script>
  document.querySelector("inpage-target-div").innerHTML = '<div id="vs-placeholder-inpage"></div>';
</script>

If you are integrating the Virtusize Inpage Minimal widget, please use the following JavaScript code by replacing inpage-mini-target-div with the target element where you want to place the Inpage Minimal widget:

<script>
  document.querySelector("inpage-mini-target-div").innerHTML = '<div id="vs-placeholder-inpage-mini"></div>';
</script>

If you are integrating the Virtusize Smart Table (ST) widget, please use the following JavaScript code by replacing smart-table-target-div with the target element where you want to place the Smart Table widget:

<script>
  document.querySelector("smart-table-target-div").innerHTML = '<div id="vs-placeholder-smart-table"></div>';
</script>

If you are integrating the Virtusize Fitting Room Recommend (FRR) widget, please use the following JavaScript code by replacing frr-target-div with the target element where you want to place the Fitting Room Recommend widget:

<script>
  document.querySelector("frr-target-div").innerHTML = '<div id="vs-placeholder-frr"></div>';
</script>

If you are integrating the Virtusize Fitting Room Discovery (FRD) widget, please use the following JavaScript code by replacing frd-target-div with the target element where you want to place the Fitting Room Discovery widget:

<script>
  document.querySelector("frd-target-div").innerHTML = '<div id="vs-placeholder-frd"></div>';
</script>

If you are integrating the Virtusize Kids widget, please use the following JavaScript code by replacing kids-target-div with the target element where you want to place the Kids widget:

<script>
  document.querySelector("kids-target-div").innerHTML = '<div id="vs-placeholder-kids"></div>';
</script>

Once you've finished. Choose a trigger for when the tag should fire. For example, select "All Product Pages" or a specific page.

# 3. Inserting Virtusize values

There are default variables from GTM that can be used on Virtusize integration. If the variable needed is not available, you can create a new custom variable by clicking on the variables menu and selecting New from the User-Defined Variables section.

sample

  1. Choose Data Layer Variable as the variable type.
  2. Give the variable a name (e.g., vs-product-id).
  3. In the Data Layer Variable Name field, enter the name of the data layer key that holds the value you want to capture. In this case, we are fetching the id of the product under the ecommerce object. (e.g., ecommerce.detail.products.0.id).
  4. Save the variable.

sample

# 4. Integrating the Virtusize script

Inside the custom HTML you can now setup the variables. You can use the default ones provided by GTM or make a new variable to fetch other data required. In the example below, vs-user-id, vs-product-id and vs-product-version variables was created and used inside the custom html.

<script type="text/javascript">
const vsObject = {
  storeName: "STORE_NAME",
  env: "ENVIRONMENT",
  deviceType: "DEVICE_TYPE",
  userId: "{{vs-user-id}}",
  product: { id: "{{vs-product-id}}" version: "{{vs-product-version}}" },
  page: "pdp"
};

(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);
})();
</script>
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.
vs-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.
vs-product-id The product ID.
vs-product-version The version of the product should typically be set as the date of the product’s release (YYYYMMDD). If the version is unknown, please set this as 1. If the product version changes, the product information will be automatically reparsed.

Once you've finished. Choose a trigger for when the tag should fire. For example, select "All Product Pages" or a specific page.

For this example, we want to trigger the script just for specific pages sample

# 5. Verification

After completing the integration, please share the Product Detail Page URL with your sales representative.

To do so, find the version you would like to share by clicking on More Actions and selecting Share Preview.

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