Heatmaps show you where visitors click, scroll, and spend time on your WordPress pages. Unlike traffic analytics (which tell you how many people visited a page), heatmaps tell you what they actually did while they were there — which parts of the page they engaged with, where they dropped off, and whether they even reached your call to action before leaving.
For a WordPress site focused on lead generation, heatmaps are diagnostic tools. They answer the questions that traffic data can’t: Why is this landing page getting traffic but few form submissions? Why are people leaving before they reach the CTA? Is anyone actually reading the form fields or are they bouncing before they get there?
This post covers how to add heatmap tracking to WordPress, which tools to use, what to look for in the data, and how heatmap insights connect to lead source attribution.
Heatmap Types: What Each One Shows
There are three primary heatmap types, each answering a different question:
Click Heatmaps
Click heatmaps show where visitors click on the page — not just buttons and links, but anywhere on the page. “Dead click” data (clicks on non-interactive elements) reveals where visitors expect to click but can’t, which often means they expect something to be a link or CTA when it isn’t. Click heatmaps also show which CTAs, buttons, and links are getting the most engagement and which are being ignored.
Scroll Heatmaps
Scroll heatmaps show how far down the page visitors scroll before leaving. For lead generation pages, this is often the most diagnostic data: if your form is below the fold and 70% of visitors aren’t scrolling past the midpoint of the page, your form is effectively invisible to 70% of your traffic. Scroll data determines whether content needs to be moved up, whether the page is too long, or whether a sticky CTA would help.
Move Heatmaps (Cursor Tracking)
Move heatmaps track cursor movement, which on desktop correlates loosely with where a visitor’s eyes are going. Areas of high cursor concentration often indicate where visitors are reading most carefully. This is useful for understanding whether key value propositions and proof elements (testimonials, stats, trust badges) are actually being noticed.
Best Heatmap Tools for WordPress
Hotjar
Hotjar is the most widely used heatmap tool and the easiest to get started with on WordPress. Adding it requires pasting a single JavaScript snippet (or using the official Hotjar WordPress plugin that does this for you). Once added, Hotjar automatically collects heatmap data on any page you enable it for.
Hotjar also includes session recordings (video replays of individual user sessions) and feedback widgets (on-page surveys asking visitors why they’re leaving). The heatmaps and recordings together give you both the pattern (click heatmap shows where most people click) and the individual story (session recording shows exactly what a frustrated user did on the page before leaving).
Free plan: 35 daily sessions for heatmaps, recordings. Paid plans start at $32/month for more sessions and additional features. For most WordPress sites, the free plan is enough to gather meaningful diagnostic data.
Microsoft Clarity
Microsoft Clarity is completely free with no session limits. It provides click heatmaps, scroll heatmaps, and session recordings. Clarity also has built-in AI-powered “Copilot” summaries that explain what the heatmap data means in plain language — useful if you’re new to interpreting this kind of data.
Adding Clarity to WordPress: install the Official Microsoft Clarity plugin from the WordPress plugin directory, authenticate with your Microsoft account, and select your Clarity project. Data collection starts immediately after installation.
For businesses that don’t want to pay for Hotjar, Clarity is an excellent alternative. The main trade-off: Clarity’s UI is less polished than Hotjar’s, and it doesn’t have feedback/survey widgets. For pure heatmap and session recording purposes, it’s comparable.
Lucky Orange
Lucky Orange ($19/month) combines heatmaps, session recordings, conversion funnels, and live chat — a broader toolkit than Hotjar or Clarity at a mid-range price. Its dynamic heatmaps can show data filtered by traffic source (only show clicks from paid search visitors), which directly connects heatmap data to your marketing channels. For teams that want to understand how different acquisition channels behave differently on the same pages, this filtering capability is particularly useful.
Crazy Egg
Crazy Egg ($49/month) invented the heatmap category and has more visualization options than most tools: traditional heatmaps, confetti maps (showing individual clicks color-coded by traffic source), scroll maps, and overlay reports (showing click percentages on specific elements). Its A/B testing feature allows you to test design variants directly within Crazy Egg without needing a separate testing tool.
Adding a Heatmap Tool to WordPress
General installation process (applies to Hotjar, Clarity, Lucky Orange, Crazy Egg):
- Create an account with your chosen heatmap tool.
- Add your WordPress site URL to the tool’s project settings.
- Retrieve the tracking script (a JavaScript snippet with your site ID).
- Add the script to WordPress. Options:
- Use the tool’s official WordPress plugin if available (Hotjar, Clarity, Lucky Orange each have one).
- Or use Google Tag Manager to add the script — paste it as a Custom HTML tag that fires on All Pages. This is the recommended approach if you already use GTM, since it keeps all tracking in one place.
- Or use a plugin like “Insert Headers and Footers” to add the script to the
<head>without modifying theme files.
- Verify installation by visiting your site and checking the heatmap tool’s dashboard for an “active” status.
Important: heatmap tools require some session volume before the data is meaningful. A page needs at least 100-200 sessions before click and scroll patterns are reliable. Don’t make layout changes based on 20 sessions — let data accumulate before drawing conclusions.
What to Look For in Heatmap Data for Lead Generation Pages
The specific diagnostic questions heatmap data can answer for a lead generation page:
Are visitors reaching the form?
Scroll map: what percentage of visitors see the fold where the form starts? If your form starts 60% down the page and only 40% of visitors scroll that far, the form is only being seen by a fraction of your traffic. Possible fixes: move the form up, add a sticky CTA that appears in the header as users scroll, or add a “jump to form” button above the fold.
Are they clicking the CTA?
Click heatmap on your primary CTA button. High traffic + low CTA clicks = the button either isn’t visible, isn’t compelling, or the surrounding content hasn’t built enough trust to motivate action. Session recordings will show you which of these is the cause.
What are they clicking instead?
Dead clicks on non-link text or images near your CTA can mean visitors are clicking where they expect a button to be. Rage clicks (rapid repeated clicking in the same area) indicate frustration — something they expect to be clickable or functional isn’t working. Both signal UX fixes that are blocking conversions.
Where do they drop off in a long page?
If your page has a large drop-off in scroll depth at a specific point, something at that point is causing visitors to leave or lose interest. Boring content, a confusing section, a CTA that didn’t convert them (so they gave up), or simply too much text before the value proposition is clear. Identify the drop-off point and revise the content at that section.
Heatmaps and Lead Source Attribution
A sophisticated use of heatmap data: filtering heatmaps by traffic source to understand whether visitors from different channels behave differently on the same page.
A visitor from a Google ad has already been pre-qualified by the ad copy — they know what the page is about before they arrive. A visitor from organic search may have different expectations. A visitor from social media may be less intent-driven and more discovery-driven. If your heatmap tool allows traffic source filtering (Lucky Orange does this natively; Hotjar allows segment filtering on paid plans), you can see whether paid traffic engages more with the CTA, whether organic visitors scroll further before converting, whether social traffic bounces quickly.
This connection between heatmap behavior and traffic source closes a loop: you know from attribution data which channels drive leads (from a tool like Sales Provenance or GA4), and you know from heatmaps how visitors from each channel behave on your pages. If paid traffic drives leads but has poor scroll depth, you may be paying for traffic that bounces before seeing your offer — a page design problem, not an ad targeting problem. Attribution data tells you the what; heatmaps tell you the why.
If you want help adding proper lead source tracking to your WordPress site alongside your heatmap data, Sales Provenance is built for this.