Troubleshooting:Heatmaps

'''This is a troubleshooting guide specifically for Heatmaps. For general ClickTale troubleshooting, please see Troubleshooting.'''

Why is my Heatmap misaligned?
This can happen on occasion, if the body tag on your page has "position:relative" defined in CSS (either in an inline style attribute for the tag or through an embedded or external style sheet). To fix this:

Change:

To:

Alternatively you could add the following to your HTML page (after the body element loads):

Please note this should not result in any changes to how your website looks.

If none of the above solutions work for you, or you have any other questions, please see our forum post regarding this topic.

Why is my webpage not being displayed correctly in the Heatmap?
This might happen sometimes in cases in which the base tag: is located below the links to your CSS files.

Placing the base tag above the links to the CSS files should solve this problem.

Another possible reason is that the CSS file itself is unavailable or changed.

ClickTale only caches the HTML of your page, leaving all images, CSS files and JavaScript files as external references. As a result, updating the CSS in a non-backward-compatible manner will cause some recordings to break.

It is advised to keep the old CSS files unchanged and give the new CSS file a different name (For example: stylev2.css or similar).

Fixing page height in Aggregated Reports
You may have CSS rules that force the HTML and BODY to fill 100% of the browser window (which is not the default behavior).

This is done by setting the ‘height’ of these elements to ‘100%’ – which works fine for the session player, but breaks Aggregated Reports.

A Quick Fix for this is to add the following snippet to the end of the live page (just before the closing tag):

This snippet will only run inside Aggregated Reports, setting the height of the page to 800px (average desktop screen height).