Hotspots

This is where you will be mapping out every component of your product page layout, so that the data can be tracked as visitors browse your website.


In this article


How to Add a Hotspot

1. The product page will open in a new tab.

Is this your product page? If yes, proceed. Otherwise, go back to APSIS One and double-check the URL.

Web1.jpg

Let's take a look

You will get a view of your product along with our Bottom bar and the Element Picker.

In the Element Picker you will find different visual elements for you to track. Essentially, what you will be doing later is connecting these elements with the placeholders in the page.

If the Element Picker doesn't show up, please contact your Account Owner Admin User and make sure your tracking script is installed. You can also contact Support.

There are Standard visual elements, which are mandatory, but you can create custom elements if you wish.

These are the standard visual elements:

Name: where the name of the product is placed.

Category: refers to the type of product.

You can also create an element that matches one of your data tags by creating a custom element. To learn more, expand Adding Custom Elements below.

Web2.jpg

So, let's get started!


How to Place Visual Elements

1. Click on the visual element you want to place. You'll notice that its colour will change once selected.

Web3.jpg

2. Click on the object in your website that matches the element. It will be highlighted in green and the element will show the text from your website's object.

Web4.jpg

3. If you wish to remove the element, click the X on the bottom right corner of the object.

Web5.jpg

4. If you would like to track a complex area, or a combination of areas, click the arrow on the object to toggle the selection towards the next biggest trackable area.

Web6.jpg

This is particularly useful for more complex layouts where there are multiple product images, for example, or if you would like to track the entire component as a custom visual element.

5. Continue to add elements to connect your website's object.


Visual Element Settings

You can adjust the element settings to better define the data that is tracked with your Product Views activity.

1. Hover over the element you wish to modify, and click on the pencil icon.

Web8.jpg

2. The element will expand.

Web7.jpg

The name of the element will define the object from your website that Profiles clicked. So, if you want to track a label that signals when a product is on sale, an appropriate name would be "On sale". This is only for internal purposes, as the names of the elements will be shown in your Audience Profile's on their Website Interactions.

Expand the drop-down menu to change the type of element. The type reflects what type of data will be tracked by the element.


About the Types of Elements:

Text: A container for text or images. In the case of text, it must be a UTF-8 encoded text value with a 1000-character limit.

Boolean: Either the items that are mapped with this element exist on a product page or they don't. Make sure that you're using a product page in which the item to map does appear, in order to track it. For example, if you label your items as on sale, or with a 70% off sticker, you will be tracking that placeholder with a boolean element.

Number: A field to track numbers, like an alternative price, percentage, or any other numeric value.

Number w/decimals: Same as the number field, yet this one has the ability to track numbers with decimals.


Advanced Settings

Under CSS Selector, enter the part of a CSS rule in your website that selects the content you want this visual element to track.

An HTML page can be structured in different ways, and certain pages may have clusters of elements. Picking a specific element with the standard element picker may be tricky in the case that your website is structured in such way.

However, by using the CSS Selector feature in the Advanced Options, you can point to a specific part of a cluster of elements via the CSS of your page.

For example, if you have different classes for the product categories in your product pages, instead of using the Element Picker to choose the class, you may use the CSS rule to point to the place where Product Views can locate the product category in your product page.

Web9.jpg

Ready to continue?

Click Save to save your settings. Otherwise, Cancel.

Web10.jpg

Hidden Elements

As you set up your Product Views activity, you'll notice you get the choice between the standard, Visual Elements, and Hidden Elements.

While Visual Elements are useful for collecting details about the page on your website, like the name of the product the visitor was browsing, Hidden Elements allow you to collect data related to that visit that is not explicit in your website's design.

How to Add a Hidden Element

1. Click Hidden in the top menu, then click Add hidden field.

2. Enter the Name for your Hidden Element.

Expand the Type drop-down box and choose what type of Hidden Element you want to create. Choose between Text, Boolean, Number, or Number with decimal.

Click here to read more about supported data formats.

3. Expand the Source drop-down menu and choose the source of your Hidden Element.

Hidden Elements can be set up via different sources:

  • Cookies: The cookies you collect when a visitor browses your website. For example, a cookie for visitors who are logged in.

  • Local Storage: An item stored in visitors' browsers when they browse your page.

  • Meta-tags: The meta tags available in your website's code.

  • Hidden inputs: A CSS selector that is either difficult to target exactly, or hidden from the page while it's covered, or behind other elements.

  • Javascript variables: The name of a Javascript variable present in the page your visitor is in.

4. Enter the final details of your Hidden Element. For Example, if your source is Cookies, select a Cookie from the drop-down menu. The Preview field will be automatically filled with the Cookie ID.

When finished, click Add to add your Hidden Element, or Cancel to cancel without saving.


How to Add a Custom Element

1. Click Add custom field

Web11.jpg

2. A custom element will appear for you to fill in.

Web12.jpg

The name of the element will define the object from your website that Profiles clicked. So, if you want to track a label that signals when a product is on sale, an appropriate name would be "On sale". This is only for internal purposes, as the names of the elements will be shown in your Audience Profile's on their Website Interactions.

Expand the drop-down menu to change the type of element. The type reflects what type of data will be tracked by the element.

Ready to continue?

Click Add to save your settings. Otherwise, Cancel.

Web13.jpg

How to Remove a Custom Element

If you want to remove an element, hover over it and click the red X in the top right corner.

Web14.jpg

You may only remove custom elements.


Next Step

Did this answer your question?