We've decided to make less money: We've slashed our pricing for session replay. They're now more than 50% cheaper for most customers.

A/B testing installation

Last updated:

|Edit this page

A/B testing enables you to test the impact of product changes and understand how they affect your users' behaviour. For example:

  • How changes to your onboarding flow affect your signup rate.
  • If different designs of your app's dashboard increase user engagement and retention.
  • The impact a free trial period versus money-back guarantee to determine which results in more customers.

A/B tests are also referred to as "experiments", and this is how we refer to them in the PostHog app.

To start using A/B tests, install PostHog with the library you want to run tests in (if you haven't already):

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.

!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'})

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:

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:

if (!window.location.host.includes('') && !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.

Advanced option - bundle all required extensions

By default, the PostHog JS library will only load the core functionality, lazy-loading extensions such as Surveys or the Session Replay 'recorder' when needed. This can cause issues if you have a Content Security Policy (CSP) that blocks inline scripts or if you want to optimize your bundle at build time to ensure all dependencies are ready immediately.

You can include all extensions in your bundle by importing them directly before initializing PostHog. In addition you can configure the SDK to never load extensions lazily.

import "posthog-js/dist/recorder"
import "posthog-js/dist/surveys"
import "posthog-js/dist/exception-autocapture"
import "posthog-js/dist/tracing-headers"
import "posthog-js/dist/web-vitals"
import posthog from 'posthog-js'
posthog.init('<ph_project_api_key>', {
api_host: 'https://us.i.posthog.com',
disable_external_dependency_loading: true // Optional - will ensure we never try to load extensions lazily
export const _frontmatter = {}


Was this page useful?

Next article

Creating an experiment

To create a new experiment, go to the A/B testing tab in the PostHog app, and click on the New experiment button in the top right. This presents you with a form where you can complete the details of your new experiment: Here's a breakdown of each field in the form: Feature flag key Each experiment is backed by a feature flag . In your code, you use this feature flag key to check which experiment variant the user has been assigned to. The feature flag will be created for you automatically…

Read next article