30%off
Cyber Monday Sale

The Best Heatmap Plugins for WordPress: What’s New for 2021!

Published in Online Marketing.

Watch our video

There is a better version of your web

Comparison of two variants of the same page using A/B testing

Share this post

Currently, in digital marketing, what works best to get more sales is to understand how your visitors behave on your website and, from there, generate hypotheses for improvement. We have already seen that A/B tests are the best tool to improve conversion: they allow you to create several versions of a website and check with data which one works better. With Google Analytics we can also determine which pages of our website are the most visited or where people stay the longest. However, A/B tests or Google Analytics, although they provide us with very valuable information, do not just give us all the information necessary to understand the behavior of our visitors on our website in order to establish behavioral patterns.

Heatmaps are a tool that can provide us with this valuable information that will clarify a little more the behavior of our visitors. Based on this, we can better determine the hypotheses that can improve our users’ experience and conversion. In other words, heatmaps help to discover the potential A/B tests that we can create on our website.

What a Heatmap Is

According to Wikipedia, a heatmap is a data visualization technique that shows magnitude of a phenomenon as color in two dimensions. The variation in color may be by hue or intensity, giving obvious visual cues to the reader about how the phenomenon is clustered or varies over space.

Heatmap showing the probable location of Malaysia Airlines Flight 370.
A heatmap indicating the probable location of missing Malaysia Airlines Flight 370 in a Bayesian method analysis of the aircraft’s possible flight paths of the aircraft (source: Wikipedia.org).

The previous image is worth a thousand words: in the image, in red or dark brown we see the “hot zone”, i.e. where the Flight 370 in question should surely have landed and, in blue, the “cold zone” represents a lower probability of finding the wreckage of the plane. From the heatmap the search strategy was established.

These types of maps show hot and cold areas on a “hot-to-cold” color scale. And the great advantage of this type of map is that, being so visual, you don’t need any kind of technical knowledge to interpret it, since it is tremendously evident.

Image showing the color scale used in heatmaps
Color scale used in heatmaps from dark brown for “hot areas” to dark blue for “cold areas”.

On websites, heatmaps are also a very useful tool to study the behavior of users when they visit them. With them, we can see the areas that receive the most attention and deduce opportunities for improvement in order to achieve the objectives of our website.

Types of Heatmaps and Their Benefits

On websites we can basically define different types of heatmaps to understand what attracts the user’s attention. All of them are inspired by the technique of eye tracking of users. The basic idea is that a user performs actions (movements, clicks or scrolling) with the mouse that are directly related to the movement of their eyes. In fact, there is a Carnegie Mellon University study that corroborates the correlation between the two with the specific value of 88% (in times of Covid vaccination, this value seems more than reasonable).

Interaction Heatmap

The interaction heatmap, which is also generically known as heatmap, is based on mouse pointer tracking. A heatmap will show as hotspots of a web page those where, on average, the most users have interacted. To interpret the results you have to take into account that warmer colors indicate a greater degree of interaction, and therefore of relevance, in the different elements of the page.

Screenshot of a heatmap on the Nelio A/B Testing pricing page
Screenshot of a heatmap on the Nelio A/B Testing pricing page.

What is the main use of heatmaps? They show us useful information about which elements of our page are getting all the attention of our visitors: where they pay more attention, where they do not pay enough attention, which links or buttons attract more attention, or if they are clicking, or if something that does not interest us is catching their attention.

For example, if on your page you have an action button or link that you want your visitors to see and click on, and when viewing the results of the heatmap on that page you don’t see a red area above the button, something is not working as it should.

Another example: would you like to know if the banners in the middle of your blog posts are working for you? Of course, the analytics of clicks to the banner will give you a lot of information but with a heatmap it will be much clearer if the banners are ignored or have an impact.

Variant heatmap with English banners
Heatmap of a post with a banner. A clear case of banner blindness.

Confetti

Confetti, or clickmaps, are graphical representations that show clicks of visitors to our website. The clicks are shown individually and different colors are used to indicate other types of information, such as the moment of the click (how long the user was on the page until that particular click), browser type, operating system, duration of visit, country, etc.

Results of a confetti with Nelio A/B Testing
Results of a confetti with Nelio A/B Testing.

