Heatmaps are a popular data visualization method in website analytics because they require little user input to create and they’re easy to read.
But when it comes to understanding user behavior and gaining actionable insights that will help you improve your conversion rate and remove friction from your checkout flow, heatmaps alone won’t do the trick.
Heatmaps have three main limitations:
- The insights tend to be obvious and not very actionable. The colored hotspots on a page that indicate click density are almost always clustered around buttons, which is exactly what you’d expect. But even knowing which button is the most-clicked on a page doesn’t tell you what percentage of people who clicked that button actually converted to paying customers, and it doesn’t help you understand differences in behavior between your most valuable visitors and the rest (those that don’t convert).
- They only show aggregate trends about a single page. You can’t track a single user’s journey across your website, nor can you understand any trends about user interactions with elements that appear on multiple pages of your website.
Our website and mobile app analytics tool, Smartlook, was designed to help solve the above issues of basic heatmaps and provide more useful insights that digital marketers and product managers need to improve conversion and retention rates on their websites or apps.
In this post, we’ll show you how Smartlook overcomes the limitations of heatmaps by combining heatmapping with three other much more actionable web analytics tools (session replay, events, and funnels).
- How to get the most value out of heatmaps
- Why session replay is a better tool for understanding user behavior
- How to use automatic event tracking to monitor business-critical customer interactions across your website
- How funnels can help you optimize your conversion rate
Smartlook is a website and mobile app analytics tool that combines the power of heatmaps, session recording, event tracking, and funnel analysis to help you improve conversion rates, find and fix bugs faster, and boost customer retention. Create a free account and start recording sessions today.
How to get the most value out of heatmaps
Even though heatmaps have limitations, you can use them to gather some quick data about how users interact with individual pages, which can lead to hypotheses of what you can change to increase the performance of your website.
With Smartlook, you can view three types of heatmaps: clicks, movement, or scroll.
Here are three ways our most successful customers use Smartlook heatmaps:
Quickly measure clicks for every button on an entire page
When you create a heatmap, you’ll see colored areas (hotspots) around each button on your page. The colors of each hotspot will give you an idea of which buttons get the most clicks (red means more, blue means less), but you can click on the hotspots in the heatmap to find out exactly how many clicks each one got.
Creating a heatmap only takes a few seconds (all you have to do is add the url, specify the number of pageviews to include, and define the date range).
With just a few clicks, you can find out the number of clicks for each button on an entire page.
It’s possible to create basic heatmaps for free using the Page Analytics extension from Google Analytics, but the heatmap only shows you the relative percentages of clicks each element gets (see the screenshot below for an example).
Alternatively, you could set up event tracking for each individual button in Google Analytics to get the actual number of clicks on each button, but this is tedious and requires a developer, and then you’d have to wait for the data points to roll in before you can analyze them.
And if you forget to create an event for a button, there’s no way to get retroactive analysis — you’d have to add it in and wait even longer to get the same info you can get from a heatmap in Smartlook.
Compare new and old versions of your site or app (even retroactively)
Unlike most heatmapping tools, Smartlook allows you to create heatmaps retroactively for websites and mobile apps. This makes it easy to compare heatmaps from before and after a major change on your site or app, such as a redesign of your main product landing page.
With Smartlook, all you have to do to see this before-and-after comparison is create two heatmaps with different date ranges — one before the design change, and one after. You’ll instantly be able to compare the old version to the new version.
With other heatmap tools, if you didn’t create a heatmap of the old version before switching to the new one, you’d have no way to compare.
Use scrollmaps to see which sections of your page are being ignored
Scrollmaps can help you evaluate whether your messaging is holding your audience’s attention. Scrollmaps show you what percentage of visitors to each page made it to each section of the page before navigating to another page (or leaving your site).
If most of your audience drops out before they get to the call-to-action (or CTA), your messaging isn’t working well.
Some common design problems you can find with scrollmaps:
- False bottoms: A design flaw that makes it look like the page ends before it does, causing users to navigate away without scrolling to the bottom of the page.
- Poor positioning of important elements: Testimonials, demo videos, calls-to-action, etc.
In this case study, you can learn how one of our customers used heatmaps to improve their CTR from the homepage to their B2B e-shop by 276%. One of the key learnings was that their page appeared to end before the CTA, so most users never scrolled far enough to see it.
Combine heatmaps with qualitative analytics tools for more insights
As we mentioned above, the analyses you can perform with heatmaps alone only lead to hypotheses about what may be happening on your website. To really understand the why behind the trends you observe with heatmaps, you need to combine them with our other analytics tools: screen recordings, events, and funnels.
In the next sections, we’ll teach you how to use all of these qualitative analytics tools to get actionable insights about what to change on your website or app to improve its performance (and how to measure whether those changes actually worked).
Why session recordings are a better tool for understanding user behavior
Session recordings are replays of real user interactions with your website — from the moment they landed on your site to the moment they left. Unlike heatmaps, session recordings give you the full context behind a particular action to help you figure out why things are happening.
Below, we’ll discuss the advantages of session recordings, and how pairing recordings with events and funnels lets you focus on just the recordings that matter most, saving you a lot of time sifting through recordings.
Understand the user journey from start to finish
Smartlook’s session recordings automatically capture every action the user performed during their session. You can watch the recordings like a movie to see exactly what the user saw when they were on your site (not just a simulation).
You’ll see where they moved their mouse, where they clicked, and what series of pages they explored before either exiting your site or purchasing a product.
Often, watching a few recordings of users who made it to your checkout page will help you immediately identify areas where your UI is confusing, but there’s much more you can do with session recordings in Smartlook.
Triage support tickets with email lookup
With Smartlook’s API, you can match recordings to users. If a user contacts customer support about a bug, you can use their name or email to look up the session in question and watch the replay to understand whether they encountered a real bug or if the problem was user error.
If it was a bug, you can send the recording to developers so they can see what device, operating system, and browser the customer was using, the location of their IP address, and what specific actions may have led up to the bug appearing. This can save lots of precious developer time, because without these session recordings, developers often have to spend a lot of time trying to reproduce the bug before they can begin to fix it.
Find the most relevant recordings with funnels
The benefits above may have been enough to convince you to try session recordings. But you may also be thinking, “My website has hundreds of thousands of visitors, and I don’t have time to watch even a hundred recordings. How do I know which ones to watch to get actionable insights?”
That’s where events and funnels come into play. Just like heatmaps, session recordings are most valuable when combined with events and funnels (which we discuss more below).
For example, say you’re using Smartlook’s funnel analysis tool (or another conversion rate optimization tool, like Google Analytics) to monitor the conversion rate from visiting your homepage to adding an item to the cart.
If you noticed a sudden drop in conversions between two steps in this flow, you could use Smartlook to watch just the recordings of users who dropped at that exact point in the flow. Without a funnel analysis feature, you wouldn’t know which recordings to watch to learn why the conversion rate dropped.
Keep reading for examples of how you can use funnel analysis to find drop-offs in your funnel and improve your conversion rate.
How to use automatic event tracking to monitor business-critical customer interactions across your website
In analytics, an event is any user interaction that can be measured and analyzed, including button clicks, downloads, form inputs, video plays, pop-up windows, scroll-depth level and many more.
What is event tracking in website analytics
The main difference between basic page tracking (what most people track in Google Analytics) and event tracking in Smartlook is that you can track actions that don’t generate changes in URL (e.g. clicking add to cart, using search filters, starting to fill a form, etc.), and you can do it without involving a developer.
As we mentioned before, it’s possible to track events in tools such as Google Analytics, but it usually requires a developer adding specific event tracking code to the elements and actions you want to track.
In addition to tracking individual events, Smartlook also collects additional data, known as properties, that add richness to the events. The default properties that Smartlook tracks for each event are device type, operating system, and geographic location. But with both standard and custom events, you can also add custom properties to further narrow down to the specific events you want to analyze. Custom properties can be things like registered or unregistered users, type of subscription, or product availability.
Event tracking, paired with session recordings, can help you fix broken and confusing elements in the UI
Unlike heatmaps, which tell you what users are doing, but don’t tell you much about why, tracking events and watching recordings of users performing those events is a powerful way to understand user behavior.
Take rage clicks, as an example. Rage clicks are when users repeatedly click on a page. Typically, rage clicks happen in places where users think an element should be clickable, but it’s not (like underlined text that doesn’t have a hyperlink, checkout cart images, icons that look like calls-to-action, etc.).
Because rage clicks almost always represent a confusing or broken element of your UI, Smartlook automatically tracks rage clicks by default and includes them in your dashboard.
Unlike tools that only track events, but don’t record user sessions, when you discover that a particular page has a lot of rage clicks, you often have to dig around in the HTML to figure out where the broken link is or why people are frustrated. But with Smartlook, you can instantly watch recordings associated with any event you are tracking.
For example, you can watch recordings of any users who rage clicked to see exactly what happened. You’ll be taken right to five seconds before the rage clicking starts, but if you need more context, you can watch their entire session from the first page they landed on to the page they exited from.
Monitor business-critical actions
With event tracking, you can monitor the frequency of users performing business-critical actions, and measure trends.
Here’s an example that applies to any SaaS tool with a free version (or at least a free trial) and a paid version. Often, there are a few key behaviors and actions associated with users who convert from free to paid. For example, in a productivity app like Trello, an action that may often be associated with users upgrading to the paid version might be opening more boards, because the free tier only offers 10 boards.
With Smartlook, you could create an event filter for the action of unpaid users creating new boards, and then use that number as a key performance indicator (KPI) for your team. As your product team makes changes to the user interface, you can evaluate whether those changes had a negative or positive impact on the frequency of that event.
Any event filters that you create can be saved as segments and added to your Smartlook dashboard. When you open your account, you can immediately see how your app is performing on that metric and quickly navigate to the recordings of users who performed that event.
Recognize trends faster with retroactive event tracking
Smartlook automatically tracks every user event across your entire website from the minute you add the tracking code to your site. Whenever you create a new user segment or want to analyze behavior trends around a specific action, you can define that event and immediately access the data going back as far as your data retention plan goes (the default retention plan is 30 days, but you can buy extra data retention).
With a lot of other tools (like Google Analytics or Amplitude), you have to manually set up each event that you want tracked, and you have to wait for data to come in before you can analyze it.
How funnels can help you optimize your conversion rate
While you can get a lot of value from the tools above, such as by investigating rage clicks and giving your support team access to session recordings, the most valuable insights from each of the tools come from pairing them with funnel analysis.
In Smartlook, a funnel is a visual representation of the user journey through a series of events. When paired with the recordings of each user that dropped off at each step, you can use funnels to analyze the differences in user behavior between those who converted and those who didn’t, which can give you a lot of insights to help improve your site and potentially increase conversion rates.
We’ve written a complete tutorial about funnel analysis, but we’ll share the short version here:
To create a funnel, you first need to define some event filters, as we demonstrated above. Remember, you don’t need a developer to do this in Smartlook.
Then, you just add all the events you want to track to the funnel, and it will calculate the conversion rate (or drop-off rate) of users from one step to the next and across the entire journey.
These drop-off points are the missing piece of the puzzle when it comes to turning interesting datasets into actionable insights.
They tell you which recordings to look at, which pages to create heatmaps for, and which events to track to find areas where a simple change to your user interface can lead to a much higher conversion rate.
The insights you can gain from funnels are almost endless, but a few quick use cases include:
- Optimize your checkout flow. One of our customers used Smartlook to examine the checkout funnel for an ecommerce shop, and discovered that the largest drop-off point in the funnel was when customers first saw the cost of shipping. With a little research, the team realized the shop’s shipping costs were higher than their competitors, so the customers’ sticker shock was justified. After lowering their shipping costs, they saw a sales increase of 161%.
- Find technical errors in your checkout funnel. The lowest hanging fruit for improving your conversion rate is fixing technical errors that prevent people who want to buy your product from doing so, especially critical errors that prevent someone from checking out. One way to do this in Smartlook is to create separate events for the “Pay Now” button and the “Confirmation” page that shows up when a payment goes through. If there’s a drop-off between those two pages, it’s likely a technical error occurred. When you see this drop-off in your funnel, you can watch recordings of the users who experienced this issue and quickly figure out the nature of the error they encountered. We’ve used this feature on our own checkout funnel, and once discovered that due to a recent legal change in India, customers in India were unable to complete checkout. We were losing thousands of dollars daily until we changed our processes to comply with India’s new commerce laws. But without funnel analysis, we wouldn’t have noticed this anomaly.
With funnel analysis, once you identify an area for improvement and make a change, you’ll immediately be able to see the impact of that change by comparing the conversion funnels from before and after the change.
Understand every user interaction with session recordings, events and funnels
Smartlook is an all-in-one website data analysis tool with a simple pricing structure that allows customers to capture recordings of every single visitor.
Unlike alternative heatmap software providers like FullStory, Hotjar, or Amplitude, Smartlook allows users to retroactively define events, funnels, and heatmaps — providing better real-time business intelligence.
By pairing heatmaps with session recordings, event tracking, and funnel analysis, Smartlook helps users understand the why behind every user interaction with their website or app.