To add a heatmap to WordPress, install a heatmap plugin from Plugins > Add New, activate it, exclude your own visits, then wait for real visitors: the click map fills on its own, with no code to paste. A WordPress heatmap shows what people did on a page: where they clicked, how far they scrolled, what they ignored.
It is like watching over the shoulder of hundreds of visitors at once, without seeing who they are.
This guide walks you through the setup step by step, how to read your first heatmap, and what to fix first. Still choosing a tool? Read our comparison of WordPress heatmap plugins first.
What you need: a WordPress site, admin access, and a page that gets at least a few dozen visits a week.
Contents
- Step 1: Install a heatmap plugin
- Step 2: Stop counting yourself
- Step 3: If you use a cache plugin, check one setting
- Step 4: Wait for enough visits
- Step 5: Open your first heatmap
- How to read your WordPress heatmap
- 7 things heatmaps often reveal (and how to fix them)
- Step 6: Test your fix, do not guess
- Your WordPress heatmap: the bottom line
- WordPress heatmap FAQ
Step 1: Install a heatmap plugin
We use Opti-Behavior here because the click heatmap is in the free plugin and the data stays on your server. If you prefer another tool, see our comparison of 8 WordPress heatmap plugins.
- In your WordPress admin, go to Plugins > Add New.
- Search for Opti-Behavior.
- Click Install Now, then Activate.
That is it. Tracking starts right away on all your pages. You do not paste any code.
Step 2: Stop counting yourself
You do not want your own clicks in the map. Go to Settings > Traffic Behavior. There you can stop tracking logged-in admins, and add your home IP address under Excluded IP Addresses so your phone visits are ignored too.
Step 3: If you use a cache plugin, check one setting
Cache and "optimize JavaScript" plugins (LiteSpeed, WP Rocket, Autoptimize) sometimes combine or delay scripts. That can stop a heatmap from recording. Opti-Behavior adds itself to the exclusion lists of the common cache plugins, but it is good to check. Our guide heatmap not working after installing a cache plugin walks you through it.
Step 4: Wait for enough visits
A heatmap made of 5 visits is not useful. It shows 5 people, not a pattern. While visits come in, our free website heatmap generator gives a simulated preview of the page from its layout.
- 100 to 200 visits on a page usually show a clear pattern.
- A busy home page gets there in a day.
- A small service page may need two or three weeks.
Step 5: Open your first heatmap
Go to Opti-Behavior > Heatmaps. You see a list of your pages with their number of clicks. Click a page to open its heatmap.
At the top you can switch between desktop, tablet and mobile. Always look at them separately. People tap on a phone very differently from how they click with a mouse.
How to read your WordPress heatmap
The click heatmap
Red and yellow mean many clicks. Green and blue mean fewer. No color means no clicks.
Ask three questions:
- Is the main button among the hottest spots? If not, people may not see it or may not want it.
- Are there hot spots on things that are not links? People think they can click there.
- Is the menu hotter than the page? Visitors may be looking for something the page does not give them.
The scroll heatmap (Pro)
It shows how far down people go. The colors fade as fewer people reach each part of the page.
If only 30% of visitors reach your price or your form, move it up, or give people a reason to scroll.
The attention heatmap (Pro)
It shows where people stop and spend time. A block that gets a lot of attention but few clicks is often confusing, or very interesting. Recordings help you tell which one.
7 things heatmaps often reveal (and how to fix them)
| What you see | What it means | Simple fix |
|---|---|---|
| Clicks on an image that is not a link | People expect more info | Link the image or add a zoom |
| Few clicks on the Buy or Contact button | Button is weak or unclear | Bigger button, clearer text, more contrast |
| Most visitors stop before the button | Button too low | Add a button near the top |
| Lots of clicks on the menu | Page does not answer the question | Add the missing info to the page |
| Clicks on underlined text that is not a link | It looks like a link | Remove the underline or add a link |
| Mobile users miss the button | Layout breaks on small screens | Check the page on a real phone |
| Clicks spread everywhere | Page has no clear goal | Pick one main action per page |
Step 6: Test your fix, do not guess
When you change a page, check that the change really helped. Opti-Behavior has A/B testing in the free version. You can show the old and new version to different visitors and compare the results. See our guide to self-hosted A/B testing on WordPress.
Your WordPress heatmap: the bottom line
A WordPress heatmap takes a few minutes to set up and a few days to fill. Look at your busiest page first, fix the clearest problem, and test the change. Then move to the next page. Not on WordPress, or comparing cloud tools too? See our guide to website heatmap tools.
Add your first WordPress heatmap today
Free plugin, no code, no cloud. Your first click map is ready as soon as visitors arrive.
WordPress heatmap FAQ
How do I add a heatmap to WordPress for free?
Install a heatmap plugin like Opti-Behavior from Plugins > Add New and activate it. Click heatmaps are in the free plugin and tracking starts on its own, with no code to paste.
How long does a WordPress heatmap take to show data?
The first clicks show up within minutes. A useful pattern needs around 100 to 200 visits on the page.
Does a heatmap work with Elementor, Divi or Gutenberg?
Yes. The heatmap reads the page as the visitor sees it, so it works with any theme or page builder.
Can I see heatmaps for mobile visitors?
Yes. Switch between desktop, tablet and mobile at the top of the heatmap. Always check them separately.
Do WordPress heatmaps record personal data?
Opti-Behavior records positions of clicks and scrolls, not names or form contents. In Anonymous Mode, the default, it sets no cookie.
