If your website implements scroll to reveal, elements loaded dynamically, or your Heatmap screenshots being taken too early, there are a few different ways in which you can delay the screenshot
You can manually delay the Heatmap by adding a snippet to the end of the URL and taking a custom screenshot to ensure a user does not trigger the Heatmap.
Follow these steps for each page you want the Heatmap delayed for:
It's important you don't skip any of these steps
- Create a Heatmap like you normally would, adding your targeting URL
- Under "Advanced Options", you will set a custom screenshot URL.
- You'll put the same URL that you put at the top of the page here, except you'll add: ?hjDelay=10000 (so, if you were doing http://www.example.com/ your custom screenshot URL would be http://www.example.com/?hjDelay=10000 )
If your URL already contains query strings
If your URL already contains query strings (for example http://www.example.com/mypage/?category=mycategory&option=1 ) you can append the hjDelay value as an additional query string, so your custom screenshot URL would be http://www.example.com/mypage/?category=mycategory&option=1&hjDelay=10000
- Create the Heatmap.
- Wait 5 minutes.
- Then visit the custom screenshot URL you created on your computer. You'll have 10 seconds after the site begins loading to scroll to the bottom of the page and make sure all content is visible.
- Repeat step 6 again for mobile and tablet (the easiest way to do this would be through the DevTools in Chrome)
Using Chrome Developer tools you can also check to see when a screenshot is taken, seeing requests similar to the below indicate the screenshot was taken!