Confetti offers information that you will not find in other analytics and that is particularly useful to better understand the behavior of your visitors on your pages. For example, to understand when the user clicks on certain calls to action, if they are particularly attracted by certain images and click on them even if they are not clickable, if they click on widgets you may have, etc.

Scrollmaps

A scrollmap is a type of graphical representation that visually shows how far users scroll down a page by scrolling vertically. Scrollmaps can be compiled on desktops, mobiles, and tablets, and are formed by aggregating the different vertical coordinates of users’ scrolling. Color is used to represent the most and least viewed parts of a page, from hot (popular) to cold (unpopular).

Screenshot of a scrollmap on the Nelio A/B Testing pricing page
Screenshot of a scrollmap on the Nelio A/B Testing pricing page.

The scrollmap helps you see how far users see your page. If most of them don’t make it past the first fold, first try to understand why, make sure that the most critical information is in that fold, and think about how you can make the page more attractive or interesting to read further down. Note that it may be that most of your users do indeed see a whole page. But if they are not performing any of the actions you would expect, it is surely an indication that users are not finding what they were looking for. Finally, it is interesting in scrollmaps to understand if the behavior is similar for any type of device.

Types of Heatmap Plugins in WordPress

Before selecting a Heatmap plugin for WordPress, it is interesting to understand the type of solution each plugin provides you with.

Any tool that calculates heatmaps on page must implement the different components that allow the creation, tracking, calculation, and display of the heatmap results. Depending on how these components are implemented, we find the following types of plugins:

  • Plugin that includes all the components in your WordPress: it is a type of plugin that is entirely developed so that the creation, tracking, calculation, and display of the results are done in your WordPress. The great advantage of a plugin of this type is that its learning curve is usually practically zero since it takes advantage of the editors provided by your WordPress. The most important problem is that the collection and calculation of the heatmaps can affect the load on your server.
  • Fully external tool and plugin to insert a tracking script in your WordPress: these plugins basically insert a script on the page you want to test so that, when a visitor accesses it, it can track their actions and send them to the eternal tool. The creation, calculation, and display of results are performed in an external tool. The great advantage of this solution is that the overhead of your website is minimal but, on the contrary, you need to learn one more tool in which you must log in to have access to all the information.
  • Plugin with all the components in your WordPress except for the monitoring and calculation of the heatmaps that is carried out in an external tool: a solution that seeks the advantages of the two previous alternatives is that of a native WordPress plugin in which you can create and view the heatmaps in the WordPress dashboard itself. What is outsourced is the calculation component of the heatmaps. In this way, you don’t have the need to learn any external tools since the creation and visualization is done in your own WordPress dashboard. But, on the other hand, you remove the burden of tracking events (clicks, scrolls, etc.) and reduce the load on your server.

Heatmap Plugins for WordPress

Let’s look at the different types of heatmap plugins that you can download from the WordPress.org plugin directory below.

Nelio A/B Testing

Nelio A/B Testing in the WordPress Plugin Directory
Nelio A/B Testing plugin for WordPress .

Nelio A/B Testing is a native WordPress plugin that offers you a solution where you can not only create A/B tests, but you can also get amazing heatmaps to analyze the behavior of your visitors. It is fully integrated with the Gutenberg block editor and is compatible with page builders. In addition, it has more than 1,000 active installs and a very good rating in the WordPress plugin directory. It’s the plugin we have developed at Nelio and, therefore, I can guarantee that its support service for both the free version and the premium plans is great.

Available Heatmap Types

Nelio A/B testing includes the three types of heatmaps mentioned above.

Plugin Type

Nelio A/B Testing is a native WordPress plugin in which all the components are in the plugin, except for the storage of mouse clicks and movement data. You can download and install the free plugin like any other plugin from the WordPress plugin directory.

To create a new heatmap test from the WordPress dashboard, you must first select that you want to create a heatmap test:

Screenshot of the selection of the type of test to create with Nelio A/B Testing
With Nelio A/B Testing, creating a new heatmap is as easy as clicking the create heatmap icon.

Then you just have to add a name to the test and select the content (page, post, or custom post type) on which you want to track your visitors.

Creation of a new test the heatmaps
Creating of a new heatmaps test with Nelio A/B Testing

