Hotjar Heatmap Not Working? Diagnose and Fix Common Issues
Hotjar Heatmap Not Working? Here's How to Diagnose and Fix Common Issues
If your Hotjar heatmap not working is blocking a launch review or A/B test decision, you're probably staring at an empty page snapshot, a heatmap that says "collecting data" for the third day in a row, or clicks that land in the wrong spots. Let's fix it.
Quick answer: A Hotjar heatmap usually breaks for one of four reasons: the tracking script isn't firing, the page URL doesn't match the heatmap's targeting rule, the sample size threshold hasn't been hit yet, or the page layout changed after data collection started. Check the script first, then targeting, then sample size.
How do you check if the Hotjar tracking script is firing?
Start here. If the script isn't loading, nothing else matters.
Open your landing page in Chrome. Right-click, hit Inspect, and open the Network tab. Reload the page and filter for "hotjar" or "static.hotjar.com". You should see requests to Hotjar's CDN. If you see nothing, the script isn't installed correctly on that specific URL.
Common script problems:
- Script only lives on the homepage. Founders often paste the snippet into one template and forget subpages, pricing pages, or standalone landing pages built in a different tool.
- Tag manager didn't fire. If you installed Hotjar through Google Tag Manager, check that the tag's trigger includes the URL you're testing. Preview mode in GTM shows you exactly which tags fired.
- Consent banner is blocking it. GDPR consent tools often gate Hotjar until the visitor accepts cookies. If most of your traffic clicks "Reject" or ignores the banner, your sample size will be tiny.
- Content Security Policy blocking the script. Check your browser console for CSP errors mentioning hotjar.com. You'll need to add Hotjar's domains to your allowlist.
The fastest sanity check: install the Hotjar browser extension and load the page. It tells you the site ID, whether tracking is active, and if the page qualifies for any active heatmaps.
Why is my Hotjar heatmap showing no data even though the script is installed?
Script fires, but the heatmap stays empty. Three usual suspects.
The targeting URL doesn't match
Hotjar heatmaps target specific URLs. If you set the heatmap to yoursite.com/pricing but your actual page is yoursite.com/pricing/ with a trailing slash, or yoursite.com/pricing?ref=twitter with a query string, matching can fail depending on your rule type.
Use "URL contains" instead of "URL is exact" for pages with variable query strings. If you're running paid traffic with UTM parameters, exact matching will drop most of your sessions. This is the same issue that trips people up with GA4 query string tracking on landing pages.
You haven't hit the sample threshold
Hotjar doesn't render a heatmap until it has enough sessions. For a page getting 20 visitors a day, you might wait a week before seeing anything useful. Check the heatmap's "pageviews collected" counter. If it's under 100, be patient or increase traffic to the page.
The page loads content client-side
Single-page apps built in React, Vue, or Next.js sometimes don't trigger Hotjar's page change detection properly. Hotjar treats each URL change as a new page, but if your app doesn't update document.title or window.location correctly, Hotjar sees one long session on the initial URL.
Fix: call hj('stateChange', '/new-url') in your router when the route changes. Hotjar's docs cover this under Single Page Apps.
Why are my Hotjar clicks landing in the wrong spots?
This one drives people crazy. The heatmap shows clicks floating in whitespace, above buttons, or clustered on nothing.
The cause is almost always layout changes. Hotjar takes a screenshot of your page when it first records the heatmap. It maps clicks to coordinates on that screenshot. If you later change the hero, move the CTA, or swap a testimonial section, all clicks from before the change are now positioned relative to the old layout, and all clicks after the change are positioned relative to the new one.
Fixes:
- Reset the heatmap after any notable layout change. Create a fresh heatmap so data collection starts clean.
- Use Hotjar's "Update snapshot" feature if the change was minor.
- Filter by date range to only view clicks from after the last layout change.
Responsive design also causes this. A click at position (200, 400) on desktop lands somewhere completely different on mobile. Always view desktop, tablet, and mobile heatmaps separately, never the "all devices" combined view.
How do you fix Hotjar not tracking mobile users?
Mobile tracking failures usually come down to three things.
Ad blockers are more aggressive on mobile. Safari's Intelligent Tracking Prevention and mobile ad blockers like Brave or Firefox Focus block Hotjar by default. There's no clean workaround. Expect mobile sample sizes to be smaller than your actual mobile traffic.
The mobile viewport isn't tracked separately. Set up separate heatmaps for desktop, tablet, and mobile. A single "all devices" heatmap is worse than useless because click coordinates don't translate across screen widths.
Script loads after user scrolls. If you lazy-load the Hotjar script for performance, mobile users on slow connections may scroll and click before the script fires. Load Hotjar in the <head> synchronously, or as early as possible.
When should you use a Hotjar alternative instead of debugging?
Sometimes debugging costs more than switching. According to Baymard Institute research, 69% of ecommerce carts are abandoned, and understanding why requires reliable behavioral data. If your heatmap tool is unreliable, you're making decisions blind.
Consider switching if:
- Your traffic is heavily mobile and Hotjar's sample is consistently too small
- You need session replays with better filtering than Hotjar provides
- Your consent management strips out most of your Hotjar sessions
- Pricing has outgrown your needs (see the best Hotjar alternatives or free and cheaper Hotjar alternatives)
For a broader comparison of what to look for, our heatmap tool comparison for landing pages covers tradeoffs between Hotjar, Crazy Egg, Microsoft Clarity, and others.
Quick diagnostic checklist
Run through this in order when a heatmap breaks:
| Check | What to look for | Fix |
|---|---|---|
| Script firing | Network tab shows static.hotjar.com requests | Reinstall snippet or fix GTM trigger |
| URL targeting | Heatmap URL rule matches actual page URL | Switch to "URL contains" |
| Sample size | Pageviews counter above 100 | Wait for more traffic |
| Consent gating | % of visitors accepting cookies | Adjust consent flow |
| Layout changes | Snapshot matches current page | Reset heatmap |
| Device split | Separate heatmaps per device | Create desktop/mobile/tablet heatmaps |
| SPA routing | stateChange calls on route change | Add router hook |
Frequently asked questions
How long does it take for a Hotjar heatmap to show data?
Hotjar needs enough pageviews to render a heatmap, typically at least a few hundred. Low-traffic pages may take days or weeks. Check the pageview counter on the heatmap dashboard to see progress.
Why does my Hotjar heatmap say "0 pageviews" when I have traffic?
The tracking script isn't firing on that specific URL, or the heatmap's URL targeting rule doesn't match. Open the page, check the Network tab for requests to static.hotjar.com, and confirm your heatmap targets the exact URL pattern users hit.
Does Hotjar work with Next.js and other single-page apps?
Yes, but you need to manually notify Hotjar of route changes. Call window.hj('stateChange', newUrl) inside your router's change handler. Without this, Hotjar records every route as the initial page load.
Do ad blockers block Hotjar?
Yes. uBlock Origin, Brave's shields, Safari ITP, and most privacy-focused blockers stop Hotjar from loading. This means your recorded sample is smaller than your actual traffic, especially on privacy-conscious audiences.
Why are my heatmap clicks not aligned with buttons?
The screenshot Hotjar took when the heatmap started no longer matches your current page layout. Reset the heatmap or update the snapshot. Also make sure you're viewing device-specific heatmaps, not a combined view across desktop and mobile.
Can I use Hotjar with Google Tag Manager?
Yes, and it's a common install method. But GTM adds one more failure point. Use GTM's preview mode to confirm the Hotjar tag fires on the page you're testing, and check that the trigger rule matches your URL structure.
How do I test if Hotjar is recording my own session?
Install the Hotjar Chrome extension, visit your page, and click the extension icon. It shows whether the script is active, your session ID, and which heatmaps or recordings the current page qualifies for. This is the fastest way to confirm tracking works.
Fixed your heatmap and ready to act on the data? PagePulse pulls your Hotjar insights into a single landing page audit dashboard, so you can spot drop-off patterns without jumping between five tools. Start a free landing page audit and turn your heatmap data into ranked fixes.