A/B testing installation

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>
<<<<<<< Updated upstream
    !(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' })
=======
    !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: '<ph_client_api_host>', person_profiles: 'identified_only'})
>>>>>>> Stashed changes
</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.

Option 1: Add the JavaScript snippet to your HTML Recommended

Option 2: Install via package manager

Questions?

Was this page useful?

Creating an experiment