Product page integration for Google Tag Manager

Adding an HTML snippet and Virtusize tag allows you to use all updated Virtusize products.

Before you start

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

Adding placeholder tags via GTM

1. Create a Custom HTML Tag

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

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

2. Insert the tags on product pages via javascript.

For this example, we select the div with the class name of target-div to append the placeholder tags. Placeholder ID could be vs-placeholder-inpage, vs-placeholder-inpage-mini, vs-placeholder-smart-table, depending on what product you are using

• example

<script>
  var vsPlaceholderInpage = document.createElement("div"); //creates the placeholder element
  vsPlaceholderInpage.id = "vs-placeholder-inpage"; //placeholder ID
  var vsPlaceholderTarget = document.querySelector(".target-div") //target element on where to place the vs widgets
  vsPlaceholderTarget.appendChild(vsPlaceholderInpage) // appends the widget to target element
</script>

3. Choose a trigger for when the tag should fire. For example, select "All Product Pages".

Inserting vs-values

1. Create variables

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.

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.

2. Create custom HTML to insert the variables

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, customer-id, vs-product-id and vs-product-image-url variable was created and used inside the custom html.

• example

<input type="hidden" id="vs-product-id" value="{{vs-product-id}}" />
<input type="hidden" id="vs-user-id" value="{{customer-id}}" />
<input type="hidden" id="vs-product-version" value="1" />
<input
  type="hidden"
  id="vs-product-image-url"
  value="{{vs-product-image-url}}"
/>

<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.jp/' + vsEnv + '/' + vsStoreName + '/' + vsDeviceType + '.source.js';
var s1 = d.getElementsByTagName('script')[0]; s1.parentNode.insertBefore(s, s1);
})(document);
</script>

no	id name	explanation
1	vs-user-id	Customer ID from GTM.
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

• 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. 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

4. Verification

After you are finished with the integration, please share the URL with your sales representative. Find the version you would like to share, click More Actions and select Share Preview.