What a click map shows
A click map is a type of website heatmap that shows where visitors click on a computer or tap on a phone. Busy spots are coloured red or orange and quiet ones blue or green. If 400 people view a pricing page and 120 of them click “Start free trial”, that button glows hot.
Most click maps also give a number for each element, such as the share of visitors who clicked it, so you can read exact counts as well as the colours.
Click maps and other heatmaps
A click map is one of three common heatmaps, and each one answers a different question. The click map shows what people act on. A scroll map shows how far down the page they get. A movement map shows where the mouse rests on computers. Our guide to website heatmaps covers all three.
You may also see “click map” in email tools. There it means a report of which links in an email were clicked. This post is about click maps for web pages.
How a click map is built
A click map is built from many visits to the same page. A small script on the site notes each click: where it landed and which element it hit. The tool then adds up hundreds of visits and colours the page by where the clicks gathered.
Tools record each click in one of two ways. Some store it as a point on the screen. That is simple, but on a page whose layout changes with screen width, clicks on the same button can end up scattered across several spots. Others tie the click to the button, link or image that was clicked, so the count stays with that element even if it moves on a narrower screen or loads late.
Element counts are easier to compare across devices. They also keep working on pages that change after loading, such as product grids or pop-ups.
What to look for on a click map
A click map is most useful for spotting a gap between what you want people to click and what they actually click. These patterns come up often:
- Your main call to action gets fewer clicks than a secondary link, an image or the menu.
- People click things that aren’t links, like product photos, headings, icons or prices. They expected something to happen there.
- Clicks bunch up on one item in a list, which can point to a label that is clearer than the rest.
- Rage clicks, where someone clicks the same spot over and over, often mean a button that is slow or broken.
- Clicks on part of a page that most visitors never scroll to, which tells you that the few who get there are interested.
Some tools label the frustrated clicks for you. In Cuttl, a rage click is 3 or more clicks within 1 second in the same spot. A dead click is a click that changes nothing on the page within 1 second. An error click is a click followed by a JavaScript error. The guide to rage clicks and dead clicks explains how to fix them.
How to read a click map without fooling yourself
Most mistakes with a click map come from reading it out of context. These checks help:
- Look at phones and computers separately. The layout often changes between them, and mixing the two blurs both maps.
- Wait for enough views. A few dozen visits can make one person’s clicks look like a trend. A few hundred views of the page is a sensible place to start.
- Check the scroll map next to it. A button with no clicks may just sit below the point where most people stop.
- Remember hidden elements. Menus, drop-downs, tabs and carousels are often closed when the map is drawn, so their clicks can be easy to miss.
- Compare groups. Visitors from ads, search and email often click differently, and so do new and returning visitors.
- Watch a few recordings. A click map shows where people clicked. A session recording shows what they were trying to do.
From a click map to a test
A click map points to a likely problem, and an A/B test checks whether the fix helps. Suppose many visitors click a product photo that does nothing. You could make the photo open a larger view, then run an A/B test to see whether more people add the product to their basket.
After the change, look at a separate click map for each version. It shows whether the clicks moved where you meant them to, and the conversion numbers show whether that changed the result.
Click maps in Cuttl
Cuttl’s click maps are part of the heatmaps in Journey Insights. They count clicks per element and mark rage and dead clicks on the map. You can filter them by device, channel, campaign, country, segment or A/B test variant. Heatmaps use all of a site’s traffic, even when recordings are sampled. Pages that share a template, such as product pages, are grouped together, and when a page changes Cuttl keeps the before and after views apart.
Frequent rage, dead and error clicks on an element are grouped into issues, with the affected sessions and the recordings that show them.
