What is a HeatMap and how to use it to improve your website?


In the digital world, everything is analyzable, everything is measurable, and everything can be improved after analyzing all the data provided by different tools that we have at our disposal, such as the case of “Mailrelay” for the creation of email marketing campaigns.

This time I want to talk about Heatmaps or heat maps, as an essential element for analyzing your site.

This is a fantastic tool to optimize your digital strategy, to maximize your conversions and get the results you would like: A “machine” to attract contacts, get sales of products, new contracts, readers for your articles and a host of other benefits.

But as this is a somewhat technical term and not so popular, even between professionals in the digital sector, I’ll start by defining:

· What is a Heatmap?

A Heatmap is a graphic representation based on warm colors that will tell us what caught the attention of users who visited our website.

They are created with strong colors like red, orange or yellow to indicate the most active zones, where users hovered or clicked. The areas of the website with fewer “visits” are represented by more smooth colors, like green, blue and turquoise.

With these maps, you can see, for example, that most visitors usually, hover the mouse (and thus demonstrate interest) in the top of your website.

Similarly, you can see, for example, that they usually don’t pay attention to the central part of the pages.

In the same way, you can see which elements of your page are attracting your visitors, to make the necessary modifications in the parts of your website that are being ignored by your users.

It is a graphic representation of what catches the attention of the visitors to your site. But it also helps you to identify what is not working on your page.

With this information, you can do all the modifications that you deem necessary, to improve your results and change the map to red in the most relevant zones of your website (a popular article, a contact button, a subscription form to collect data for your email marketing campaign).

para qué sirve un mapa de calor

· Why should I work with a Heatmap?

We can explain this concept more easily with an example. Let’s say you created a page with a special offer of a product or service.

You published this product in the central part of your website on the right side of the page because You believed that it would catch the attention of new visitors.

However, after analyzing the Heatmap of that page, you discover that most of the visitors who accessed this page are paying more attention to the upper left corner. This area of the map is red, while your new product has much less “visits” and is represented by a discouraging yellow.

Once you know what visitors do when they visit your website, you have two options:

  1. Make your information more interesting (you can add photos or videos, change font size or font family, change the background color)
  2. Move your products to the top left because that’s where most of the visits are concentrated.

In this way, you stop doing things by intuition or aesthetics. Every part of your website, every section, every ad, guide, button, ETC. must be located in the best possible place, because only with this information you can improve your conversion rate.

With the information obtained with the Heatmaps, you can detect the most visited sites and see if what caught the attention of visitors is the page area or content that you are trying to promote.

For example, if you detect a red area and include another element, you would like to promote in this area of the page. If the map shows variations in colors, with parts in yellow or blue, this information will indicate that the content is not working as you planned.

Your visitors will be telling you that they were interested in the other element, not the new content you want to promote.

In this case, you can change the content marketing strategy and improve this other element or make it much more attractive to see if this will solve the problem.

tipos de mapas de calor

· Types of Heatmaps

Currently, there are three types of Heatmaps:

1. Mouse movement maps

With that name, you can already imagine what it is. This type of system will map the “movement” of the mouse while the user browses a page, by tracing the mouse through the screen.

It is not the most reliable map type, but it gives us an idea of what is catching the attention of the visitor and in what parts of the page they remain for more time because, consciously or unconsciously, we tend to follow the text we are reading with the mouse.

This information is not 100% accurate, as not all users will move the mouse while reading, but most of us have this habit, probably because we can easily click on any relevant information we find on the page.

2. Click Map

This type of map is the most reliable because it is based on concrete actions of the visitor on our website. With this map, we can measure the areas where users clicked; We can also measure the number of clicks and the number of unique visitors to this area of the website.

With this type of maps, we can know how many visitors watched a video, or clicked on a photo, on a buy button or to find more information about our services.

This type of information is valuable to virtual stores because it is possible to know in detail which products have caught the attention of visitors.

With this information, you can modify the structure of the page and put in the best places the most popular products, because this will give you even better results.

3. Scroll map

In long landing pages, when the user needs to scroll down many times, this type of analysis can give us a very specific idea of how far the user got before leaving the page.

With this information, you can add the most relevant elements at the top and gradually guide the user towards the call to action.

Tools for creating Heatmaps

· Tools for creating Heatmaps

Currently, there are many tools for creating Heatmaps. Some of them are free, but most options only offer paid versions. This is an important fact because these tools cost on average $ 100 per month.

