Try It For Free

Articles in this section

See more

Troubleshooting FAQs for Heatmaps

Common questions, tips, and help with troubleshooting Heatmaps:

Broken & Retaking Screenshots

Tracking Visitors

Managing Collected Data

Why can't I see the red "camera" button to re-take my screenshot?

If you're attempting to use the in-app screenshot Retaker tool, but you don't see the button to capture the new screenshot, there are a few possible causes:

  • The Hotjar Tracking Code is no longer loading on the target page.

    This could happen because the Tracking Code was removed from the page. This can sometimes occur during a redesign of your site.

    Solution: Check out the How to Verify Hotjar is Installed guide to make sure your Tracking Code is present. Once reinstalled, you should start seeing the red "camera" button

  • The Tracking Code is being blocked by browser plug-ins or extensions

    Some examples of browser extensions that can prevent the Retaker from working are AdBlock and Ghostery.

    Solution: Disable any browser extensions or use a Chrome Incognito browser to see if that solves the issue. Once extensions are disabled, the red "camera" button should appear.

  • The Tracking Code is being blocked by your browser's security settings.

    Try using another browser to confirm if the issue is browser-related. If you are able to use the retake tool in another browser, this means something is preventing the button from showing in your normal browser.

    Solution: Configure your browser to allow "third-party scripts", to prevent it from blocking Hotjar. Guides to finding your browser settings to enable/disable "third-party scripts" are available for Safari, Firefox, and Chrome.

Back to top

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

Documents mentioned in the video: Hotjar IPs and How to Retake a Heatmap Screenshot

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.

There are a number of things which could cause this. Here are the known reasons why sites may block Hotjar from accessing CSS:

  • Blocking access based on geolocation, or your site only allows certain IPs to access assets
  • Blocking based on domain/referrer
  • Blocking based on User-Agent
  • Blocking based on lack of cookie/sessionStorage

Solution: To fix this for all future Heatmaps, most issues with User-Agent, referrer, and IP blocking can be addressed by:

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.

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

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 screenshot is taken.

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

You will see this error if:

  • You are using a Custom Screenshot URL under advanced settings

    Solution: Edit your Heatmap to review the Custom Screenshot URL entered. The biggest culprit we have is typos, like using 'http' for a site that starts with 'https'. This is option is best used when you are targeting a range of Heatmaps and want to use a specific screenshot for the Heatmap.

  • Something went wrong during the screenshot creation process

    Solution: Try retaking the screenshot with our Heatmap Retake Tool.

    If these solutions do not fix the problem, contact our support team so we can investigate the situation.

Back to top

Why does my Heatmap only show my homepage?

Documents mentioned in the video: Page Targeting for Heatmaps 

Solution: 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 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.

Feel free to use our feature request tool to upvote this feature to be worked on by our Hotjar team. 

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.

Solution: This can be fixed by setting a maximum value your height calculation (this can be a value you choose, up to 1200). 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, either the Desktop site is not set to be shown starting at 1280px or some 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

Solution: It is best 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 by your web developer, 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 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.

Solution: 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

What if my Heatmap isn't tracking any visitors?

Documents mentioned in the video: Page Targeting for Heatmaps

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

  • Is the Hotjar Tracking Code loading on the page you are targeting?

    Some platforms do not automatically install the Tracking Code on all of your domain's pages. Check out our Advanced Tracking Code Troubleshooting Guide to make sure your code is installed throughout your entire site.

  • Are there any security limitations that would prevent Hotjar from receiving data? 

    In some cases, you may need to whitelist Hotjar's IPs and user agents while in some others it may require adjusting your Content Security Policy. It is best to reach out to your web development to make the changes needed for Hotjar to work on your site.

  • Does the targeting match the same URL your visitors see on their address bar?

    A good test is to visit the same page in an incognito session and note if there are any URL redirections or differences between what you see and the targeting you have set. A screenshot will not capture visitors or clicks if the page targeting does not match the URL your visitors land on. 

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 behavior.

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:

  • Dynamic HTML attributes or interactions with other scripts on your site

    Solution: To check to see if Dynamic HTML attributes are the issues, head to the link above for troubleshooting. Your web developer can then work on changing or removing the dynamic attributes from your code.

  • 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.

    Solution: It is important to reach out to your web development team to see if they can remove or fix even-blocking scripts on your site.

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 data seem to be skewed by a large percentage of click/scroll data in an unexpected area?

If you encounter a large percentage of your Heatmap's total clicks happening in one random area of the page, this could be due to bot traffic or automated sessions.

While Hotjar has measures in place to prevent bot traffic from being picked up in your Heatmaps, they do sometimes slip through. Automated sessions are more difficult to prevent because they often look like a legitimate user. Automated sessions are usually caused by monitoring tools. These tools are designed to "visit" your pages throughout the day, to ensure they are still online and responsive.

Solution: If you suspect this might be the cause of the behavior, check with your IT or network team, to see if any monitoring services are running on your site. Examples of these services are Amazon CloudWatch Synthetics and Dynatrace Synthetic Monitoring.

If these services use specific IP ranges, you can block their IPs from your collected data.

Back to top

How long will it take for my Heatmap snapshot to finish?

The time it takes to complete a snapshot depends on a few different factors:

  • Site traffic: If you're targeting a page that gets a lot of traffic, your snapshot will complete faster than if you were targeting a page that gets a smaller number of visits per day.
  • Sampling rate: Depending on your Hotjar plan's limits, it's possible that your site is being sampled. Sampling occurs when Hotjar is only able to track a percentage of your total visitors. This could cause a snapshot of high-traffic pages to take longer than expected to complete. Learn more
  • Snapshot size: Hotjar snapshots will run until they are completed and do not reset automatically based on a time period. Because of this, if you configure your snapshot to collect data based on a large number of pageviews, but your page only gets a few visitors per day, it might take longer than expected to complete the snapshot.

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.

If Firefox and Safari are no working, reach out to our support team for further troubleshooting.

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.