TemperStack
Find Tools
Beginner8 min readUpdated Mar 18, 2026

How to install PostHog in your project on PostHog

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.

Prerequisites

  1. A PostHog account
  2. A web application project
  3. Basic knowledge of JavaScript
  4. Access to your project's codebase
1

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.
Tip
Choose a descriptive project name as you'll reference it frequently in your analytics dashboard.
2

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.
Tip
Keep your API key secure and never commit it directly to public repositories.
3

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.
4

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.
Tip
For React applications, install using npm: npm install posthog-js
5

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.
Tip
Start with default settings and customize based on your privacy requirements and data needs.
6

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.
Tip
Use browser developer tools to check for any PostHog-related JavaScript errors if events aren't appearing.
7

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.
Tip
Use descriptive event names and include relevant properties to make your analytics more actionable.

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.

Related Guides

More PostHog Tutorials

How to set up PostHog dashboard

How to enable event autocapture

How to track users across products

How to create your first tracking plan

Other Tool Tutorials

G

Google Analytics Tutorials

H

Hotjar Tutorials

M

Mixpanel Tutorials

Ready to get started with PostHog?

Put this tutorial into practice. Visit PostHog and follow the steps above.

Visit PostHog →