The best heatmap plugins for WordPress

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
Types of Heatmaps and Their Benefits
Types of Heatmap Plugins in WordPress
Heatmap Plugins for WordPress
What Is The Best Heatmap Plugin?

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.

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.

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.

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

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.

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 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.

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

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.

Screenshot of the Nelio A B Testing heatmap filters — Nelio A/B Testing heatmap filters.

Screenshot of the Nelio A/B Testing scrollmap filters — Nelio A/B Testing heatmap filters.

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.

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

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).