How to install PostHog in your project on PostHog

beginner 8 min read Updated 2026-03-18

Quick Answer

Installing PostHog in your project involves creating a project in your PostHog dashboard, copying your API key, and adding the PostHog JavaScript snippet to your application. This enables automatic event tracking and analytics for your web application.

Try PostHog Full PostHog Review

Prerequisites

A PostHog account
A web application project
Basic knowledge of JavaScript
Access to your project's codebase

Step-by-Step Instructions

Create a PostHog account and project

Navigate to posthog.com and sign up for an account. After verification, click Create your first project and enter your project name, website URL, and select your industry. Click Create project to proceed.

Choose a descriptive project name as you'll reference it frequently in your analytics dashboard.

Get your project API key

In your PostHog dashboard, click on Project Settings in the left sidebar. Navigate to Project API Key section and copy your Project API Key. This key will be needed to connect your application to PostHog.

Keep your API key secure and never commit it directly to public repositories.

Choose your installation method

PostHog offers multiple installation options. For web applications, go to Getting Started in your dashboard and select your platform: JavaScript/HTML, React, Node.js, or Next.js. Each option provides specific installation instructions.

Install PostHog JavaScript library

For HTML/JavaScript projects, add this script tag to your <head> section:

<script>
!function(t,e){var o,n,p,r;e.__SV||(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);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+='.'+a),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
posthog.init('YOUR_API_KEY',{api_host:'https://app.posthog.com'})
</script>

Replace YOUR_API_KEY with your actual API key.

For React applications, install using npm: npm install posthog-js

Configure PostHog settings

Customize your PostHog configuration by adding options to the init function:

posthog.init('YOUR_API_KEY', {
    api_host: 'https://app.posthog.com',
    autocapture: true,
    capture_pageview: true,
    disable_session_recording: false
})

Set autocapture to automatically track clicks and form submissions.

Start with default settings and customize based on your privacy requirements and data needs.

Verify installation

Navigate to your website and perform some actions (clicks, page views). Return to your PostHog dashboard and click on Events in the left sidebar. You should see events like $pageview and $autocapture appearing within a few minutes.

Use browser developer tools to check for any PostHog-related JavaScript errors if events aren't appearing.

Set up custom event tracking

Add custom event tracking to capture specific user actions:

// Track a custom event
posthog.capture('button_clicked', {
    button_name: 'signup',
    page: 'homepage'
});

// Identify users
posthog.identify('user123', {
    email: 'user@example.com',
    plan: 'premium'
});

Place these calls where relevant user actions occur in your application.

Use descriptive event names and include relevant properties to make your analytics more actionable.

Common Issues & Troubleshooting

Events not appearing in PostHog dashboard

Check your browser's developer console for JavaScript errors. Verify your API key is correct and ensure you're not blocking the PostHog script with ad blockers. Events may take up to 5 minutes to appear.

PostHog script blocked by content security policy

Add https://app.posthog.com to your CSP header: script-src 'self' https://app.posthog.com; connect-src 'self' https://app.posthog.com

Duplicate events being tracked

Ensure you're only initializing PostHog once in your application. For single-page applications, avoid calling posthog.init() multiple times during navigation.

Session recordings not working

Verify that disable_session_recording is set to false in your configuration and check that your plan includes session recording features in your PostHog project settings.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official PostHog website before purchasing.

Visit PostHog View PostHog Pricing