Thanks for all the great work with Matomo. We’ve purchased some premium plugins including the Heatmap & Session recording, however the Heatmap is not loading correctly and isn’t rendering any elements on the page. As a result most of the website in the heatmap is blank except the top and side menu and a header image which is halfway down the page.
I read through the FAQ and it seems to say that it should work straight out of the box and I can’t find any way to fix this up, so I’m led to believe this is a problem with the plugin rendering the site. I read through some forums about it not reading CSS, but since it’s not really loading any elements at all I’m not sure where to go.
Could you please point me in the direction of customer support to troubleshoot this issue.
We’ve had a look and were able to reproduce this problem Bernard.
Is it possible that you add a CSS style to your website? This would be the CSS:
.piwikHsr video {
max-height: 350px;
}
We noticed the video is set to 100% height and so it does actually take the whole height of the browser window. I’m not 100% sure why it isn’t doing this on your website though.
Please let us know if that works for you / whether you can make this change.
Thanks for your help in fixing the previous issue. I appear to be having another rendering problem with the heatmaps very similar issue to the first where above the fold loads but as soon as it gets to the fold it stretches out like it’s being pulled into a black hole.
we looked into this and were able to reproduce it. The thing is, for heatmaps we basically take the screenshot as soon as the page is loaded. However, the invisible content is only shown once the user starts scrolling down. By then the screenshot is already taken. There is a solution to this though if you can add some CSS to your website again Basically, this solution forces those content elements to be shown directly when viewing the heatmap.
Can you try adding the following CSS to your website?
Aim here is to set a max-height to the element which is having issue, but when you use the min() property, it will apply the smaller of the both. Maybe you can try max().