or run

tessl search
Log in

Version

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/posthog-js@1.335.x

docs

guides

best-practices.mdquick-start.md
index.md
tile.json

tessl/npm-posthog-js

tessl install tessl/npm-posthog-js@1.335.0

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.

quick-start.mddocs/guides/

PostHog.js Quick Start Guide

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

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