A desktop (left) and mobile (right) click map

Click maps: using them to optimize your website

July 23, 2019 by Fio Dossetto

People can't use a website without clicking a mouse somewhere or tapping on a mobile device. Those clicks and taps help them navigate pages and find the products, services, or information they’re looking for.

But do YOU, as a website designer, marketer, or business owner, know exactly where your visitors click and tap? And do you know how to use that information to build a better website and experience?

That's where click maps come in.

In this quick article, you'll learn about how to track where users click, the benefits and limitations of click maps, how you can use them to optimize UX, and how to set up click maps on your website in just a couple of minutes.

Table of contents

What is a click map?

A click map (or clickmap) is a type of website heat map that displays where users click the mouse on a desktop device or tap the screen on mobile. Click maps help website owners track on-page user engagement, such as clicks on buttons, links, images, etc. across a website, which in turn helps them optimize their pages and CTAs for better conversion.

an example of a click map
A click map example on Hotjar's homepage

Click maps are used by user experience designers and marketers to identify opportunities to improve conversions, fix bugs, and iterate better website design. Click popularity is displayed using a color scale from red to blue (where the most popular points are ‘hot’ and represented in red), alongside quantitative data on the number of clicks and user click percentage on each webpage element.

🏆 See it in action: take a look at this live click heat map example to see how click maps work and the type of data you can collect. Put your mouse over any hot/cold point to see the number of clicks that were recorded, and toggle between different devices in the top left to review desktop, tablet, and mobile performances.

Click map vs. heat maps

find out if people are confused by non clickable elements on your website

Heatmaps (or heat maps) is an umbrella term that describes different types of visual website analytics. Click maps are a specific type of heatmap (together with scroll maps and move maps) where the red or ‘hot’ dots show page elements that have been clicked on most frequently, while blue or ‘cold’ dots show the ones that have been clicked on the least. Any area that contains no color has never been clicked on.

See where your website visitors are clicking.

Start using click maps on your website today.

what you need to know to start tracking clicks on your website

Why use website click maps?

With click heat maps, you can:

  • See where website visitors click and tap
  • Identify underperforming CTAs that are getting ignored
  • Find bugs and areas for improvement
  • Showcase engagement data visually

Click maps are a key click tracking tool that helps you spot elements where users engage (or don’t) with your pages and quantify user behavior patterns. You'll see where visitors clicked on CTAs (calls-to-action) and/or on unexpected elements, which in turn gives you a solid starting point for UX improvement and CRO (conversion rate optimization) work.

Look at this quick example:

use clickmaps on mobile and desktops to see where visitors click

This click map was placed on an old version of our homepage that included a video above the fold with a play button that visitors could click. In reality, as both the mobile and the desktop click maps show, nobody really did: the overall engagement is 0.04%—meaning that out of 7000 people, around 3 (!) clicked the play button. Had the video included unique, valuable information about the product that was not replicated anywhere else on the page, we’d have been in trouble—and this click map alone would have alerted us to a problem that needed fixing.

In addition, click maps can be used as a visual aid to help communicate website issues and optimizations to stakeholders and/or clients, which is particularly helpful if you're pitching to a non-technical audience.

heat maps help you make informed, data-based decisions for A/B testing, updating, or (re)designing your website

How to use click maps on your website

You can use click maps on any website—e-commerce site, product listing, blog, landing pages, etc.

Here's how to set up Hotjar click heat maps using our heat Map analytics tool and start collecting click data on your website today. Each Hotjar heatmap will automatically generate all three heat map types (click, move, and scroll), so there’s no need to do anything special to set up a click map.

Log into the main Hotjar dashboard (sign up first for a free forever account if you’re new to it), and navigate to the Heatmaps section to begin.

1. Click the green “New Heatmap” button

step 1 to create a new Hotjar heatmap

2. Give your new heatmap a name

step 2 to create a new Hotjar heatmap

