Web Product Analytics installation - Docs - PostHog

Web Product Analytics installation

Choose an installation method

You can either add the JavaScript snippet directly to your HTML or install the JavaScript SDK via your package manager.

Add this snippet to your website within the <head> tag. This can also be used in services like Google Tag Manager:

HTML

<script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(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||((p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",p.onerror=function(){p=null},(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),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".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('<ph_project_token>', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2026-05-30',
    })
</script>

Install the PostHog JavaScript library using your package manager. Then, import and initialize the PostHog library with your project token and host:

npm/yarn/pnpm/bun

npm install posthog-js

yarn add posthog-js

pnpm add posthog-js

bun add posthog-js

JavaScript

import posthog from 'posthog-js'

posthog.init('<ph_project_token>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2026-05-30'
})

Send events

Once installed, PostHog will automatically start capturing events. You can also manually send events to test your integration:

Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

If you'd like, you can also manually capture custom events:

JavaScript

posthog.capture('my_custom_event', { property: 'value' })

Next steps

Now that you're capturing events, continue with the resources below to learn what else Product Analytics enables within the PostHog platform.

Resource Description
Capturing events Learn how to capture custom events beyond autocapture
Identifying users Associate events with specific users
Creating insights Build trends, funnels, and retention charts
Group analytics Track events at the company or account level

Still have questions?

Ask PostHog AI

Was this page useful?

HelpfulCould be better