Heatmaps are a powerful way to understand what users do on your website pages—where they click, how far they scroll, what they look at or ignore.
Heatmaps help you understand how people interact with your website pages, so you can find answers to business-critical questions such as ‘why are my users not converting?’ or ‘how do I get more visitors to take action?’ Using heatmaps, you can determine if people are:
A deeper dive into heat maps, with real examples and an overview of the best heatmapping use cases for your website.
A 5-step checklist you can run through to get actionable insight from heatmaps.
Practical success stories from marketers, designers, and e-commerce & product managers who used heat maps to improve their sites, increase conversions, and grow their businesses.
The setup steps for the Hotjar Heatmap tool (and yes: there is a free forever plan you can use).
Got a question about heatmaps?
We collected 10+ of the most popular questions people ask about heatmaps and answered them below.
A website heat map is an aggregated visualization of user mouse movement, scrolling, clicks, and taps. Heat maps are used by designers, UX specialists, and marketers to discover website usage patterns and make data-informed optimizations to increase conversion rate and revenue.
Hotjar heatmaps work by creating a copy of your page’s HTML code, then categorizing each element by their tag, parent elements, and IDs or classes where relevant. When visitors view the page, Hotjar collects usage behavior and maps all the elements users interact with to the master heatmap report. Heatmap data is sorted into three heat map categories for easier analysis: click map, scroll map, and move map.
The primary purpose of heat maps is to visualize website user behavior. By looking at an aggregate of all user interactions on a web page, it becomes easier to spot issues and opportunities for improvement.
You can read any website heatmap in two ways: by looking at the visualization and by reviewing the raw data points. You can spot click trends and issues at a glance thanks to the color-coded nature of heatmaps (red means the most interaction, blue the least). Raw heatmap data tables will reveal more specific insights, such as the HTML elements or pixel locations of clicks and views in order of popularity.
The term ‘heatmap’ was first used (and trademarked) by American software designer Cormac Kinney in the early
You can set up a heatmap on Shopify and see exactly where customers click on your pages by installing the Hotjar Shopify app or manually adding Hotjar’s tracking code to your Shopify theme.
You can use heatmaps on any self-hosted WordPress website to find out where users click by installing Hotjar’s WordPress heatmap plugin, or manually adding Hotjar’s tracking script to your WordPress site.
For user experience purposes, eye-tracking measures where people look when viewing a website, whereas mouse tracking measures where people move and click their cursors (or tap on mobile). Eye tracking can be costly, usually takes place in a lab, and requires research participants to wear specialist equipment, whereas mouse tracking is very affordable (even free) and can generate similar heatmaps.
Studies suggest that there is a positive correlation between eye tracking and move heatmaps, as people tend to look where their cursor is located.
The best free website heatmap tool we know of is Hotjar’s ‘Free Forever’ basic personal plan, which allows you to collect heatmap data from up to 2,000 pageviews.
Technically speaking, any heatmap script you add to your website could potentially slow it down, but Hotjar has been designed to minimize the risk of slowing down your website as much as possible.
To comply with relevant privacy and GDPR regulations, you need to use a heatmap tool that allows you to responsibly manage any user data you collect. Hotjar has built-in compliance features that let you use the heatmap tool in a GDPR-compliant manner.
All personally identifiable information is automatically anonymized on the end user's side on all heatmaps, and you can also add additional form suppression filters to block any elements you require.