tessl/npm-posthog-js

PostHog Browser JS Library is a comprehensive browser analytics and feature management SDK that enables developers to capture user events, track product analytics, manage feature flags, record session replays, and implement feedback mechanisms like surveys and conversations in web applications.

Overview

Eval results

Files

PostHog.js Quick Start Guide

Name: tessl/npm-posthog-js
Author: tessl

Get started with PostHog.js in minutes.

Installation

npm install posthog-js

Basic Setup

1. Initialize PostHog

import posthog from 'posthog-js';

posthog.init('<your-project-api-key>', {
    api_host: 'https://us.i.posthog.com',
    loaded: (posthog) => {
        console.log('PostHog loaded!');
    }
});

2. Track Events

// Capture custom events
posthog.capture('button_clicked', {
    button_id: 'signup',
    location: 'header'
});

3. Identify Users

// After user logs in
posthog.identify('user-123', {
    email: 'user@example.com',
    name: 'John Doe',
    plan: 'pro'
});

4. Use Feature Flags

// Check if feature is enabled
if (posthog.isFeatureEnabled('new-dashboard')) {
    showNewDashboard();
} else {
    showOldDashboard();
}

5. Start Session Recording

// Enable session recording
posthog.startSessionRecording();

Common Patterns

React Integration

import { useEffect } from 'react';
import posthog from 'posthog-js';

function App() {
    useEffect(() => {
        posthog.init('your-api-key', {
            api_host: 'https://us.i.posthog.com',
            capture_pageview: 'history_change'
        });
    }, []);
    
    return <YourApp />;
}

User Lifecycle

// On signup
function handleSignup(userId: string, email: string) {
    posthog.alias(userId);  // Link anonymous events
    posthog.identify(userId, { email });
}

// On logout
function handleLogout() {
    posthog.reset();  // Clear user state
}

Feature Flag with Callback

// Wait for flags to load
posthog.onFeatureFlags((flags) => {
    if (flags['new-feature']) {
        enableNewFeature();
    }
});

Configuration Options

Essential Settings

posthog.init('your-api-key', {
    // API endpoint
    api_host: 'https://us.i.posthog.com',  // or 'https://eu.i.posthog.com'
    
    // Event capture
    autocapture: true,
    capture_pageview: 'history_change',
    
    // Privacy
    opt_out_capturing_by_default: false,
    
    // Session recording
    session_recording: {
        enabled: true,
        maskAllInputs: true
    },
    
    // Person profiles
    person_profiles: 'identified_only'
});

Next Steps

Learn More

Best Practices - Production deployment guide
Reference Documentation - Complete API reference
Examples - Real-world usage patterns

Common Tasks

Privacy Compliance → Reference: Privacy & Consent
A/B Testing → Reference: Feature Flags
Error Tracking → Reference: Error Tracking
Session Replay → Reference: Session Recording

Troubleshooting

Events Not Appearing?

// Enable debug mode
posthog.debug(true);

// Check status
console.log('Is capturing:', posthog.is_capturing());
console.log('Config:', posthog.config);

Feature Flags Not Working?

// Check if flags loaded
console.log('Flags loaded:', posthog.featureFlags.hasLoadedFlags);

// Force reload
posthog.reloadFeatureFlags();

Need Help?

Check troubleshooting sections in reference docs
Review common issues
Enable debug mode: posthog.debug(true)

Additional Resources

PostHog Docs: https://posthog.com/docs
GitHub: https://github.com/PostHog/posthog-js
NPM: https://www.npmjs.com/package/posthog-js

Install with Tessl CLI

npx tessl i tessl/npm-posthog-js