How to Set Up PostHog Heatmaps on Your Landing Pages
Step-by-step guide to set up PostHog heatmaps on landing pages. Track clicks, scrolls, and user behavior in minutes. No code required.
Why Heatmaps Matter for Your Landing Page
You've shipped something. Traffic is coming. But you have no idea where visitors are actually clicking or if they're even scrolling past the fold.
Heatmaps solve that problem in real time. They show you exactly where users interact with your page—which buttons get tapped, which sections get ignored, where they rage-quit. This isn't theoretical. It's behavioral data that tells you whether your landing page is working or just looking pretty.
PostHog's heatmap tool is built for founders. No agency markup, no monthly fees, no vendor lock-in. You get click heatmaps, scroll heatmaps, and move heatmaps in one platform that also handles your analytics, session recording, and feature flags. Ship faster with data that actually matters.
This guide walks you through setup in under 15 minutes. By the end, you'll see exactly how your visitors interact with your landing page.
Prerequisites: What You Need Before Starting
Before you set up PostHog heatmaps, make sure you have these in place:
PostHog Account and Installation You need an active PostHog instance. If you haven't installed PostHog yet, start with their core documentation to get the JavaScript snippet deployed on your site. This is non-negotiable—heatmaps won't work without PostHog tracking data flowing in.
Admin Access to Your PostHog Project You need admin or editor permissions in PostHog to enable and configure heatmaps. If you're on a free tier, you get full access. If your team uses PostHog, confirm your role settings before proceeding.
Access to Your Website's Code (or Toolbar Permission) You have two paths: deploy PostHog via code (preferred for founders who ship), or use the PostHog Toolbar (easier, no code required). We'll cover both. If you're using the toolbar approach, just make sure your PostHog instance is already installed and firing events on your landing page.
A Landing Page Worth Analyzing Pick a page with real traffic. Heatmaps need data to be useful. If your landing page gets fewer than 10 visitors per day, wait until you have more traffic before spending time on heatmap analysis. The signal will be too weak.
Google Analytics 4 Integration (Optional but Recommended) While not required for heatmaps, connecting PostHog to your GA4 setup gives you context. You can cross-reference PostHog behavior data with your Google Search Console data and conversion metrics. If you haven't done this yet, check out the guide on linking GA4 with Google Search Console to understand how these tools talk to each other.
Step 1: Verify PostHog Is Installed and Firing Events
Before enabling heatmaps, confirm PostHog is actually tracking your site. This saves you 30 minutes of debugging later.
Check Your Installation
Open your landing page in a browser. Open the browser console (F12 or Cmd+Option+J on Mac). Type window.posthog and press Enter. If you see an object with properties like apiKey, projectId, and capture, you're good. If you see undefined, PostHog isn't installed yet.
Verify Events Are Being Captured
Go to your PostHog dashboard. Navigate to Insights → Events. Load your landing page in another tab and interact with it—click buttons, scroll, fill out forms. Watch the event stream in PostHog update in real time. You should see $pageview events, $click events, and $scroll events appearing within seconds.
If nothing appears, your PostHog snippet isn't deployed correctly. Double-check that the initialization code is in your page's <head> tag and that you're using the correct API key for your project.
Enable Autocapture (Critical) Heatmaps depend on PostHog's autocapture feature, which automatically records clicks and scrolls without custom code. In your PostHog project settings, go to Project settings → Data capture and ensure Autocapture is toggled ON. If it's off, heatmaps won't have the interaction data they need.
Once you confirm events are flowing, you're ready to move forward. This is also a good time to review the broader tracking setup—if you're new to PostHog, understanding how GA4 events for SEO track beyond pageviews will help you get more value from your analytics stack.
Step 2: Enable Heatmaps in PostHog Settings
Now enable heatmaps at the project level. This is a one-time configuration.
Navigate to Project Settings In your PostHog dashboard, click the Settings gear icon in the bottom left. Select your project from the dropdown if you manage multiple projects. You'll land on the Project settings page.
Find the Heatmaps Toggle Scroll down to the Data capture section. Look for the Heatmaps toggle. It should be labeled clearly. Click the toggle to enable heatmaps.
Confirm the Toolbar Is Enabled While you're in settings, verify that the PostHog Toolbar is also enabled. The toolbar is how you'll access heatmaps without writing code. It should be toggled ON in the same section.
Save and Wait 30 Seconds Click Save if prompted. PostHog will apply the settings across your project. Wait 30 seconds for the change to propagate, then move to the next step.
This enables heatmaps globally. Individual heatmaps are created per page or per action, which we'll do next.
Step 3: Access the PostHog Toolbar on Your Landing Page
The PostHog Toolbar is your interface for creating and viewing heatmaps without touching code. It's the fastest path for founders.
Load Your Landing Page Open your landing page in a browser. Make sure you're logged into PostHog in the same browser session, or PostHog won't recognize you as an authenticated user.
Trigger the Toolbar Look for the PostHog icon in the bottom right corner of your page. It's a small icon (usually a circle or PostHog logo). Click it. The toolbar will expand, showing options like Heatmaps, Recordings, Feature flags, and more.
If you don't see the icon:
- Confirm PostHog is installed (go back to Step 1 if needed)
- Check your browser's ad blocker or privacy extensions—they sometimes block PostHog
- Verify you're logged into PostHog in this browser session
- Reload the page and wait 5 seconds for the toolbar to initialize
Enable Heatmap Mode In the toolbar, click the Heatmaps option. PostHog will ask you to select a heatmap type: Click heatmap, Scroll heatmap, or Move heatmap. For landing pages, start with click heatmaps—they show you where users are actually tapping.
Once you select click heatmap, the page will overlay a color gradient showing click density. Red areas = lots of clicks. Blue areas = few or no clicks. This is your first real insight into how visitors use your page.
Step 4: Create Click Heatmaps to Track Button and Link Interactions
Click heatmaps reveal which CTAs, buttons, and links your visitors actually engage with. This is where you find out if your primary CTA is getting hit or ignored.
Start a New Click Heatmap In the PostHog Toolbar, select Heatmaps → Click heatmap. PostHog will visualize all clicks on the current page with a color overlay. Hover over different elements to see click counts for specific buttons, links, or sections.
Understand the Color Gradient Red = high click density. Orange/yellow = moderate clicks. Blue/cool colors = low or zero clicks. If your primary CTA button is blue, that's a problem. If your secondary "Learn more" link is red, your visitors aren't engaging with your main offer.
Check Specific Elements Click on individual buttons or links to see their click count and percentage of total page clicks. PostHog shows you:
- Total clicks on that element
- Percentage of all page clicks
- Click rate (clicks per session)
If your signup button has 5% of clicks but your "Pricing" link has 30%, your visitors are more interested in pricing than signing up. This tells you to either improve your value prop or move pricing higher on the page.
Identify Dead Zones Look for areas with zero clicks—sections of your page that visitors completely ignore. Common culprits: below-the-fold content, dense paragraphs, images without context. If your 3-minute explainer video is getting zero clicks, either move it higher, make it more discoverable, or delete it.
Save This Heatmap Once you've explored the click heatmap, save it for future reference. In the toolbar, click Save heatmap or Create heatmap. PostHog will prompt you to name it (e.g., "Homepage clicks" or "Signup page CTA analysis"). Give it a descriptive name so you can find it later.
Click heatmaps are your foundation. They answer the question: "Are visitors clicking where I want them to click?" If the answer is no, your page needs redesign work before you optimize anything else.
Step 5: Create Scroll Heatmaps to Measure Content Engagement
Scroll heatmaps show how far down your page visitors scroll before leaving. This reveals whether your content is engaging or if you're losing people in the middle.
Start a New Scroll Heatmap In the PostHog Toolbar, select Heatmaps → Scroll heatmap. The page will display a vertical color bar on the right side. Red = high scroll depth. Blue = low scroll depth.
Read the Scroll Depth Data PostHog shows you the percentage of visitors who scroll to each section of your page. If 80% of visitors see the top section but only 20% scroll to your bottom CTA, you know content engagement drops off. This is normal, but the degree matters.
Benchmark Against Industry Standards Typically, 60-80% of visitors scroll past the fold on a well-designed landing page. If your scroll rate is below 40%, your above-the-fold content isn't compelling enough, or your page is too long. If it's above 90%, your content is engaging, but make sure you have a clear CTA before visitors reach the bottom.
Identify Drop-Off Points Scroll heatmaps highlight sections where scroll depth suddenly drops. If you see a sharp drop after your feature list, that section isn't resonating. If scroll depth is steady all the way down, your content is working.
Compare Scroll Depth by Device PostHog's heatmaps can be filtered by device type (mobile, tablet, desktop). Scroll behavior differs significantly by device. Mobile visitors scroll more (because screens are smaller), while desktop visitors might bounce earlier if your layout is cluttered. Check both to understand the full picture.
Save This Heatmap Name your scroll heatmap something descriptive like "Homepage scroll depth" or "Signup page engagement." You'll reference this when deciding whether to restructure your page or add more compelling content.
Scroll heatmaps answer: "Are visitors reading my content, or are they leaving before they see my CTA?" If scroll depth is low, your above-the-fold value prop needs work.
Step 6: Create Move Heatmaps to Track Mouse Movement
Move heatmaps show where visitors move their mouse cursor, even if they don't click. This reveals attention and interest patterns that click heatmaps miss.
Start a New Move Heatmap In the PostHog Toolbar, select Heatmaps → Move heatmap. The page will display a color overlay showing cursor movement density. Red = high mouse activity. Blue = no mouse movement.
Interpret Cursor Movement Data Cursor movement doesn't always equal engagement—sometimes visitors just move their mouse while reading. But it does show where attention is concentrated. If your hero image gets lots of mouse movement but zero clicks, visitors are looking at it but not interacting with it.
Move heatmaps are most useful for identifying which sections capture attention. Compare move heatmaps to click heatmaps. If a section has high move activity but low clicks, that's a sign you need a clearer CTA in that section.
Use Move Heatmaps for Design Decisions If your testimonials section has high mouse activity, that's a signal to expand it. If your feature comparison table has low mouse activity despite being visually prominent, consider simplifying it or moving it down the page.
Save and Compare Save this heatmap with a clear name. Move heatmaps are less critical than click and scroll heatmaps, but they add nuance to your understanding of page behavior.
Move heatmaps answer: "Where is visitor attention concentrated?" Use this to inform design and content prioritization decisions.
Step 7: Filter Heatmaps by Cohort and Device Type
Raw heatmap data is useful, but filtered data is actionable. PostHog lets you slice heatmaps by user cohorts, device type, traffic source, and more.
Filter by Device Type In the heatmap view, look for filter options (usually a funnel icon or Filters button). Select Device type and view heatmaps separately for mobile, tablet, and desktop.
Mobile and desktop users behave very differently. Mobile visitors scroll more (smaller viewport), while desktop visitors might spend more time on your copy. Click patterns also differ—mobile users might struggle with small buttons, while desktop users click more precisely. If your mobile click rate is significantly lower than desktop, your mobile UX needs work.
Filter by Traffic Source Compare heatmaps for organic traffic (from Google) versus paid traffic (from ads). Organic visitors often have higher intent and different behavior patterns. If organic visitors have higher scroll depth and click-through rates, that's a signal that your content resonates with search intent.
This is especially relevant if you're running SEO alongside paid campaigns. Understanding how organic visitors behave helps you refine your content strategy. Check out the guide on setting up Google Search Console in 10 minutes to understand your organic traffic sources better.
Filter by User Properties If you've set custom user properties in PostHog (like company size, plan tier, or signup status), you can filter heatmaps by these properties. This reveals whether different user segments interact with your page differently.
For example, if free-tier users have lower click-through rates on your upgrade CTA, that's a signal to redesign your pricing messaging or move the CTA higher.
Create Comparison Heatmaps Save multiple versions of the same heatmap with different filters. Name them clearly (e.g., "Homepage clicks - mobile" and "Homepage clicks - desktop"). This lets you compare behavior across segments without recreating the heatmap each time.
Filtered heatmaps reveal which user segments have different behavior patterns. This is where you find optimization opportunities that broad heatmaps miss.
Step 8: Integrate Heatmap Data with Your Analytics Stack
Heatmaps are powerful on their own, but they're most valuable when combined with your broader analytics setup. Connect heatmap insights to your GA4 data and conversion metrics.
Cross-Reference with GA4 Events If you're tracking GA4 events for SEO beyond pageviews, you already have custom events for signup clicks, demo requests, or other key interactions. Compare these GA4 conversion events to your PostHog click heatmaps. If GA4 shows 100 signups but PostHog shows your signup button only got 50 clicks, some signups are coming from other buttons or sources.
This reveals whether your primary CTA is actually driving conversions or if visitors are converting through secondary paths.
Link Heatmap Insights to Session Recordings PostHog also captures session recordings—video playback of individual user sessions. When you see an unexpected pattern in a heatmap (like a button with zero clicks), watch a few session recordings to understand why. Maybe visitors are confused by the button's label, or maybe they're leaving before reaching it.
Session recordings provide context that heatmaps alone can't give you.
Build a Weekly Heatmap Review Process Set a recurring weekly or bi-weekly time to review heatmaps. Compare current heatmaps to previous weeks. Are click patterns changing? Is scroll depth improving? Are you seeing new dead zones?
This is where you'll catch problems early. If your primary CTA suddenly drops from 20% to 5% of clicks, something changed—either your page design, your traffic source, or visitor intent.
For a structured approach to this kind of ongoing analysis, review the guide on the quarterly SEO review, which covers how to build repeatable review processes for your analytics.
Document Changes and Hypotheses When you make changes to your landing page based on heatmap insights, document what you changed and what you expected to happen. Then measure the impact in the next week's heatmap. This turns heatmap analysis into a continuous optimization cycle.
For example: "Moved CTA button above the fold (previously below fold). Expected click rate to increase from 8% to 15%. Actual result: 12%." This tells you the change helped but not as much as expected, and you might need a secondary optimization.
Step 9: Troubleshoot Common Heatmap Issues
Heatmaps sometimes don't work as expected. Here's how to diagnose and fix the most common problems.
Heatmaps Show No Data If you've enabled heatmaps but see no color overlay, check these:
- Confirm autocapture is ON in project settings
- Verify PostHog is installed and firing events (use the console check from Step 1)
- Make sure your landing page has received at least 10-20 visitors since you enabled heatmaps (heatmaps need data)
- Check that you're viewing a page that PostHog is actually tracking (not a page behind authentication)
If still no data: reload the page, wait 5 minutes, and try again. PostHog sometimes takes a few minutes to process heatmap data.
Heatmaps Are Blank or Partially Loaded This usually means PostHog is having trouble rendering the heatmap overlay. Try these fixes:
- Hard refresh the page (Ctrl+Shift+R or Cmd+Shift+R)
- Clear your browser cache
- Try a different browser
- Check if your site uses Content Security Policy (CSP) headers that might block PostHog's heatmap script
If your site uses CSP, you may need to whitelist PostHog's domain in your CSP headers. Check PostHog's documentation for the correct domain.
Heatmap Colors Don't Match Expected Behavior Sometimes a button shows red (high clicks) but your analytics show low conversions from that button. This usually means:
- Visitors are clicking the button, but it's not working (broken link or form)
- The button leads somewhere that doesn't convert (wrong destination)
- You're tracking the wrong conversion metric
Use session recordings to watch what happens after visitors click that button. This reveals whether the button itself is the problem or what comes after.
Mobile Heatmaps Look Different Than Desktop This is normal. Mobile and desktop have different layouts, different click targets, and different user behavior. Don't expect them to look identical. Instead, analyze each separately and optimize for each device type independently.
If your mobile heatmap shows very few clicks overall, check if your buttons and links are large enough and well-spaced. Mobile users need bigger touch targets.
Heatmaps Aren't Updating in Real Time PostHog heatmaps update every few minutes, not instantly. If you just made a change to your page and want to see the impact immediately, you won't. Wait 5-10 minutes and refresh the heatmap view.
For real-time debugging, use session recordings instead. They update as sessions happen.
Step 10: Use Heatmap Insights to Optimize Your Landing Page
Heatmaps are only valuable if you act on them. Here's how to turn heatmap data into concrete improvements.
Prioritize Changes by Impact and Effort Not every heatmap insight requires immediate action. Use this framework:
- High impact, low effort: Do first (e.g., move a CTA button higher, change button color)
- High impact, high effort: Do second (e.g., redesign page layout, rewrite copy)
- Low impact, low effort: Do third (e.g., minor text tweaks)
- Low impact, high effort: Skip unless you have spare time
A button with 2% click rate that's easy to move or redesign is worth fixing. A section with 5% scroll depth that would require a full redesign might not be worth it yet.
Test One Change at a Time Make one change, measure the impact for 1-2 weeks, then make the next change. If you change everything at once, you won't know which change actually worked.
For example:
- Week 1: Move primary CTA button above the fold. Measure click rate.
- Week 2: Change button color from blue to red. Measure click rate.
- Week 3: Rewrite button text from "Learn more" to "See demo." Measure click rate.
Each change is a small experiment. Over time, these compound.
Common Optimizations Based on Heatmap Data
Low scroll depth? Your above-the-fold content isn't compelling. Rewrite your headline or value prop. Move your strongest benefit higher. Remove unnecessary sections above your CTA.
Low click rate on primary CTA? The button might be unclear, too small, or in the wrong place. Try a larger button, clearer text, or a different color. Watch session recordings to see if visitors even notice the button.
High clicks on secondary buttons but low conversion? Visitors are interested in that feature or option, but it's not converting them. Either that button leads somewhere that doesn't convert well, or you need a clearer next step after they click.
Different behavior on mobile vs. desktop? Your mobile layout might need different prioritization. Mobile visitors scroll more but click less (smaller screens, harder to tap). Simplify mobile layouts and make buttons larger.
Dead zones with zero interaction? Either delete that section or make it interactive. Images, testimonials, or feature lists with zero clicks are wasting space. Add a CTA, make it clickable, or remove it entirely.
Measure the Impact of Changes After you make a change, wait 1-2 weeks for new heatmap data. Compare the new heatmap to the old one. Did click rate on the primary CTA increase? Did scroll depth improve?
If the change helped, great. If it didn't, revert it and try something else. This is how you build a high-converting landing page—through small, measured experiments.
Pro Tips: Advanced Heatmap Strategies for Founders
Tip 1: Use Heatmaps to Test Copy Changes Before you redesign your entire page, test copy changes using heatmaps. Change your headline, rewrite your value prop, or update your CTA button text. Measure the impact on click rate and scroll depth. Copy changes are cheap and fast.
Tip 2: Compare Heatmaps Across Different Traffic Sources Organic traffic from Google behaves differently than direct traffic or paid traffic. Create separate heatmaps for each source. Organic visitors often have higher intent, so they might click more and scroll deeper. Use this insight to tailor your page for each audience.
If you're running organic SEO campaigns, understanding how organic visitors behave on your landing page is critical. Check out the guide on setting up your free SEO tool stack to ensure you're tracking all your traffic sources properly.
Tip 3: Use Heatmaps to Validate Hypothesis Before Major Redesigns Before you spend a week redesigning your landing page, use heatmaps to understand exactly what's broken. Maybe your scroll depth is low because your headline doesn't match search intent. Maybe your CTA click rate is low because the button is unclear, not because your offer is bad.
Heatmaps help you diagnose the problem before you prescribe the solution. This saves you from making expensive changes that don't actually move the needle.
Tip 4: Combine Heatmaps with Session Recordings for Full Context Heatmaps show you what visitors did. Session recordings show you why. Use both. If a section has high mouse activity but zero clicks, watch a few sessions to understand what's happening. Are visitors confused? Are they reading but not finding a CTA? Are they waiting for the page to load?
Session recordings provide the context that heatmaps alone can't give you.
Tip 5: Track Heatmap Changes Over Time Your landing page will evolve. Visitors will change. Traffic sources will shift. Create a heatmap archive—save screenshots or exports of your heatmaps every month. Compare month-to-month changes. Are visitors engaging more or less? Are they scrolling deeper or bouncing earlier?
This long-term view reveals whether your optimizations are actually working or if you're just making noise.
Integrating Heatmaps with Your Broader Analytics Workflow
Heatmaps are one piece of your analytics puzzle. To get maximum value, connect them to your other tools.
Connect PostHog to Your GA4 Setup If you're already tracking with GA4, PostHog heatmaps complement your GA4 data. GA4 tells you what happened (100 users signed up), while heatmaps tell you how it happened (through which button, after scrolling how far, on which device).
If you haven't set up GA4 yet, start with the guide on setting up Google Analytics 4 for SEO tracking from day one. Once GA4 is live, you can layer PostHog heatmaps on top for behavioral context.
Use Heatmaps to Inform Your SEO Strategy Understanding how visitors interact with your landing page informs your SEO content strategy. If your landing page has low scroll depth, that's a signal that your above-the-fold value prop doesn't match search intent. This tells you to revisit your target keywords and search intent.
For a comprehensive approach to aligning your landing page with search intent, review the guide on from busy to cited: a founder's roadmap from day 0 to day 100, which covers how to build landing pages that actually rank and convert.
Document Your Heatmap Findings Create a simple spreadsheet or doc where you record heatmap insights:
- Date
- Page name
- Key findings (e.g., "CTA click rate 8%, scroll depth 45%")
- Changes made
- Expected impact
- Actual impact (measured 2 weeks later)
This turns heatmap analysis from a one-off activity into a repeatable optimization process. You'll start to see patterns and learn what types of changes move the needle for your specific audience.
Conclusion: From Data to Action
PostHog heatmaps show you exactly how visitors interact with your landing page. No guessing. No assumptions. Just behavioral data.
Here's what you've learned:
- Verify PostHog is installed and capturing events
- Enable heatmaps in project settings
- Access heatmaps via the PostHog Toolbar
- Create click, scroll, and move heatmaps
- Filter heatmaps by device type and traffic source
- Integrate heatmap data with your GA4 and analytics stack
- Troubleshoot common heatmap issues
- Turn heatmap insights into concrete page optimizations
Key Takeaways:
- Click heatmaps reveal whether visitors are clicking where you want them to click
- Scroll heatmaps show whether your content is engaging or if you're losing people mid-page
- Move heatmaps indicate where attention is concentrated
- Filter heatmaps by device and traffic source to understand different user segments
- Combine heatmaps with session recordings for full behavioral context
- Make one change at a time and measure the impact
- Use heatmap data to validate hypotheses before major redesigns
Your Next Steps:
- Install PostHog if you haven't already (takes 5 minutes)
- Enable heatmaps in project settings (takes 2 minutes)
- Create your first click heatmap on your landing page (takes 2 minutes)
- Spend 15 minutes analyzing what you see
- Pick one high-impact, low-effort change and implement it
- Measure the impact in 1-2 weeks
- Repeat
Heatmaps are a founder's best friend. They replace guessing with data. They tell you exactly what's working and what's not. Ship your heatmaps today, and you'll have actionable insights by tomorrow.
If you're serious about optimizing your landing page, also ensure your broader analytics foundation is solid. Review the guide on robots, sitemaps, and canonicals to make sure your technical setup isn't sabotaging your organic traffic. Then layer heatmaps on top for behavioral insights that drive conversion optimization.
Your landing page is your storefront. Heatmaps let you see how customers walk through it. Use that data to make it better. Ship it. Measure it. Repeat.
Get the next one on Sunday.
One short email a week. What is working in SEO right now. Unsubscribe in one click.
Subscribe on Substack →