Why is my Heatmap Missing Click Data?

When Hotjar generates 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.

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

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

After the user 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.

How can I fix this and capture my missing clicks?

To solve this issue, add the following attribute to the element with dynamic IDs/classes or to any parent that contains such elements. The effects will trickle down to any descendants of this element:

data-hj-ignore-attributes

Example

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 that change throughout the day, resulting in Hotjar not managing to properly match the item containers your users 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>