Elements with Dynamic Attributes

When Hotjar is generating a Heatmap report, it first takes a screenshot of your page and then takes a copy of all the HTML elements on your page. These elements are then used so that Hotjar knows exactly where clicks have happened on your page. Whenever a visitor clicks on your page, Hotjar sends back the information about the element (including any IDs and classes in its path) back to our servers.

If your site uses dynamic IDs or class names, this could often mean Hotjar is unable to determine where a click occurred. For instance, a visitor might have clicked on this element:

<button id="button-a87dfuhd">Click!</button>

After the visitor interacted with the button, Hotjar reported that a click happened on button#button-a87dfuhd.

However, when Hotjar initially took the screenshot and took a copy of the HTML elements, that element may have had a different ID if the ID is generated dynamically.

<button id="button-pdfuhd8fu9">Click!</button>

When this happens, Hotjar won't be able to match the two elements. As a result, you will not be able to tell where the click took place.

Solution

To solve this issue, add an attribute to the parent element which contains these elements with dynamic IDs and/or classes.

data-hj-ignore-attributes

Let's see an example of how to use this. Let's assume you have a list of the top 3 best sellers on your site. The IDs of the containers for these items change according to the item ID.

In this scenario, when Hotjar would have stored a copy of your elements, it would have stored three elements which change throughout the day, resulting in Hotjar not managing to properly match the item containers your visitors click on.