Skip to main content




2WgMVnV

Did you know something great about WordPress? Well that fact is that more than 413 million people around the world view WP-hosted pages every month! And it is expected to increase!

So if you have a WP powered website, you should be very excited! Well, there is a catch. These views are spread over 21.1 billion pages. Which means you have many, many competitors.

Therefore, you must be wondering how to stay ahead of the competition. Therefore, I am writing this piece for you!

As your users' expectation for a seamless web experience is increasing every day, you have to have foolproof data (in case you thought my vocabulary was limited) about how they perceive your website. Stacey Martinet, vice president of marketing strategy and communications at Adobe, concurrently agrees with this and says,

“Data is important for a successful customer experience. A data-driven approach to creativity helps marketers work more productively, create the right content faster, and deliver it to the right customer, through the right channels, at the right time. "

And the analysis of the activity data of your users, my lovely and honored readers, is where the use of heat maps can be extremely useful! Are you interested in knowing how? So please proceed to the next slice of the cake!

What is a heat map?

Before you get your hopes up, let me clarify something. Heat maps can't tell you anything about what's going on in your partner's mind! But it can possibly give you a pretty good idea about the components of your web page that users are liking (or not liking).

So here it is!

The heat map is a visual map of how your users have interacted with your website. As an example, it can show you which areas of your page have been the most visited, which buttons have received the most clicks, how your users have hung their cursors on the interface, etc. Let me show you what it looks like:
A heat map is a visual mapping of the way your users have interacted with your website.

A heat map is a visual mapping of the way your users have interacted with your website.Image Courtesy - WebAliveComo
you can intuitively realize, the red area is where your users have spent most of their time. The green and bluish area, apart from this, shows the least visited areas.

Types of heat maps

There are different types of heat maps. Here we would be talking about four of them. Those are:

  • Click Maps
  • Displacement maps
  • Mouse movement maps
  • Form Tester Maps

Let me tell you about each of them.

Click Maps

Click maps give you a color-coded visual of clicks on buttons or any component on your page.
Click maps give you a color-coded visual of the clicks.

Click maps give you a color-coded visual of the clicks. Source - ExtraWatchLa
The red spot on the buttons at the top and middle right has been the one that most visitors to that page have clicked on. Apart from this, the blue-green areas have received far fewer clicks.

This at the same time shows that some parts of the page have been clicked even though they are not buttons. This can mean that people may be distracted or confused by the page layout or aesthetics. It would be beneficial if you brought some changes. That way, they would pay more attention to your CTAs.

Displacement maps

Then there are the displacement maps. Scroll through the maps color-coded on your page according to your traffic data. They are very handy for quickly calculating the parts of the WP page that your users need to take into account.

So if it turns out that some of the information components / pieces that you would like your visitors to focus on are in the yellow region (or sometimes blue / greenish blue), it is best if you transfer it to the red zone. It is very likely to increase your conversion!
Scroll maps color-code your page according to its traffic data ..

Scroll maps color-code your page according to its traffic data ..Source - Crazyegg

Mouse movement maps

Further in the family of heat maps is the "mouse motion heat map." At the same time they are called float maps. As the name implies, this heatmap class shows traces of the way its user moved their mouse.

Although it sounds very sophisticated, it could be highly misleading. Why? Well, in most cases, there is no direct correlation between mouse movement and part of the page that we are focusing on. Even then, this, when analyzed in conjunction with other types of heat maps, has the potential to provide evidence for the inferences drawn from them.
Analyze User Activity on Your WordPress Site Using Heatmaps - This heat map shows traces of the way your user moved his / her mouse.

Analyze User Activity on Your WordPress Site Using Heatmaps - This heat map shows traces of the way your user moved his / her mouse.Source - CodeCanyon

Form Tester Maps

Last but not least, the form tester maps. Forms are an integral part when it comes to lead generation and e-commerce. You can't afford to have a potential prospect (who could become a paid customer) get frustrated and walk away.

So in case your lead generation is going downhill or not progressing at your desired pace, analyze your form page and have a form tester map generated. That would indicate where on your form, most of your users are bouncing.
Analyze User Activity on Your WordPress Site Using Heatmaps - Form tester maps are an integral part when it comes to lead generation and ecommerce.

Analyze User Activity on Your WordPress Site Using Heatmaps - Form tester maps are an integral part when it comes to lead generation and ecommerce.Source - UX CollectiveEn
From the form tester map above, you can see that most people are bouncing off the first field of the form. Therefore, there are no colored regions that cover the second and third fields.

