When building client websites or landing pages in Webflow, it’s crucial to know how visitors actually interact with your site — not just how you think they do.
That’s where heatmaps, click tracking, and behavioral analytics come in.
Most Webflow users default to tools like Hotjar or Google Analytics, but if you want a powerful, open-source tool that protects privacy, PostHog is a fantastic option.
In this post, I’ll show you how I connect Webflow to PostHog to track user behavior, generate heatmaps, and analyze clicks, all while maintaining full control over your data.
Why I chose PostHog over other analytics tools?
- Open source and self-hosted options available
- Built-in heatmaps, session recordings, and funnel analytics
- GDPR compliant with full data control
- Supports advanced event tracking without complex setup
Whether you self-host PostHog or use their cloud, you get powerful insights with fewer privacy concerns than some SaaS tools.
How to set up PostHog on a Webflow project?
1.Create a PostHog account
Sign up for a free account or create your own hosting if you want
2.Get your Project API key
- After logging in to PostHog, create a new project
Copy the Project API key from your project settings
3.Add the PostHog snippet to Webflow
In your Webflow project:
- Go to Project Settings > Custom Code > Head Section
Paste this snippet, replacing YOUR_PROJECT_API_KEY:
<script>
!function(t,e){var o,n,p,r;e.__SV=1,window.posthog=e,e._i=[],e.init=function(i,s,a){
function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){
t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}
(p=t.createElement("script")).type="text/javascript",p.async=!0,
p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r),
(n=e).people=n.people||[],n.toString=function(t){var e="posthog";return "posthog"!==t&&(e+="."+t),e},
n.people.toString=function(){return n.toString(1)+".people"},n._i.push([i,s,a]),g(n,"capture"),
g(n,"identifiky"),g(n,"alias"),g(n,"people.set"),g(n,"people.set_once")
},e.__SV=1}(document,window.posthog||[]);
posthog.init('YOUR_PROJECT_API_KEY', { api_host: 'https://app.posthog.com' });
</script>
- This snippet starts tracking immediately after the page loads
- Heatmaps and event tracking will start showing data on your
How I track click events in Webflow with PostHog?
I use this simple JavaScript:
<script>
document.addEventListener("DOMContentLoaded", function() {
document.querySelectorAll('.track-click').forEach(function(el) {
el.addEventListener('click', function() {
posthog.capture('button_clicked', { element: el.textContent });
});
});
});
</script>
Just add the track-click class to any Webflow element you want to track
How heatmaps work with PostHog?
- PostHog automatically generates heatmaps based on user sessions
- Go to PostHog Dashboard > Tools > Heatmaps
- You’ll see maps of scroll depth, click density, and interaction
- Filter by page URL or user segment
Set up sales funnels and conversion tracking
In PostHog:
- Go to Sales Funnels
- Add events like “Landing page visited” → “Call to action clicked” → “Form submitted”
- See where users are dropping off in the sales funnel
Helps you analyze exactly where you’re losing conversions
Perfect for Webflow landing pages and marketing sites
Connecting Webflow with PostHog has been a game changer for my projects.
It gives me insights beyond simple analytics into real user behavior, heatmaps, session recordings, and event flows.
And the best part?
- I retain control of my data
- I don’t rely on expensive or privacy-compromising tools
- Integration takes less than 10 minutes
.svg)
