How does heatmaps handle side overlays


(Alex) #1

Hi,
I’m considering purchasing the heatmaps plugin. My site uses a number of overlays (like those shown here: How To Create a Side Navigation Menu).
What happens if a visitor clicks on a navigation overlay, does the heatmap represent this correctly? Or does the heatmap render the click on the element behind? (as though the side overlay had not been exposed).

Also, probably a simple question, but does visitor window size get normalized to a standard window size? If so, does that handle elements that have static dimensions vs those with dynamic?

Thanks,
Alex.


(Jason) #2

Hi Alex,

Thanks for your interest in the Heatmaps and Session recording Premium Feature. I have answered your questions below.

I’m considering purchasing the heatmaps plugin. My site uses a number of overlays (like those shown here: How To Create a Side Navigation Menu).
What happens if a visitor clicks on a navigation overlay, does the heatmap represent this correctly? Or does the heatmap render the click on the element behind? (as though the side overlay had not been exposed).

Just a bit of background on how heatmaps work. On the first visit to the target page, the contents of the DOM are sent to your Matomo instance to create the screenshot. If the nav menu is collapsed when the first visitor visit, the navigation menu will not show in the screenshot. Using the example supplied, the result of a heatmap visit can be seen below.

In this example I clicked on the nav menu and as you can see it registered this on the page behind where the nav was.

Please note that when using session recording, the nav will be visible as it was for the user at the time of the recording (you will see the nav open and close).

Also, probably a simple question, but does visitor window size get normalized to a standard window size? If so, does that handle elements that have static dimensions vs those with dynamic?

If you have a look at the image I inserted above you will see at the bottom left the setting for Heatmap width and at the top Device type. The heatmap can be viewed at multiple screen resolutions and device type. The css and media queries will be honoured in these views.

Please let me know if you have any further questions with regards to this topic or Matomo.

Thanks,