In this case, please review this page of the form in relation to the previous page. Perhaps the users of this page had no interest at the time to sign up for anything. As an example, you can place this form in a different part of the page. Or maybe the road design needs to be more interactive. Remember, the devil is always in the details (and you thought that's only true in detective movies)!

A holistic approach to user activity analysis

So far we have talked about different types of heat maps and how they can be of individual help. Now I would give you my secret sauce of analyzing user activity using heat maps.

The first step is to have a displacement map, click on the map, and generate a floating map.

After that, you will probably want to relax a bit. There is nothing wrong with that. But don't think you have finished! The real (and fun anyway) part starts now!

Compare your displacement map with your click map. If possible, place them on two screens.

And then compare every detail of your page present on both maps.

Calls to action (CTA)

Has your CTA received a higher or lower number of clicks compared to the attention that part of the page has received (your scrolling map would tell you which area has received the most attention from users)? Or it wasn't compelling enough for people to click on it.

Or the opposite could be the right thing to do. Let's say 30 out of 100 visitors scrolled to the bottom of your page. Therefore, that area is colored blue on your displacement map. But 23 of those 30 people clicked on a button placed there. This means that you would probably have more engagement from your users if you changed that button to a red area on your page (red does NOT mean DANGER here).

It could be a complicated process. But I would give you a return on collectors. So keep calm. And don't lose Sherlock's hat!

Try to come up with as many inferences as possible. One of them would turn out to be the reason behind that spike in your conversion you've been longing for!

This step is the most important. After this is complete, you will need to find out which of the inferences you derived in the previous step makes the most sense. If necessary, try to consult an expert.

Now that you're armed with that Intel, you will soon be able to find a likely design change for your WP page. At this point, you are like that murderer who just got his purpose photo (lock and load time)!

Before you test your work package page turn, you should keep something in mind.

In other words, your inference from heat maps is NEVER 100% exact. It is what they call a «educated guess »

A / B testing

Your A / B test (at the same time called the division test) could reveal that it is far from what you deduced. So keep an open mind and proceed.

User session replay

After you've zeroed in on what is likely causing your page to malfunction, there is another test you can run for confirmation. This is not mandatory (nothing in this article is. I am just telling you what I have benefited from).

This test is called "user session replay."

These are actual screen video sessions recorded when a visitor is browsing your website. Yes, it is possible (not exactly rocket science). No, it is NOT illegal. So don't expect the FBI to show up at your door.

The downside to user session reruns is that they are time consuming. Usually you have to sit for hours of sessions to be able to deduce anything useful. But many WP page owners have benefited from this. Maybe you at the same time would be one of them!

Heatmap plugins for WordPress often provide this service. I would reveal some of those below. (I love raising the buzz! I can't help it).

The story is not over

If it makes you feel a little uncomfortable or discouraged, don't be discouraged. I use this effective mantra. You may find it useful at the same time. It is that, with each test, you are getting one step closer to the change that would trigger your conversion!

I've finished telling you everything I could without scaring you Except for one thing.

Throughout this article, you have probably been wondering how to generate a heatmap for your WP page. Even though I have managed to keep you very interested (I hope!) In my article so far, this question has not ceased to plague your mind. It's gotten to the point that you can't take it anymore! So here you go.

It may seem very complicated. Rest assured, it is not.

All you have to do is add a heatmap plugin to your WP dashboard. Among them, some of the best and most popular are the hotjar, the clicktale and the crazy egg. Below is a graph from Google Trends comparing how often people have searched in the last six months.
Google Trends chart comparing how frequently people have searched.

Source - Google Trends
They come with detailed instructions on how to install and get them up and running on your WordPress website. You just have to follow them one by one. If you find this a nuisance, ask your WordPress developer to do it for you!

In case you're too busy, know that there are plenty of analysts who would love to have some fun with your data. Yes, you need to pay for them - there is no such thing as FREE lunch. Visit Upwork or Fiverr, and you will find many people who probably make a living from data analysis. They frequently charge between $75 and $200.

If you are interested in getting an even deeper analysis of your website user activity, then you can get eye-tracking services. There are several companies that offer various levels of eye-tracking service with a charge between $1,000 and $1,300. Some of the more sophisticated eye tracking services cost more than $10,000. Don't panic (not on my guard)!

These services are generally required by data scientists or researchers working on AI and machine learning. Therefore it is not something that YOU need at this time.

This, combined with all of your heatmaps, will give you a more productive assessment of your website's user experience.

Conclusion: Heatmaps for WordPress

  • Best practice is to have at least one displacement map and one click elicited map. Then compare them to get valuable deduction nuggets.
  • Generate the heat maps after 25,000 visits or 3 days of activity on the work package page. Therefore, it is very likely that you deduce reliable information.

As your WordPress page receives an increasing number of visitors each day, you will find yourself in a greater need for a quick analysis of your users' activities. Therefore for the foreseeable future, the relevance of heat maps to you will not reduce. For your own sake, you should master its use.

R Marketing Digital