PostHog Documentation
Overview
PostHog is integrated into this React Native app for product analytics, user behavior tracking, and session replay. It’s configured at the root level of the app navigation.
Configuration
PostHog is configured in components/layout/rootLayoutNavigation.tsx:
- API Key: Set via
EXPO_PUBLIC_POSTHOG_API_KEYenvironment variable - Autocapture:
- Screen events: Disabled (handled by Expo Router)
- Touch events: Enabled
- Session Replay: Currently disabled
- When enabled, all text inputs, images, and sandboxed views are masked for privacy
PostHog Dashboard
Access
Getting api key
- Log in to PostHog Cloud or your self-hosted instance
- Select your project (Top right corner)
- Go to Project Settings → General
- Copy the Project API key
Key Dashboard Sections
1. Insights (Analytics)
- Events: View all captured events (screen views, button clicks, custom events)
- Trends: Analyze event trends over time
- Funnels: Track user conversion funnels
- Retention: Measure user retention rates
- Paths: Visualize user navigation paths
2. Persons (User Profiles)
- View individual user profiles
- See all events associated with a user
- Filter users by properties or cohorts
- Track user journeys across sessions
3. Session Replay (When Enabled)
- Watch recorded user sessions
- See exactly what users see and do
- Debug issues by replaying user interactions
- Privacy settings mask sensitive data automatically
4. Feature Flags
- Manage feature rollouts
- A/B test features
- Target specific user segments
- Control feature visibility
5. Experiments
- Run A/B tests
- Measure feature impact
- Statistical significance testing
- Conversion tracking
Best Practices
- Event Naming: Use consistent, descriptive event names (e.g.,
button_clicked,screen_viewed) - Properties: Add relevant properties to events for better filtering
- Privacy: Ensure sensitive data is masked in session replays
- Performance: Monitor event volume to avoid performance issues
- Retention: Set up retention analysis to track user engagement
Integration Details
The PostHog provider wraps the entire app in the root layout, ensuring all screens and interactions are tracked. To track custom events, use the PostHog client:
import { usePostHog } from 'posthog-react-native';
const posthog = usePostHog();
posthog.capture('custom_event', { property: 'value' });Environment Setup
Add your PostHog API key to your environment variables:
EXPO_PUBLIC_POSTHOG_API_KEY=your_api_key_here