Heatmap plugin not rendering page correctly

Hey guys,

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.

Kind regards,

Bernard Street

Hi,

could you maybe send us the URL of the website you want to track to contact at innocraft.com then we can have a look? That would be great.

Hey Thomas,

Thank you very much. URL is https://www.magmapool.de. Did you want me to send this info directly to Innocraft as well?

Also I noticed the Matomo Forum login with Google is missing the correct OAuth URL when I tried logging in with it just now and isn’t working.

Thanks again,

Bernard

Thanks, not needed to send it directly to Innocraft. We will have a look ASAP and update you here.

I will forward this to the colleagues. Thank you very much for pointing this out

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.

Hey Thomas,

Thank you for your prompt response. I’ve forwarded it on and I’ll wait to hear back. Once it’s in the CSS I’ll test again. :slight_smile:

Cheers, have a great day.

Bernard

Hey Thomas,

All working. Thank you!!! :slight_smile:

Have a great day.

Kind regards,

Bernard

Awesome Bernard. Thanks for letting us know and enjoy it :slight_smile:

Hey Thomas,

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.

example pages used in Heatmaps:
https://www.magmapool.de/projektphasen

Would you be able to pass onto Innocraft to troubleshoot for me.

I’ve attached an example image below:

Thanks in advance,

Bernard

bump

Hey guys, should I start a new thread for this one?

Hi Bernard,

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 :slight_smile: 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?

.piwikHeatmap .project-phases-container-image {
	opacity: 1 !important;
}
.piwikHeatmap .project-phases-section:not(.image-section) .left-inner-container, .project-phases-section:not(.image-section) .normal-inner-container {
	opacity: 1 !important;
}

.piwikHeatmap .project-phases-inner-container-left {
	width: 0 !important;
}

.piwikHeatmap .project-phases-section:not(.image-section):after {
    width: 40px;
    height: 40px;
    border-color: #fff;
    border-style: solid;
    border-width: 5pt;
    transition: height .2s ease-out, width .2s ease-out, border-width .4s ease-out;
    transition-delay: .3s;
}

In case you are using the latest version of Heatmap & Session Recording, you can also replace .piwikHeatmap with .matomoHeatmap.

or add something linke
div {
height: min(100vh, 500px);
}

Hi @derhaeuptling.de ,

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().