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.

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.

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.

Web
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 = {}

Questions?

  • Yarik
    2 months ago

    Tests results Error

    Hi, I’m running a few A/B tests. I checked them a few months ago and got some results. Now, I’m revisiting the A/B tests and see that they are running, but in the Results section, I encounter this error. This error occurs in 2 out of 3 tests. How can I retrieve the results?

    Experiment results could not be calculated
    no viable alternative at input 'SELECT\n countIf(ifNull(equals(step_reached, 0), 0)) AS step_1,\n ,'
  • Suraj
    5 months ago

    User seeing different experiment variants on app restart

    We have integrated the A/B testing along with Analytics although we are not sending any analytics events at the moment. While testing we saw that if a user reopens the app the experiment variants being shown are different at times. Also in the people section we saw that whenever app is restarted a new person is created. What can be the issue here?

    • Suraj
      Author5 months ago

      It was a bug in the app all good here

  • Yousuf
    6 months ago

    Issue with A/B Testing

    Hi Steven, we have implemented A/B testing through PostHog and can see data being tracked in the PostHog dashboard.

    However, when we load the website, everyone sees the variant A although my distribution and rollout is set to 50/50 and no one really sees the variant B.

    Can you please look into this issue for me and let me know what I am doing wrong here?

    I look forward to hearing back from you soon.

    Thanks

  • Václav
    a year ago

    How do I set up an A/B test?

    This page only shows how to add a js snippet on the page. But how do I set up an A/B test??

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