Common questions, tips and help with troubleshooting Heatmaps:
- What if my Heatmap isn't tracking any visitors?
- What if my Heatmap is tracking visitors, but not all of them?
- Why is my Heatmap showing all white/black or missing elements?
- Why am I seeing a "We weren't able to capture a screenshot" message?
- Why is my Heatmap screenshot only showing HTML and no CSS?
- Why does the Heatmap screenshot only include the top part of my site?
- Why does my Heatmap screenshot show my old site after I've updated my design?
- Why aren't clicks being recorded?
- Is my Scroll Heatmap accurate if my page varies in length?
- Why does my Heatmap screenshot look cut off/the wrong size?
- Why does the Heatmap screenshot of my Desktop site have mobile elements in it?
- Why does my Heatmap only show my homepage?
- Why can't I download my Heatmap?
What if my Heatmap isn't tracking any visitors?
Documents mentioned in 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. An Advanced Tracking Code Troubleshooting Guide is also available.
- 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.
- 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.
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.
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.
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.
Why is my Heatmap screenshot only showing HTML and no CSS?
Documents mentioned in 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.
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.
Taking a look at your Cross Origin Request (CORs) settings would be helpful in this case as well, especially if you are seeing the same issue within your Recordings, particularly around fonts/icons appearing as boxes.
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.
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.
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
- The URL that is being targeted has more than one Heatmap targeting it. One of the Heatmaps will need to be turned off in order for data to start properly collecting.
- 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 returnfalse, which triggers this sameevent.stopPropagation();behavior.
Removing or fixing dynamic attributes and event-blocking scripts on your site will allow Hotjar to collect the mouse click data correctly.
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.
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;
}
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.
Why does my Heatmap only show my homepage?
Documents mentioned in video: Page Targeting for Heatmaps
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
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.
Still having trouble fixing your Heatmap?
Reach out to our support team below so we can help you!