The price may become high for small businesses.

Tools for creating Heatmaps need many visits to be really effective, so if you’re starting with your website and you have not yet exceeded 10,000 or 20,000 monthly visits, this investment may not be worth it.

I don’t want to talk about an extensive list of all the tools that exist for creating Heatmaps because, in fact, most of them are very similar in their features and their cost, so there are no appreciable differences between them.

I would like to talk about the most important free tools, the most effective, based on the number of users who opted for them. Later, you can test them and choose the one that best suits your needs.

1. Yandex Metrics

yandex métrica

Let’s start with the only free tool on the whole list. We are talking about Yandex Metrics.

This tool is free, and this is already a big point in its favor. This is the best option for users who are creating a new business, or who can’t afford to pay for another tool.

You will have to create an account and insert the script in the HTML code of your website so that the software can track the behavior of your visitors. Don’t worry; most tools work this way, so you should have no problem adding the script to your HTML code.

There are two types of analysis: scroll maps and click-through maps.

It doesn’t offer maps to analyze the movement of the mouse because they are the least effective.

You can also use this tool on your Smartphone, which is an advantage that not all other options offer, as it  allows you to work on your site from anywhere.

One of its features is that you can select two periods and compare the activity of your visitors, either because you have modified the site or because you started a special promotion to sell a new product.

It also has another series of fantastic features for analyzing your site, mainly because it is a free application, but in this article, we are talking about how to create and interpret Heatmaps, so we are not going into details about each of these tools.

2. Crazy Egg

crazy egg

The next recommended tool is Crazy Egg, the most popular paid option for this type of tasks. For those who work with WordPress, there is a plugin you can use to install the tool easily on your site.

If you work with any other platform, just copy the script in the HTML code of your page.

It is a complete tool and not too expensive. The the cheapest plan is recommended for sites with around 10,000 visits per month and costs about 29 € per month.

In addition to the common features available in any tool for creating Heatmaps, Crazy Egg, adds another Heatmap option that they call “confetti.”

It is a type of Heatmap segmented by traffic sources, which means that you can see the different Heatmaps according to the traffic generated on social networks, google searches (or any other search engine).

This information can be very useful because you will be able to analyze your work on social networks and find out where the visitors are coming from. With this information, you can see if your strategy is working correctly and your campaigns are attracting visitors to your site and the part of your pages that you want to promote in every marketing action.

This way you can distribute your content correctly on your website.

3. Heatmap.me


Now I want to talk briefly about a simple but perfect tool you can use to create real-time Heatmaps. With it, you can see how your visitors are interacting with your website.

Heatmap.me is a very simple to use software, it is very easy to install (and it also has a plugin for WordPress) and with a free version that you can use to start your business.

After optimizing your website and starting to receive five figures a month, you can pay the $ 100 (about 70 or 80 euros) to hire their cheapest monthly plan.

4. Hotjar


Finally I wanted to talk about Hotjar. It’s one of the first tools of this type, and you will quickly see that they know what they are doing. They offer quick support to answer your questions and solve your problems.

Like many other tools, it is a paid software, but you can test the system for 15 days for free with the business version.

For sites that are starting or have no more than 2,000 visits per month, they have a free basic map that will allow you to generate a standard Heatmap with enough information to analyze visitor behavior.

This tool is very complete. In addition to Heatmaps, there are many other resources at your disposal.

The paid version has options for many options:

Form analysis, session performance, conversion funnels, surveys with users, ETC.

All this information can be sent by email so that you can draw conclusions about what needs to be optimized on your site, to increase the number of conversions with a minimum bounce rate.

· Conclusions

I don’t want to create a very long article. As I said before, there are many tools for creating Heatmaps with advanced features to measure the results of your actions on the Internet.

Before you decide to spend your money on one of these tools, you have to understand your real needs and your budget.

If you need fast results with an advanced tool and with several extra features, I would recommend Crazy Egg or Hotjar.

But don’t forget, Heatmaps are only really effective for websites with a reasonable number of visitors. Among all the tools that we saw today, only the basic free version of Hotjar was created for websites with up to 2000 monthly visits.

For other tools to work properly, your website needs to have at least 10,000 to 20,000 monthly visits.

Before you begin, you will need to define a digital marketing strategy to attract visitors to your website and then install a good Heatmap tool to track the behavior of your leads and optimize your site.

Leave a Reply

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