Why does the Heatmap screenshot not show the fully rendered page (pictures or content missing)?

The screenshot for a Heatmap is taken when the page is officially loaded according to the browser. In some cases, the browser may consider the page fully loaded and rendered before all components are actually loaded. For example, when you lazy load certain images or other resources for a faster page load time. This means the load event triggered by the browser is not reliable and you need to manually tell Matomo (Piwik) when the site is considered loaded to see a fully rendered screenshot in the Heatmap. To do this, follow these steps:

Note: With release of plugin version 5.1.0, you can now manually capture the snapshot for your page when its ready. Check out this FAQ to learn more.

1) Disable Heatmap & Session Recording in your tracking code (as early as possible eg when calling “setSiteId” etc):

_paq.push(['HeatmapSessionRecording::disable']);

2) Enable Heatmap & Session Recording as soon as the page is considered fully rendered within your code:

_paq.push(['HeatmapSessionRecording::enable']); 

Please note that when you manually disable the Heatmap & Session Recording, then Matomo will only start recording the session when you have re-enabled it (once the page was fully loaded). As a result, any interaction that occurred before the page was fully loaded will not be recorded. In general, we recommend to try and make your pages load faster so that your visitors have a better user experience and you do not experience this issue as much.

An alternative method to capturing a correctly rendered heatmap sample is to delete the existing heatmap sample and, with the page fully loaded in your browser, copy your Matomo tracking code and paste it in your browser’s developer tools console, press enter to execute the tracking code. This should result in the collection of a fresh heatmap sample.