Heatmap not rendering correctly from Webflow Page

Premium Features
1

Hi,

We are using Heatmap recording to track user behaviour and improve our website.
As we are low coding on our Website (using Webflow), I am not sure how to solve the problem. We are using for some sections the setting of viewport height of min-height = 85% vh, which works totally fine.

But as you may see, the Matomo Heatmap shows the rendering of the page fully distorted.

grafik
grafik1903×5470 166 KB

I know that I need to add some code like

.matomoHsr {
    min-height: 2000px !important;
}

.matomoHsr .page {
    min-height: 2000px !important; 
}

But I am not sure which code to enter on our website and where to put it correctly (is it inside head tag, or before body tag?) Can you help me with that?

2

Hi @chris_de
Following

you may add the class to the HTML tag…

3

Hi, unfortunately I don’t know how to apply this change in Webflow.
I have a custom class & HTML Tag for the section which is causing the distortion, but I don’t have a custom Style sheet or so in Webflow. Do you have a step by step solution what I should do? As mentioned, I only can deal with low code solutions as I am not deep down in this topic. thanks.

4

You can do something like:

<script>
  document.children[0].className += ' matomoHsr ';
</script>
5

Hi @heurteph-ei

I tried to insert your script on following seciton:

1 page inside the: Inside tag
1 page inside the: Before tag

Both solutions are not rendering correctly. Do you have any alternatives I could try?

6

Sorry, I don’t understand… Which tag are you talking about?

7

@heurteph-ei
I am building the Website in Webflow.

There I can add your script to those following sections:

grafik
grafik643×798 11.3 KB

I added it with your original script. That’s not working. Than I selected affected elements. Was also not working.

Sorry that I am not so talented.

8

Hi @chris_de
Why did you write: document.children[0].Section_Landing_become_partner+= ' matomoHsr '; instead of document.children[0].className += ' matomoHsr ';?

9

@heurteph-ei because your initial script with document.children[0].className += ' matomoHsr '; did not work, so I thought it might be related to className but this was not the case.

10

What was the symptoms?
Was there any error in the page? (check on the browser console)
Was at the end the matomoHsr class present on the <html> tag?

11

The Script is on header page, but it doesn’t do anything.

grafik

Still have the problem that the section gets fully rendered in Matomo - as it is set to 85VH (without error message) but looks very strange.

12

Thats the Rendering of the website withit

grafik
grafik536×1863 85.9 KB

13

Can you check if the class has been added to the <html> tag?

Also, I don’t see the page class in your HTML…
And also, you wanted to have “min-height = 2000px (important)”. How high is the render in the heatmap? Isn’t it at least 2000px high?

14

I am very sorry, I have no idea how I can add the page class in a webflow element. As said, I am only capabale of low coding, nearly no coding at all.

The Heatmap has an Avg. Above Fold 3503px, but as it is 85% of viewport height it is not rendering the page.

15

The role of the script I provided is precisely adding the class to the <html> tag…
Can you check on the browser DOM inspector that the class has been added to the <html> tag?

Also, I don’t really understand what you did… You write somewhere about 85vh, but on the CSS code you provided, the measures are set in pixels (min-height: 2000px !important;)

16

I have the same issue.

the problem is the iFrame, where the heatmap is rendered inside AND the vh unit.
when 85vh relates to the iFrame viewport, 85vh becomes huge!

Therefore I would say, css vh and headmap is not compatible.

Workaround:

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

17

Hi @derhaeuptling.de ,

vh is like another unit like px, Heatmap does work. The way heatmap understand and renders the web page little different than normal, hence this issue is caused, fix is to apply the styles recommended in the FAQ shared.