Using Heat Maps to See Exactly Where Visitors Are Clicking On Your WordPress Site

Heat maps show you precisely where people are clicking – and not clicking – on your site. While Google Analytics is a popular choice for real-time information like how many people are visiting your site, how they found it and your bounce rate, only heat maps can help you understand how visitors interact with your site.

Armed with this information, you can improve your pages to show visitors what they want to see, and tweak things like navigation and call to action buttons to make them more visible and, ultimately, more clickable.

What is a Heat Map?

It’s literally a hot map. No, not some treasure map that’s been set ablaze, but rather a map that indicates how a visitor’s activity is distributed across the browser window, with the areas of the most activity being condensed into “hot zones” akin to what the Predator might see.

Confused? I like the definition provided by TechTarget.

A heat map is a two-dimensional representation of data in which values are represented by colors. Heat maps allow users to understand and analyze complex data sets.

I like that definition because it’s concise, but it still might not illustrate my point. This is a heat map:

See how it has those color blobs all over the place? Blue areas are where the visitor’s cursor hovered and/or clicked the least amount of time. Red areas are where the visitor’s cursor hovered and/or clicked the most. This paints a picture of how a single visitor interacted with the site, what captured their interest, and what they wanted more of. It shows you what parts of your site are “hot” and what parts are “not.”

The best heatmaps capture the moments a visitor was on your site, giving you something better than any standard analytics package can provide – a glimpse over that visitor’s shoulder.

What Can Heat Maps Tell You About Your Site?

I’m a visual learner. Someone could walk me through a set of instructions for completing a task verbally and I wouldn’t remember a thing they said. But give me a print out of those words and show me a diagram and I’m good.

I think that’s why I find heat maps so awesome. They’re targeted toward the visually inclined among us. And since I’m speaking to a bunch of site builders and web developers right now, I’d bet I’m not the only one.

Heatmaps tell you how a visitor moves around on your site, yes, but what you can glean from that information is a lot more complex than that. A good heat map can show you:

• What visitors are interested in. Those orange to red areas on a heat map give you a concrete visual cue as to what your site visitors want to know about. This is essential for creating a site that speaks to your audience.
• If there’s navigation confusion. If there’s a bunch of clicks on an area that’s not actually a link, you should probably reconsider how that page element looks so it’s less link-like. Or, you might want to actually make it a link, after all.
• If visitors are distracted. If there’s no clear flow to how a visitor works through a page, you have a problem. One item should flow to the next, to the next, and so forth. Without flow, you don’t have a good shot at converting.
• What’s working and what’s not. A broad generalization to be sure, but heat maps can show you if people are clicking on what you want them to click on. If your lead capture form is cold, cold, cold, then you know something in this area needs to be addressed.
• How conversion ready it is. A lack of clicks on your signup form, “find out more” buttons, or product links is a surefire sign your site could use some work in the conversion-readiness department.
• What images are resonating the most with visitors. According to a case study cited by SumoMe, heat maps can help to determine what images speak the best to your site visitors. For instance, Lindsey Martin, a marketing consultant, uses heat maps on the testimonials pages of her clients’ sites in order to see what images visitors are most interested in. They then highlight these images on the website more, use them in advertising campaigns, and use the subject matter and style to inform future image selections.

How to Put This Info to Good Use

According to David Aguilera over at the Nelio A/B Testing blog, heat maps have allowed them to make several accurate generalizations about the way people browse websites that they can now apply to future redesign efforts. Some of the lessons he’s learned include:

• Banner blindness. Most site visitors are “blind” to the banners at the top of websites nowadays. If you want a visitor to pay attention to something, don’t put it in the banner.
• Summaries are great. Gone are the days when including full articles on your blog’s homepage is a good idea. Now, summaries are the most effective way to relay your content to visitors. It gives them a brief glimpse at a wider selection of your content, which means they’ll a) see more of your content, and b) be more likely to engage with it.
• Left preference. Content that’s on the left-hand side of a page tends to be read more often than that which appears on the right-hand side. This shouldn’t be that much of a surprise—those of us in the west read from left to right, after all.
• Scrolling sucks. We’ve all heard the tip that you should put your most important info above the fold on your website—in the area that a visitor sees without having to scroll. But heat maps have proven this point. People don’t like to scroll to find what they’re looking for. Don’t make them work for the info. Give it to them upfront, on a silver platter.
• Images rule. Photos and graphics have always done wonders for increasing site engagement, so it should come as no surprise that they actually get your visitors to pay attention.

The information you get from using a heat map is only so good as the objective you’ve put behind it. Another case study SumoMe highlights is on its own homepage. Their objective was to  get visitors to install their plugin or code snippet.

I love this case study because it shows you exactly what works, what doesn’t, and what should be changed to increase conversions.

The clicks are clear, right?

The majority of clicks are on the already prominent “Get Started” and “Watch Video” buttons, which is good. That’s what they want.

And each tool gets a lot of clicks, too, but those tools featured on the right side of the screen get fewer clicks. That plays into the “left preference,” featured as one of Nelio’s lessons mentioned above.

With this visualization in hand, SumoMe was then able to reevaluate their homepage and make some test changes including updating the content behind the “Watch Video” link and moving the tools to the left side of the screen.

This falls right in line with the concept of the “F” pattern identified by Nielsen in 2006. This study evaluated Google search results, focusing on where people click the most. It showed that people click on the left-hand side of the screen and along the top to some degree.

