Heatmap Tools for Your DTC Site: Setting Up Hotjar and Microsoft Clarity and Reading the Data
1. Why Small Sites Need Heatmaps Too: Low Traffic Makes Qualitative Data More Important
Google Analytics tells you “70% bounce rate on this page,” but it won’t tell you why users bounced. Heatmaps and session recordings fill that gap: they record the actual clicks, scrolls, and mouse movements on your page, so you can see exactly where users get stuck, where they misclick, and where they scroll away.
When daily traffic is low, quantitative data (A/B tests, conversion rates) can’t produce conclusions, but qualitative observation is the most useful. A B2B DTC site with 100 visitors a day can record several hundred sessions in a week with heatmaps, which is enough to spot several obvious design problems. That’s why the previous article said not to run A/B tests with low traffic, but recommended heatmaps. Pair them with A/B testing tool selection and use them together: heatmaps surface hypotheses, A/B tests validate them.
| Tools | Price | Traffic cap | Session recordings | Best for |
|---|---|---|---|---|
| Microsoft Clarity | Free | None | Yes, AI filtering | Small sites getting started, zero budget |
| Hotjar free plan | Free | 2,000 sessions/day | Limited | Trying out with very low traffic |
| Hotjar paid plan | From $32/month | Depends on plan | Full + filtering | When you need polished recordings |
2. Hotjar or Clarity: Comparing Three Dimensions
The two overlap heavily: click heatmaps, scroll heatmaps, and session recordings are all there. The differences come down to three things. First, price: Clarity is completely free with no cap, while Hotjar’s free plan is rate-limited and its paid plan starts at $32/month. Second, recording quality: Hotjar’s recordings are smoother and its filtering is more granular, while Clarity’s recordings occasionally stutter but are good enough. Third, AI features: Clarity includes AI insights that automatically flag abnormal sessions like “quick backs” and “rage clicks,” which is friendly for small teams.
Here’s the counterintuitive part: you can run both tools at once, and they don’t conflict. Their heatmaps overlap heavily, but Clarity has stronger replay filtering, while Hotjar’s heatmap visuals are easier on the eyes. For a small B2B site, start with Clarity for a month, and if you find you really need finer replay filtering, add the paid Hotjar plan. Both deploy through GTM for centralized management, see Managing GTM Tags, Triggers and Variables.
| Comparison dimension | Clarity | Hotjar | How small sites should choose |
|---|---|---|---|
| Cost | Completely free | Free with limits / paid from $32 | Zero budget? Pick Clarity |
| Replay quality | Good enough, occasional lag | Smooth, fine-grained filtering | High standards? Pick Hotjar |
| AI insights | Built-in anomaly flagging | Paid plan only | Want free AI? Pick Clarity |
| Performance impact | Lightweight | Medium | Both load asynchronously |
3. Deployment: add the code via GTM, and mind compliance
Both tools are easy to deploy: register an account, get your tracking ID, and add a snippet through GTM. The key issue is compliance. Session replay records visitors’ real behavior, so EU sites must load the heatmap script only after cookie consent, or they violate GDPR. The approach is the same as for pixels: in GTM, set the heatmap tag to “wait for consent” and fire it only after the user agrees.
On performance, both tools load asynchronously and barely affect Core Web Vitals, but don’t let them block loading alongside other heavy scripts. Watch closely during the first week after deployment: does the script load only after consent, and is replay actually recording your session? For compliance details, see Compliance foundation for global sites, and for performance baselines, see Core Web Vitals.
| Deployment steps | Action | How to verify |
|---|---|---|
| Register an account | Get the tracking ID | ID format is correct |
| Add the tag in GTM | Paste the code with your ID | Check firing in Preview mode |
| Set up cookie consent | Load only after consent | No network requests before consent |
| Verify with your own session | Visit and interact yourself | See the replay in the dashboard within 10 minutes |
4. Reading the data: what to look for in each of the three heatmap types
There are three types of heatmaps, and each is read differently. Click heatmaps show where users clicked. Focus on finding areas where “a click did nothing” — usually a design users mistook for clickable. Scroll heatmaps show how far users scrolled. If 80% stop at a certain line, the content above it isn’t holding people. Session replays show the full path, the core of qualitative analysis: watch one real visitor from arrival to exit.
Key caveat: with fewer than 200 visits on a single page, heatmaps aren’t statistically meaningful. A blog post on a small site might get only 50 visits a week, and the heatmap will be pure noise, so don’t draw conclusions from it. Only read heatmaps for pages with over 200 monthly visits; for everything else, use GA4 to spot trends. For how to read form-related heatmaps, see Inquiry form reliability and spam protection.
| Heatmap type | What to check | Signal | Action |
|---|---|---|---|
| Click heatmap | Misclick areas | Users clicked non-interactive elements | Add a link or change the cue |
| Scroll heatmap | Content drop-off | Many users stop scrolling at a point | Improve the content there |
| Session recordings | Full behavior path | Repeated hesitation, quick backtracks | Pinpoint the confusion |
5. Common misreadings: a red hotspot doesn’t mean users want it
The most common beginner mistake: you see a red patch on the heatmap and think, “Users are focused here, so I should add content.” Wrong. Red can mean misclicks, where users thought something was clickable but it wasn’t. It can also mean an ad slot, since bright colors naturally draw clicks. The right move is to open session recordings, watch what real visitors actually do in that spot, and then decide whether it’s demand or a misclick.
Another misreading is treating a heatmap as statistics. A heatmap is an aggregated visualization, not a significance test. A red area might come from just 10 visitors clicking repeatedly, which doesn’t mean “most users.” Small sites need to be especially careful: with a small sample, every color on the heatmap could be random. Watching 20 recordings on a fixed schedule each week is far more reliable than reading the heatmap. For a daily monitoring routine, see Six Monthly Tasks for Site Maintenance.
| Misreading | Surface read | What it might really mean | How to verify |
|---|---|---|---|
| Red hotspot = users want it | Add content and links | Misclicks or an ad slot | Watch recordings to confirm behavior |
| No clicks in a spot = nobody wants it | Delete that content | It’s too far down to be seen | Check scroll depth |
| One person stalling in a recording = serious problem | Redesign everything | A single user’s case | Count similar recordings |
| The redder the heatmap, the better | Chase hotspots | Scattered hotspots mean no focus | Check click concentration |
6. Turn heatmap findings into action
Watching heatmaps and recordings isn’t enough if you never change anything. Set aside 30 minutes each week, pick the 1 or 2 most obvious problems, and fix them the following week. For example, if users keep clicking an image thinking it’s a link, make it a link or add a label. If the scroll heatmap shows a lot of stopping on the product specs line, the specs are too dense, so break them into a table or bullet points. After fixing, watch for another week to see whether the same confusion disappears from recordings.
This “find, fix, watch again” loop is the minimum process for optimizing a small site with heatmaps. Don’t try to fix everything at once. Fix one thing a week, and that’s 12 improvements in a quarter. Combine it with Site monitoring and alerts to handle performance issues and experience issues separately.
FAQ
Hotjar or Microsoft Clarity?
How much sample data does a heatmap need to be meaningful?
What do the red areas on a heatmap actually tell you?
Do session recordings need to comply with GDPR?
Do heatmap tools slow down my site?
How often should I review heatmaps and recordings?
Final thoughts
Heatmaps and session recordings are one of the few affordable “user research” tools a small site has. Big companies run user interviews and usability tests; a small site can record hundreds of replays with Clarity’s free plan and get results that aren’t far off. What matters isn’t how expensive the tool is, it’s whether you have the patience to spend 30 minutes a week actually watching how people use your site.
Three steps to get started: first, install Clarity today via GTM and set up cookie consent; second, block out 30 minutes every week to review heatmaps for your key pages plus 20 recordings; third, pick the 1-2 most obvious issues each time and fix them the following week, then watch what changes. Run this small loop for a quarter and the experience on your own site will improve visibly.
One line worth remembering: the red on a heatmap isn’t what users are telling you. The hesitant clicks and quick bounces in session recordings are. Watch the recordings, don’t just look at the map.