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:


Dynamic heatmaps 1


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 possible 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 heatmaps as it happens:


Dynamic heatmaps 2



Are you curious to know more about Heatmaps and how they can help you improve your site and boost conversions? We recommend that you read our Ultimate Guide To Heatmaps