Mouseflow Help & Support

Show menus and dynamic elements in heatmaps

Follow

Heatmaps are a great way to see how your users interact with elements on your website. But how do you handle elements that aren't visible on the initial pageload?

A good point in case would be dropdown-menus. The menus themselves won't be visible when you load a heatmap - so you won't be able to see how users interact with the dropdown-menu. You'll only see the interaction with the top level of the menu:

top_nav.PNG

Luckily, it's pretty easy to set up your website so that dynamic content like this can be toggled in our heatmaps. All you have to do is add a small amount of extra styling to your website - to be used only in our heatmap environment. Let's look at an example:

<ul class="main-navigation">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Products</a>
<ul class="dropdown-menu" style="display: none;">
<li><a href="clothing.html">Clothing</a></li>
<li><a href="shoes.html">Shoes</a></li>
<li><a href="hats.html">Hats</a></li>
</ul>
</li>
</ul>

This is a simple dropdown menu - part of the one shown in the image above. When you click the navigation link 'Products', a submenu will appear with the items 'Clothing', 'Shoes' and 'Hats'. However, this function is controlled by JavaScript on the original, recorded page - and that JavaScript isn't available in our heatmap environment. So the menu doesn't work in the heatmap.

To work around this, we've created a simple class you can add to any element on a recorded page: mf-heatmap-click. This class is meant to be added to the element you click/hover in order to toggle the dropdown menu. In the example above, that would be the 'Products'-link. With the class in place, it would now look like this:

<a href="#" class="dropdown-toggle mf-heatmap-click">Products</a>

If the element has this class, it will do two specific things when you click it (in our heatmaps):

  • It will add the class "mf-heatmap-clicked" to itself.
  • It will add the class "mf-heatmap-targeted" to any elements with the class "mf-heatmap-target".

This means that you can now add specific styling to certain elements in the heatmap (and in the heatmap only). In our example above, we want the <UL>-element to be shown when the Product-link is clicked. That can be achieved through a simple CSS rule:

.mf-heatmap-clicked + ul.dropdown {
display: block !important;
}

This works as the element we want to show is a sibling of the link we click. So we can target it using a '+' in the CSS selectors. The full list of posible targets includes:

  • The element itself
  • A child of the element clicked (using 'A > B')
  • Descendants of the element clicked (using 'A B')
  • Closest sibling of the element clicked (using 'A + B')
  • Following siblings of the element clicked (using 'A ~ B')

If the element we want to show isn't a sibling or descendant of the trigger, we would have to use another approach - the "mf-heatmap-target"-class. If you add this class to the element you want to show, it will receive another class in our heatmaps when the trigger is clicked: "mf-heatmap-targeted".

So we can target that class with the simplest of CSS rules, like:

.mf-heatmap-targeted {
display: block !important;
}

You can of course add this class to as many elements as you wish.

Either approach will allow us to open and close the menu directly in our heatmaps, updating the maps as it happens:

menu_open.PNG

Have more questions? Submit a request

Comments

Powered by Zendesk