We are trying to use the HeatmapSessionRecording plugin to capture heatmaps of one of our sites. However we get incomplete screenshots.
Digging a bit deeper we realized that we can manually capture screenshots by adding _paq.push(['HeatmapSessionRecording::captureInitialDom', {heatmapId}]) when the last block loads.
Now for our purposes since all components are lazy loaded its impossible to find our when the last component loads so we added the event on click so that we can control how long we can wait before triggering the screenshot. Even then it captured incomplete screenshot.
What do you mean by incomplete screenshots? Lately I’ve been noticing that my screenshots on the Heatmap for the HeatmapSessionRecording plug in takes a screenshot and the whole page isn’t in view. It like the header and footer are jammed together and misses a bunch of the page . Wondering if that’s what you’re seeing or if it’s something else.
Hello @Prithviraj_Chaudhuri Since this issue is related to premium plugin, please reached out to us at shop@matomo.org so we can check on this further.
I had the same issue. I don’t know if it was something with my firewall, but I’ve created some new heatmaps of the same thing that was recording incorrectly and for some reason the new ones appear correct. I don’t know if you found a reason why it was happening but thought I’d let you know that when I created new ones they seemed to work.
Old thread but I ran into this post on google when I had a similar issue.
The symptom most often is the headless renderer treating your viewport as basically zero height. The DOM is fine, the elements just resolve to 0px tall, so the screenshot collapses in on itself.
Anything sized in vh or svh is the usual culprit. Matomo adds a .matomoHsr class to <html> while it’s capturing, so you can scope a reset to only that context and leave your real styles alone:
.matomoHsr * { min-height: 0 !important; }
Then put explicit pixel min-height on whatever wrappers actually need to be tall. Don’t drop the .matomoHsr scope or your real site will go weird.
The other thing I keep seeing is lazy-loaded images. captureInitialDom doesn’t wait for IntersectionObserver, and the renderer never scrolls, so JS-driven lazy loading never triggers. Native loading="lazy" on <img> is fine though, so if you’ve got a JS observer handling image loading, switch to the native attribute.
If you’d rather not touch CSS at all, I built a small free and open source Chrome extension that patches this stuff before capture runs, its call “Matomo Heatmap Helper” by Martez