Additionally, with the premium version it also allows you not only to finish the test manually, but also to specify whether you want to end the test after a certain time or after a certain number of visits.

Automatic End Mode based on Page Views in Nelio A/B Testing
When configuring a test, change its end mode so that the test automatically ends when reaches the amount of page views consumed.

And that’s it, you shouldn’t worry about anything else. From your WordPress dashboard, and without having logged into any external tool, you already have your test running. Even so, the Nelio A/B Testing plugin stores all the results on its own servers, with the great advantage that the load on your website’s server is practically not affected by the execution of the heatmap.

The visualization of the results of the three types of maps is also available from your WordPress dashboard. In addition, any other type of A/B test that you have created with the tool always includes the display of the heatmaps. And for each of them you have different types of filters that you can play with to get more detailed information.

If you want to know more about some of the tests, including heatmaps, that we have performed with Nelio A/B Testing, you will find them in this link.

Plans and Pricing

There’s a free version accessible from the WordPress.org plugin directory that allows you to create heatmaps up to a total of 500 visits per month.

Premium plans depend on the number of sites where you want to install the plugin, the volume of visits to pages with tests running, and various other features.

Nelio A/B Testing Premium plans and prices
Nelio A/B Testing Premium plans and prices.

It is important to understand that this tool not only allows you to create heatmaps, but it is the most complete WordPress plugin to create A/B and multivariate tests.

Aurora Heatmap

Aurora Heatmap plugin in WordPress directory
The Aurora Heatmap plugin is a WordPress plugin that allows you to create heatmaps.

The Aurora Heatmap plugin is a totally free native WordPress plugin that allows you to create the heatmaps you want in your WordPress. It has more than 20,000 active installations, with few ratings and a very limited WordPress support service (it is a totally free service).

Available Heatmap Types

The free version of Aurora Heatmap only allows you to create the classic heatmaps, but you can also have a premium version with which you can get a kind of scrollmap in which you can know what percentage of users have reached a certain level of scrolling on a page.

Screenshot of a heatmap made with the Aurora Heatmap plugin
The Aurora Heatmap plugin allows you to create and view heatmaps in your WordPress (source: Aurora Heatmap) .

Plugin Type

Aurora Heatmap is a native WordPress plugin in which all the components to create and obtain heatmaps are located in WordPress. After downloading the plugin, its use is very easy and you do not need any registration in an external tool.

One of the limitations of this plugin is that the results displayed do not allow any filtering. Additionally, keep in mind that, by collecting all the information in your own WordPress, you may experience an overload on your hosting service.

Plans and Pricing

The Aurora Heatmap plugin is completely free and allows you to create as many heatmaps as you want without limit of page views. It also has a premium plan that adds scrollmaps.

Screenshot of Aurora Heatmap premium plan
The Aurora Heatmap plugin has a premium plan that you can subscribe to to add features to the free plan.

Crazy Egg

Crazy Egg plugin in the WordPress directory
The Crazy Egg plugin is a WordPress plugin that allows you to create heatmaps on the Crazy Egg external service.

The Crazy Egg plugin is a free plugin that allows you to add the Crazy Egg tracking script to your WordPress website. The tracking script allows the Crazy Egg external service to track your visitors.

Embed the Crazy Egg script into a WordPress site.

Available Heatmap Types

Crazy Egg is an external service that includes the three types of heatmaps mentioned.

Plugin Type

Crazy Egg is a plugin that is used to insert a script to track visits. The service for creating, calculating, and displaying the resulting heatmaps is done externally. For this reason, to use the service, the first thing you must do is create an account on their service.

Plans and Pricing

The Crazy Egg plugin is free but has different plans and prices for the premium heatmap service :

Screenshot of Crazy Egg plans and pricing
Crazy Egg offers 4 different plans that you can subscribe to.

Hotjar

Hotjar plugin in the WordPress directory
The Hotjar plugin is a WordPress plugin that allows you to create heatmaps in the Hotjar external service.

The Hotjar plugin is a free plugin that allows you to add the Hotjar tracking script to your WordPress website. Like the previous plugin, the tracking script allows the external Hotjar service to track your visitors.

Available Heatmap Types

