Try It For Free

Articles in this section

See more

Troubleshooting FAQs for Heatmaps

Common questions, tips and help with troubleshooting Heatmaps:

What if my Heatmap isn't tracking any visitors?

If a Heatmap you created has not tracked any visitors when you believe it should have, there are a few things to check:

Back to top

What if my Heatmap is tracking visitors, but not all of them?

Tools such as Google Analytics may report more visits than your Heatmap report. This can be for various reasons, but is a predicted behavoir.

Back to top

Why is my Heatmap showing all white/black or missing elements?

If you have a page in which the content is dynamically revealed either by scrolling, hovering or if you have configured your images to load on a delay to increase your site's loading speed, you may find that your screenshot looks incomplete.

In most of these cases, the easiest way to fix this is by retaking your screenshot.

It is also possible to delay your screenshot so it is only taken when the page is fully loaded by following our Delaying a Heatmap Screenshot guide.

Back to top

Why am I seeing a "We weren't able to capture a screenshot." message?

When you create a new Heatmap, the first thing that Hotjar does is wait for a visitor to visit a page on your site that you have targeted. When this happens, the HTML the visitor loads is sent to our servers and a screen shot is taken.

When a screenshot isn't captured correctly, the following error is reported:

As the reasons this happens may vary, contact us so we can investigate the situation thoroughly.

Back to top

Why is my Heatmap screenshot only showing HTML and no CSS? 

Hotjar servers need access to the assets on your site to generate Heatmaps successfully. When the CSS looks broken, this typically means our servers have difficulty fetching some of the CSS files from your server.

It is suggested that our wildcard domain, *.hotjar.com, is whitelisted within your server as well as the Hotjar IPs in order to display the CSS within Heatmaps. Any Heatmaps created after whitelisting should display the CSS correctly.

Back to top

Why does the Heatmap screenshot only include the top part of my site?

This might be happening for two reasons:

  • Your page does not scroll on the document element.
  • Your page uses a scroll-lock to scroll the page.

These types of pages are not supported and listed on our Heatmap Limitations. For Heatmap screenshots to show in full, Hotjar needs to know how big the document is. In both of these cases, Hotjar cannot know this, so it only takes a screenshot of what your page renders on load.

Back to top

Why does my Heatmap screenshot show my old site after I've updated my design?

Since our Heatmap screenshots are designed to remain the same so that you can revise your old designs and compare them with​​ newer ones, you may not see them updated if you change any design elements in your site.

Our recommendation here would be to duplicate your Heatmap instead:


This way, you will have snapshots of your past designs as well.

Back to top

Why aren't clicks being recorded?

When Heatmaps are being generated for your pages but no click data is being collected, this is often due either:

  • "Overlapping" elements on the actual elements you are trying to capture clicks on. Excluding these "overlapping" elements will solve this problem.
  • Dynamic HTML attributes or interactions with other scripts on your site
  • event handlers behavior
    • If you do not see any click events recorded, either for an entire site, page or particular element, this is often because event handlers added by other scripts are capturing and blocking propagation of events, preventing the Hotjar script from receiving them. To record click data, the Hotjar script needs to be able to receive mouse-down events.
    • Common sources of this problem are event handlers which use event.stopPropagation(); or jQuery event handlers which return false, which triggers this same event.stopPropagation(); behavior.

Removing or fixing dynamic attributes and event-blocking scripts on your site will allow Hotjar to collect the mouse click data correctly.

Back to top

Is my Scroll Heatmap accurate if my page varies in length?

The point a user reaches on the page by scrolling is recorded as a Percentage ([total number of visitors]/[maximum depth scrolled to on your page]). This means it's not an exact distance in pixels or otherwise, but an average of depth.

On a shorter page, visitors will hit a higher percentage with less actual scrolling, and potentially a lower average in longer pages. When Hotjar generates the Scroll Heatmap and processes all the maximum depths scrolled, we end up with an average that will be applied to the Heatmap.

The Heatmap should be a good proportional representation, even in pages of varying lengths.

Back to top

Why does my Heatmap screenshot look cut off/the wrong size?

Your page has some elements given 100% of the browser height which is being set using JavaScript. Hotjar takes page screenshots in a single large window, these types of elements keep enlarging as much as they can, rendering incorrectly.

This is easily fixed by setting a maximum value your height calculation (this can be a value you choose, up to 1200px—as long as there is a limit it will fix the problem).


viewportHeight = (viewportHeight > 1200) ? 1200 : viewportHeight;
// - or - //
if (viewportHeight > 1200) {
viewportHeight = 1200;
}

Back to top

Why does the Heatmap screenshot of my Desktop site have mobile elements in it?

In some rare cases, you might encounter an issue where the screenshots of your Desktop site Hotjar takes has elements from the mobile site, such as the navigation menu. This could also be the other way round, like Desktop elements on the mobile screenshot.

The reason why the screenshot was taken is incorrect is because, in your CSS, certain elements are probably hidden/shown using @media queries similar to these:

@media (min-device-width: 768px) and (max-device-width: 1024px) {
/* CSS RULES IN HERE */
}

min-device-width and max-device-width are not recognized by all browsers. To fix the problem, you need to replace them with min-width and max-width.

@media (min-width: 768px) and (max-width: 1024px) {
/* CSS RULES IN HERE */ 
}

The difference between the two can be found in this article:
http://www.menucool.com/3613/max-device-width-vs-max-width-Which-one-should-I-use

Generally, using min-width and max-width for all media queries is the best option since it achieves what you want on a broader range of browsers/scenarios, especially on a desktop.

Once this change is done, you will need to start a new Heatmap snapshot for Hotjar to take a new screenshot of the page.

Back to top

Why does my Heatmap only show my homepage? 

In order to track all pages within your site using Heatmaps, you would need to create multiple Heatmaps.

Using the targeting rules "simple" and "exact" are ideal for targeting one page at a time. While targeting rules such as "contains", "starts with" "ends with" and "regular expressions" are for targeting multiple pages that share the same template (for example, product pages or blog posts). With "triggers" you can trigger the Heatmap when a user takes a certain action like clicking a button.

You can find more information about that here: Page Targeting Explained for Heatmaps

Back to top

Why can't I download my Heatmap?  

Hotjar is currently having issues when it comes to downloading very long Heatmaps within Chrome. If you are getting a "failed-network" error, try downloading your Heatmap in a Firefox or Safari browser.

 

Back to top

Still having trouble fixing your Heatmap? 

Reach out to our support team below so we can help you!

Related articles

Still need help?

Get help with common questions or reach out to our support team.


Webinars

Just getting started? Watch one of our pre-recorded weekly webinars, walking you through how to use Hotjar.