Product analytics installation

Last updated:

|Edit this page

Product analytics enable you to gather and analyze data about how users interact with your product.

To start, install PostHog in the app you want to collect data in.

Tip: Even if you have multiple customer-facing products (e.g., a marketing website + iOS app + web app), it's best to have them share the same project. This enables you to track the user across their journey across different platforms. See organizations & projects docs for more.

Option 1: Add the JavaScript snippet to your HTML Recommended

This is the simplest way to get PostHog up and running. It only takes a few minutes.

Copy the snippet below and replace <ph_project_api_key> and <ph_client_api_host> with your project's values, then add it within the <head> tags at the base of your product - ideally just before the closing </head> tag. This ensures PostHog loads on any page users visit.

You can find the snippet pre-filled with this data in your project settings.

HTML
<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),t||(e+=" (stub)"),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 getNextSurveyStep onSessionId".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_api_key>', {api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only'})
</script>

Once the snippet is added, PostHog automatically captures $pageview and other events like button clicks. You can then enable other products, such as session replays, within your project settings.

Option 2: Install via package manager

yarn add posthog-js

And then include it in your files:

Web
import posthog from 'posthog-js'
posthog.init('<ph_project_api_key>', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' })

If you don't want to send test data while you're developing, you can do the following:

Web
if (!window.location.host.includes('127.0.0.1') && !window.location.host.includes('localhost')) {
    posthog.init('<ph_project_api_key>', { api_host: 'https://us.i.posthog.com', person_profiles: 'identified_only' })
}

If you're using React or Next.js, checkout our React SDK or Next.js integration.

Questions?

  • Gary    2 months ago

    Deployed snippet - confirmed events firing - not receiving in PostHog

    I am using Google Tag Manager to deploy the HTML snippet.

    The tag is configured correctly and it is firing.

    I have tested with the Webhooks site as advised in the debugging FAQ and verified receiving events.

    I am not receiving any events in posthog.

    The init part of the tag being deployed well.

    I see on the GTM help page that there are a number of folks that had this problem

    Help?

    Thansk Gary

  • Jay    a year ago

    API Keys security

    Is it safe to store the API keys on the client side? I am setting up a Flutter app.

    • Manoel(he/him)      a year agoSolution

      Yes, that is correct, the project api_key is public (used on SDKs to capture events). The personal API Key is sensitive.

Was this page useful?

Next article

Capturing events

Once your PostHog instance is up and running, the next step is to start sending events. Event ingestion It's a priority for us that events are fully processed and saved as soon as possible. Typically, events will be usable in queries within a few minutes.

Read next article