PostHog for Designers: Open-Source Product Analytics and User Insights
Open-source product analytics platform with session recordings, feature flags, A/B testing, and self-hosting options
PostHog is an open-source product analytics platform that combines event tracking, session recordings, feature flags, and A/B testing into one tool. If you’ve used Mixpanel or Amplitude, you’ll recognize the core analytics features, but PostHog’s open-source nature and self-hosting options make it different. For designers, the session recordings are gold: you can watch real users stumble through your interfaces and spot usability problems you’d never find in testing.
Key Specs
| Price | Free tier (1M events/month); $0.00031/event paid |
| Platform | Cloud or self-hosted; works in any browser |
| Best for | Product analytics, session recordings, user research |
| Learning curve | 30 minutes for basics; hours for advanced features |
How Designers Use PostHog
PostHog bridges the gap between design assumptions and real user behavior. Here’s how designers apply it to understand what actually happens after launch.
For Session Recordings
Watch real users interact with your product. PostHog records every click, scroll, and page transition so you can see exactly where users get confused. Filter recordings by user properties (new vs. returning, plan type, geographic location) or by specific actions (“Show me everyone who clicked this button but didn’t complete checkout”). It’s like having a usability lab running continuously on your live product.
For Behavior Analysis
Track events like button clicks, form submissions, and feature usage to understand which parts of your interface people actually use. Build funnels to see where users drop off in multi-step flows. Create cohorts based on behavior patterns (power users, people who bounced, users who discovered a hidden feature) and analyze what they have in common.
For A/B Testing Design Changes
Test design variations by creating feature flags in PostHog, then measuring which version performs better. Show 50% of users a new button color, layout change, or onboarding flow, and compare conversion rates. PostHog handles the statistics and tells you when you have a significant result.
For Feature Validation
Before building a major feature, create a fake door test: add a UI element that tracks clicks but doesn’t work yet. Measure how many people try to use it. If nobody clicks, you just saved weeks of design and development time. If lots of people click, you’ve validated demand before building anything.
PostHog vs. Alternatives
How does PostHog compare to other product analytics tools? Here’s a breakdown.
| Feature | PostHog | Mixpanel | Amplitude | Hotjar |
|---|---|---|---|---|
| Event tracking | ✅ Full | ✅ Full | ✅ Full | ❌ No |
| Session recordings | ✅ Included | ❌ No | ❌ No | ✅ Core feature |
| Heatmaps | ✅ Included | ❌ No | ❌ No | ✅ Included |
| Feature flags | ✅ Included | ❌ No | ❌ No | ❌ No |
| A/B testing | ✅ Included | ❌ Separate tool | ✅ Yes | ❌ No |
| Self-hosting | ✅ Yes | ❌ No | ❌ No | ❌ No |
| Free tier | ✅ 1M events | ✅ 20M events | ✅ 10M events | ✅ 35 recordings/day |
Choose PostHog if: You want multiple tools in one platform, need self-hosting for compliance, or prefer open-source software with data sovereignty.
Choose Mixpanel if: You need the most mature product analytics with deep funnel and cohort analysis, and don’t mind paying more.
Choose Amplitude if: You’re at a large company focused on retention analysis and need enterprise features with strong customer support.
Choose Hotjar if: You only need session recordings and heatmaps for website optimization, not full product analytics.
Getting Started with PostHog
A 20-minute quick start to tracking your first events:
Step 1: Install the tracking snippet
Sign up at posthog.com and grab your snippet from project settings. Add it to your site’s <head> tag. PostHog auto-captures page views, clicks, and form submissions, so you’ll see data immediately. For React, Vue, or other frameworks, use the official library instead of the snippet.
Step 2: Define custom events
Track actions that matter to your product: “Started Checkout,” “Completed Onboarding,” “Used Feature X.” Use posthog.capture('event_name') in your code. Add properties to events for context: user plan, screen size, or workflow entry point. These properties let you segment and filter later.
Step 3: Watch your first session recording
Enable session recordings in project settings. Wait a few minutes for users to interact with your site, then go to the Recordings tab. Filter by recent sessions and watch. Look for rage clicks (rapid repeated clicks), dead ends (pages where users back out), and confusion patterns (hovering without clicking).
PostHog in Your Design Workflow
PostHog fills the gap between design and reality. Here’s how it connects to the rest of your workflow.
- Before design: Use PostHog data to identify which features are underused or where users struggle
- During design: Reference session recordings to understand current user behavior and pain points
- After launch: Track how the new design performs compared to the old one with A/B tests and funnels
Common tool pairings:
- PostHog + Figma for comparing designed flows to actual user behavior captured in recordings
- PostHog + Notion for documenting insights from analytics and sharing user behavior patterns with the team
- PostHog + Hotjar (some teams use both) for more advanced heatmap features while keeping PostHog for event tracking
- PostHog + FullStory for teams that need more enterprise-level recording features but want PostHog’s analytics
Common Problems (and How to Fix Them)
These issues come up regularly when teams adopt PostHog. Here’s how to solve them.
“I’m tracking too many events and hitting limits”
PostHog’s free tier caps at 1 million events per month. If you’re auto-capturing everything, you’ll hit this fast. Fix it by disabling auto-capture and only tracking events that matter: core user actions, conversions, and key feature usage. You don’t need to track every page view or click. Be intentional about what you measure.
“Session recordings don’t show sensitive data”
PostHog automatically masks password fields and payment forms, but you might need to hide other sensitive content. Add ph-no-capture class to any element you want excluded from recordings. For text inputs, add data-private attribute. Review your first few recordings to ensure nothing private leaks through.
“The data doesn’t match Google Analytics”
PostHog and GA measure different things. GA tracks page views and sessions; PostHog tracks product events and user actions. Numbers will never match exactly. Also check: ad blockers block GA more aggressively than PostHog, users who disable JavaScript won’t appear in either, and bot traffic may be filtered differently.
“Feature flags aren’t updating in real-time”
PostHog feature flags cache on the client for performance. If a user loads your app with a flag set to false, then you flip it to true, they won’t see the change until they refresh. For instant updates, use the reloadFeatureFlags() method to force a check, or design your features to handle flag changes gracefully on next page load.
“I don’t know what to track”
Start with the “jobs to be done” framework: what are users trying to accomplish? Track events when they start a job (open feature), make progress (complete step), or finish (achieve goal). Track the opposite too: abandonment, errors, and dead ends. Avoid tracking vanity metrics like total page views. Focus on actions that indicate whether your product is working for users.