Hotjar’s service includes heatmaps and scrollmaps and also includes a user tracking map that can help you better understand what they do on your website.

Plugin Type

The Hotjar plugin follows the same philosophy as Crazy Egg: it is used to insert a script to track visits. The service for creating, calculating and displaying the resulting heatmaps is carried out in the external service. And like the previous one, to use the service the first thing you must do is create an account on their service.

Hotjar also has a large number of filters with which you can view the results of the different heatmaps.

Plans and Pricing

The Hotjar plugin is free but has different plans and prices for the their heatmaps platform:

Screenshot of the plans and prices available for the Hotjar heatmaps service
The Hotjar service has several plans for personal, business and agency websites.

Mouseflow for WordPress

Plugin Mouseflow for WordPress en el directorio de WordPress
The Mouseflow for WordPress plugin is a WordPress plugin that allows you to create heatmaps.

The Mouseflow for WordPress plugin is also a free plugin whose only functionality is to insert the connection code with the external Mouseflow service.

Available Heatmap Types

The Mouseflow service has 5 types of heatmaps : click, scroll, attention, movement, and geographic. For many of them, it provides you with additional metrics that you can complement with the displayed maps.

Screenshot of a Mouseflow clicmap.
The results shown in Mouseflow are complemented by additional metrics that can provide very interesting information (source: Mouseflow website.

Plugin Type

The WordPress Mouseflow plugin follows the same philosophy as Crazy Egg and Hotjar: it is used to insert a script to track visits. The service for creating, calculating, and displaying the resulting heatmaps is all done externally. And like the previous ones, to use the service the first thing you must do is create an account on their service.

Plans and Pricing

The Mouseflow for WordPress plugin is free but has different plans and prices for the heatmaps service:

Screenshot of the available plans and prices of the Mouseflow heatmaps service
Mouseflow has various plans and prices to suit different types of customers.

Lucky Orange

Lucky Orange plugin in the WordPress directory
The Lucky Orange plugin is a WordPress plugin that allows you to create heatmaps.

The Lucky Orange plugin is also a free plugin that allows you to add the Lucky Orange tracking script to your WordPress website.

Type of Heatmaps Available

The Lucky Orange service has the creation of scrollmap, movement and click heatmaps.

Screenshot of Lucky Orange heatmap types
Lucky Orange is a service that offers you three types of heatmaps, scroll, movement and click.

Plugin Type

The Lucky Orange plugin follows the same philosophy as Crazy Egg, Hotjar and Mouseflow: it is used to insert a script to track visits. The service for creating, calculating, and displaying the resulting heatmaps is carried out externally to WordPress. And like the previous ones, to use the service the first thing you must do is create an account on their service.

Plans and Pricing

The Lucky Orange plugin is free but has different plans and prices for the heatmaps service:

Screenshot of the plans and prices available for the Lucky Orange heatmaps service
Lucky Orange has several plans and prices to suit different types of customers.

What Is The Best Heatmap Plugin?

If you’re still not sure which heatmap plugin is right for you, here is a quick summary of some things to consider:

  • Nelio A/B Testing is a plugin developed by us and it’s one of the most complete and versatile native plugins for WordPress to be able to create heatmaps (and of course, incredible A/B tests) without having to leave your WordPress.
  • Aurora Heatmap is the only native WordPress plugin in which all its components are installed on your website. This allows complete control of the tool, but its functionalities are more limited and may overload your server.
  • Crazy Egg, Hotjar, Lucky Orange, and Mouseflow are four external services to WordPress for the creation of heatmaps with very complete suites that you can consider if what you are looking for is to do very exhaustive tracking of your visitors.

In any case, heatmaps are a great complement to the creation of A/B tests, since they provide you with data on what is going wrong and what you could improve on your website. That is why our recommendation is that, if you are looking to optimize the conversion on your website, use a tool that provides both services together.

Featured Image by Zoltan Tasi on Unsplash.

Leave a Reply

Your email address will not be published. Required fields are marked: •

I have read and agree to the Nelio Software Privacy Policy

Your personal data will be located on SiteGround and will be treated by Nelio Software with the sole purpose of publishing this comment here. The legitimation is carried out through your express consent. Contact us to access, rectify, limit, or delete your data.