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:
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.
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.
To solve this issue, add an attribute to the parent element which contains these elements with dynamic IDs and/or classes.
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.
<div id="best-sellers"> <div id="item-4264"> <!-- Article title + Description --> </div> <div id="item-7764"> <!-- Article title + Description --> </div> <div id="item-3531"> <!-- Article title + Description --> </div> </div>
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.
Adding the attribute mentioned earlier will fix the problem:
<div id="best-sellers" data-hj-ignore-attributes> <div id="item-4264"> <!-- Article title + Description --> </div> <div id="item-7764"> <!-- Article title + Description --> </div> <div id="item-3531"> <!-- Article title + Description --> </div> </div>
By adding the 'data-hj-ignore-attributes' attribute, Hotjar will ignore any classes and/or IDs the element and all its children have and just rely on their tag to track usage.