Using a descriptive name like Homepage v1 November will help you find the right heatmap later, especially if you're setting up more than one.

3. Choose the number of pageviews to capture

step 3 to create a new Hotjar heatmap

You can record 1,000, 2,000, and 10,000 pageviews on your heatmap depending on the Hotjar plan you’re on. Your click heat map results will show right from the first clicks.

4. Enter the target page(s)

step 4 to create a new Hotjar heatmap

You can add a click map on a single page, or aggregate clicks across multiple pages with the same basic layout (i.e. product pages).

5. Click “Create Heatmap” and your click map is live

step 5 to create a new Hotjar heatmap

Here’s how the click heat map results will look from inside the Hotjar dashboard:

click-map-dashboard

You can toggle any heat map to show desktop, tablet, or mobile sessions. To view the click map data, select the ‘Click’ tab in the heat map type options. You can also view and download the raw data.

A technical note: to ensure that Hotjar accurately reports where your visitors have clicked, we collect clicks relative to elements on the page. For instance, if a visitor clicks on a button, we will record the position of their cursor relative to that particular button, not the entire page.

Final pro tip: find out why people click

Hotjar has 8 tools for behavior analytics

Click maps are great at showing you what users click and tap on, but that's only part of the story—you still need to understand why users click (or, perhaps more urgently: why they fail to).

To do that, you can combine click map insights with qualitative insight from user feedback surveys and session recordings. Using Hotjar, you can quickly set up Recordings and Surveys (our name for on-site feedback surveys) alongside Heat Maps on your website to get all the data you need to make optimizations and improve UX.

Further reading: check out how to combine heatmaps and other tools for extra insight, and learn how SaaS company CCV Shop used click maps in combination with session recordings to improve conversions for their customers.

See where your website visitors are clicking.

Start using click maps on your website today.

what you need to know to start tracking clicks on your website

4 common click map FAQs

Click maps are a quick and easy way to see what people are really doing on your site. They are a key analytics tool in the UX and optimization toolkit of marketers, UX designers, and conversion rate optimizers—and they are especially useful if you are a business selling online, looking to deeply understand the behavior of your customers: what drives them, what interests them, what they interact with/fail to notice on your site.

Here we collected the most common questions asked about clickmaps:

A click map (also spelled as one word, i.e. clickmap) is a type of website heat map that shows where users click their mouse on a desktop device or tap the screen on a mobile or tablet.

Click maps are useful when investigating on-page user engagement, as they track and visualize clicks on buttons, links, images, etc. on a scale from red (most interacted with) to blue (least interacted with). This data can help website managers/owners optimize pages and CTAs for better conversion—for example by moving elements that don't get interacted with to more visible/relevant sections of the page.

Click tracking is used to measure and report where people click or tap on websites, apps, and emails—so for it to work, you need a click tracking tool that can both a) record mouse clicks and taps (on a mobile/tablet device) and b) display them in a visual or numerical way.

A click map is a typical example of a click tracking tool. A click map works by recording interactions that happen on an individual page and turning them into colorful visualizations of page elements that receive the most/least interaction.

Depending on WHY you want to track clicks, and what you want to use the information for, you can generally use a click tracking tool to record clicks on any part of a page—such as images, HTML elements, links, etc.

Assuming you want to track clicks to understand how people interact with individual pages of your site so you can improve them, you can use click maps to get a quick visualization of the 'hotspots' (the parts of the page that a lot of people clicked) and the 'cold areas' (that users ignore).

If your link is on a website, the fastest way to see if people click on it is to use dedicated heatmapping software: place a click map on the page, wait for some data to be collected, and see if your link is getting any attention.

If your link is elsewhere—for example, in a newsletter—the principle is similar, but you will need to use dedicated email software to verify if/how many people are clicking your link.

1fio2
Fio Dossetto

Fio was the Senior Editor at Hotjar until October 2020. She managed editorial production at Hotjar, generally over-used em dashes, and made sure every piece we published got you one step closer to really understanding your website users.