What problems do heatmaps solve for eCommerce? What are the benefits of using them? To answer these questions, we’ll look at the types of heatmaps, their benefits, and their drawbacks.
1991 saw the trademarking of the term “Heatmap,” and the first heatmaps charted financial market data. Today, website designers use it as a tool to help create user-friendly website pages, landing pages, and when doing multivariate testing. Heatmaps take thousands of bits of data and transform them into easy to comprehend visual images.
ECommerce and other marketers use heatmaps to determine where shoppers are leaving the sales funnel. They provide a better understanding of a shopper’s behavior or preference.
How Do Heatmaps Work?
Heatmap tools gather information about the way visitors interact with a site and present it in color-coded form. For example, if someone looks at or clicks on a particular box on the page, the heatmap will capture it. The more that position gets hits, the more the color changes. Typically reds and oranges represent the “hottest” points on the page or areas with the highest activity.
Take a look at these four primary types of heatmaps that our eCommerce SEO experts compiled.
1. Hover Maps
These maps measure mouse movement tracking. They show the location of the mouse cursor during the time a user was on a specific page. However, the accuracy of the data is not that good.
Think of how someone positions their mouse. After clicking, visitors may begin to read while the cursor is sitting over an object that they don’t even notice. The heatmap would show heavy traffic for that portion of the screen when in fact, the user didn’t even glance at that spot.
2. Click Maps
Image Credit: Freshmarketer
Click maps display aggregated click data. It’s useful data because it shows where people click on any page. ECommerce web developers use these maps to rearrange clickable links to make it easier for shoppers to buy.
3. Attention Maps
Image Credit: SessionCam
These maps plot areas on the page that get the most and least amount of attention using horizontal and vertical scrolling activity, and length of time spent on the page. This information makes page design easier because attention maps include data for both images and text.
4. Scroll Maps
Image Credit: Freshmarketer
Scroll maps display just how far people scroll down on a page and where they jump off. This information is particularly important when designing long-form pages where fewer people reach the bottom. For example, if you have a disruptive color change on the page (a.k.a. logical ends), people will assume the following text is unrelated and click away. Scroll maps can help identify these trouble spots.
Heatmap tools anonymously track visitors to give you an inside look into how they interact with your website. This information is vital when optimizing and designing web pages. It allows designers to make an informed decision for better conversions and ROI.
Here’s a list of what we believe to be the four best heatmap tools based on customer reviews and popularity.
Without big data analytics, companies are blind and deaf, wandering out onto the Web like deer on a freeway.
Geoffrey Moore, Author of Crossing the Chasm Inside the Tornado
Top 4 Heatmap Tools
Here is the recap of each tool that you can consider for your design optimization.
1. Crazy Egg
Crazy Egg started in 2005 and is the brainchild of Neil Patel and Hiten Shah. They were the first to develop webpage heatmap technology. It easily integrates with platforms like Shopify, Magento, and WordPress. There's a lot of website visitor data out there and it's easy for marketers to feel overwhelmed. Crazy Egg's aim is to simplify all this information into easy-to-understand visual reports and session recordings.
Features:
- Recordings - The recordings feature allows you to see how users interact with your site as if you were standing next to them.
- Snapshots – Visual reports of what people are seeing and using, where they come from, and where they are getting stuck.
- A/B Testing – You can change virtually any element and test it against another to find the sweet spot of conversion. The Crazy Egg Editor lets designers modify any element from within the app and publish it to the website without the need for coding. You can turn the user behavior that you observe on your site into actionable next steps and confirm your design decisions through data.
Crazy Egg has six different ways to help you understand visitor and user behavior
- Heat Map – This shows you popular hot spots and opportunities to improve website navigation.
- Scroll Map – Highlights the scroll-depth of your webpage and the best place for a CTA.
- Confetti – Represents precise individual clicks. You can segment using various metrics such as time on site, OS, geography, etc.
- Overlay – Displays clicks as percentages to help determine CTA placement.
- List –Displays the number of clicks on your web page as numerical values for each area.
- Recordings – View individual visitor sessions in real-time.
Pricing
Their Basic Plan starts at $29/month for up to 20,000 page views per month. Contact them for higher volume quotes.
Cloud-based Crazy Egg supports most mobile devices, Windows, and Mac. It can also tell you the source of your traffic, whether it came from social media, paid ads, blogs, or others.
2. Clicktale
Clicktale goes beyond heat mapping and offers playback of individual user browsing sessions. It’s an invaluable insight into consumer behavior. It easily integrates with eCommerce sites.
Features
- Video tracking
- Webform analytics
- Heatmaps
- Comprehensive analytics for enterprise
Pricing
Pricing varies by the number of customers recorded. For example, 135,000 recordings cost $490 and 300,000 cost $990.
Clicktale uses a simple JavaScript snippet to record visitors. Merchants can observe precisely how shoppers engage with their website.
3. Smartlook
This software gives you the opportunity to check your website through the user's eyes. With Smartlook you’ll understand how users navigate the site to improve design and marketing. It provides analytics for both websites and mobile apps to find out why your users are getting lost, abandoning orders, and why they’re leaving.
Features
- Mobile App Analytics – Capture people using your app. Quickly see what works and what doesn’t.
- See Your Website Through Their Eyes - Record your visitors and how they react to the various page elements.
- Integrates with 50 Apps – Makes it easy to add to your team's tech stack.
- Automatic Event Tracking – Add the SDK to your app and track everything.
- Heatmaps for Smartphones, PCs, and Tablets
Pricing
Currently, Mobile app analytics are free and in Beta testing. For enterprises requiring 12-month data history and the ones that have 1.5 million visitors per month, the monthly fee is $3,024.
Smartlook combines data with a video record of your customer's movements. It’s crucial information for the best SEO companies for eCommerce.
4. FreshMarketer
Take advantage of their Chrome app to make heatmaps and perform other conversion optimization tasks. FreshMarketer captures visitor information and tracking in real-time.
Features
- Visual Editor – Easily change dynamic elements of pages without technical skills.
- A variety of heatmap types
- Integration with CMS and analytics tools
Pricing
Freshmarketer offers an Enterprise-level plan that is available by contacting them directly. They quote $479 Per month / billed yearly for 500,000 visitors (approx. 3.5-million-page views).
They only count a visitor once no matter how many times he or she returns.
FreshMarketer is cloud-based and supports Windows, Linux, and Mac. They can track a visitor’s reaction to the dynamic elements in the website like sliders and drop-down lists.
A Wealth of Information for CRO
Immediately understood by anyone, heatmaps are a simple visual reference. ECommerce marketers can learn a lot about each element on any website page with just a glance. Heatmaps are a valuable design tool for optimizing eCommerce pages because they can verify A/B testing and design changes.
If you are unsure how to use heatmap tools, reach out to a web development company. They can assist you in adding the right heatmap or other analytics tools to your site.