But the farther down the page you get, the more concentrated the clicks become on the left-hand side until they taper off completely. Well, maybe it’s just better you take a look at what I’m talking about to the left.

According to Optimizely, this shows that visitor behavior hasn’t really changed in the past ten years.

Which is reassuring. It means, at least so far, online user behavior is somewhat predictable. And where there’s predictability, there’s an opportunity to optimize your site to fit those assumptions.

Optimizely also points out the importance of perspective. That is, the images, graphics, and even text on your site should help to direct the visitor’s eye in the direction you want them to look. You could quite literally have a picture of a person looking at your signup form, for instance. Or, you can take a more figurative approach and ensure the graphics are oriented toward your opt-in or product links.

Depending on the type of heat map tool you use, you can gain access to different information. For instance, Hotjar offers several tools that allow for comprehensive site analytics including one for registering clicks and taps for mobile visitors, one for recording where the cursor moves on the screen, and one for identifying how far down a page a visitor scrolls.

Tools as varied as these can first show you how visitors behave on your site from the moment they land to the moment they click away. Then you can modify your site’s design to ensure visitors complete the action(s) you want them to. The concept sounds simple because it is. But putting it into practice can be a bit intimating.

Rest assured, however, you can create heat map tests to accomplish a multitude of objectives then revise your site based on that information, even if you’ve only just heard of a heat map for the first time today.

What follows is a list of free heat map plugins and software that are compatible with WordPress.

Integrating Heatmaps with WordPress

• Lucky Orange

  

  Lucky Orange’s heatmaps show the clicks, scrolls, and cursor movements, as well as dynamic elements including the popups, dropdowns, and forms

  They are compatible with single-page apps as well as with AJAX. You can record the heatmaps of user engagements on your site and can replay and watch the recordings anytime later. 

  The recordings will contain information including where users clicked, moved, scrolled, and tapped and other additional information including how users interacted with the products, the products they added to the cart, and other similar information.

  In addition to the recording, you can view the live view of the custom experience on your site. It has a live chat option to help you deliver real-time customer support.

• Hotjar

  

  With Hotjar, you can visualize your site’s user behavior. Get a visual representation of where the users click, move and scroll on your site. 

  You can watch the real-time user behavior, giving you an upper hand on the issues on your site that actually frustrates your users and help you resolve those.

  You don’t just get to watch and track the user behavior insights but also set up conversion flows with funnels.

  This plugin comes with features that let you connect with your users better through surveys and a real-time suggestion box that you can add to your site to gather feedback.

  Since Hotjar offers a greater deal of integration with other popular software and tools, it is easy to integrate it with other email marketing tools and set up your conversion funnels based on heatmap analytics.

• Microsoft Clarity

  

  Microsoft Clarity provides insights into user behavior as well as overall website performance. This tool is completely free. 

  It can help generate heatmaps to visualize user interactions displaying the hotspots where the users click and scroll and identify the spots where users spend most of their time on your site. 

  You get to view the user engagement recordings of not just the past sessions but also live user recordings. 

  It has a simple and easy-to-understand dashboard where you can get complete and organized insights on the gathered information.

  It works great as an analytics tool providing more insights on the basic demographics of the visitors which will help you optimize your funnel for better conversions.

  One feature that makes it stand out from the rest of the tools mentioned in this list is the compare feature that lets you compare the heatmaps of two different pages. This will be helpful in cases of A/B testing to understand and conclude which design performs better among your users

• ExtraWatch

  

  With ExtraWatch’s heatmap feature, you can see the list of the most popular pages sorted by the most clicks. The heatmap has various colors that indicate different interactions on your site.

  Blue represents the least clicked areas, and yellow or red elements are the active parts of your site. You can display the heat maps for the selected number of days. 

  This plugin offers real-time notifications when new users visit your website. And you can track the user behavior analytics of multiple sites on a single dashboard.

  The software offers a plugin version that can be installed straight up on your WordPress site or you can add the javascript code manually to your site.

  In addition to the user behavior, the plugin gives analytics about the date, time, city, and country of origin of the users visiting your site. And you can export all this data in a CSV format with ease.

• Inspectlet

  

  Inspectlet provides you with heatmaps and analytics but it is not available as a WordPress plugin. You can use the free version of the software installed on one site only. 

  The free version has recordings of the interactions and engagements that can be played back. It comes with the heatmap suite which includes tracking eye movements, scrolls, and mouse clicks.

  It supports dynamic pages like single-page applications, sites using extensive JS, cookies, authentication pages, and more. 

  The playback session recordings include the user interactions on not just the desktop version of the site but also the mobile version tracking the taps, swipes, pinches, zooms, and orientation changes on mobiles.

  It offers a pro version with additional features like downloading session recordings, managing multiple user accounts, conversion funnel, and more.

Wrapping Up

Heat maps turn a mountain of data into a visual you can interpret at a glance. And while there are more heat map tools out there, this should give you plenty of information to get started with integrating this incredibly useful feature into your websites.

What do you think of heat maps? Are they essential or can you skip them? What is your favorite way to generate them? Let us know what you think in the comments below.

Editor’s Note: This post has been updated for accuracy and relevancy. [Originally Published: April 2015 / Revised: July 2023]

Image Credits: MonetizePros, James Royal-Lawson, Crazy Egg.