AB testing with Statsig

In this demo we use Statsig's REST Api at the edge to pull experiment variants and show the resulting allocation. As long as you have a bucket assigned you will always see the same result, otherwise you will be assigned a bucket to mantain the odds specified in the experiment.

Buckets are statically generated at build time in a /[bucket] page so its fast to rewrite to them. Take a look at the middleware.ts file to know more.

Once the page is fully functional we log the exposure for the experiment, this will let Statsig know that the bucket was correctly assigned and the user has been exposed to the experiment. If we don't log the exposure, Statsig won't be able to analyze and track the progress of the experiment.

import statsig from '../lib/statsig-api'

...

useEffect(() => {
  // Log exposure to statsig
  api.logExposure(Cookie.get(UID_COOKIE), bucket, FLAG)
}, [bucket])

You can reset the bucket multiple times to get a different bucket assigned. You can configure your experiments, see diagnostics and results in your account. Statsig console.

bucket: a

Using metrics in your experiments

Statsig Metrics are a way to track events that happen in your site. One way to enable them is to pass the StatsigProvider to _app.tsx.

import Cookies from 'js-cookie'
import { StatsigProvider } from 'statsig-react'

function App({ Component, pageProps }) {
  const Layout = getLayout(Component)

  // middleware will automatically set a cookie for the user if they visit a page
  const userID = Cookies.get(UID_COOKIE)

  return (
    <StatsigProvider
      sdkKey={process.env.NEXT_PUBLIC_STATSIG_CLIENT_KEY!}
      waitForInitialization={true}
      user={{ userID }}
    >
      <Layout title="statsig-metric" path="solutions/statsig-metric">
        <Component {...pageProps} />
      </Layout>
    </StatsigProvider>
  )
}

Now we can tracks events by calling using the Statsig.logEvent function to track events during your experiments.

import { Statsig } from 'statsig-react';

...

export default function MyComponent() {
  return
    <Button
      onClick={() => {
        // this can be any event like adding an item to a cart or clicking a CTA button.
        Statsig.logEvent('button_clicked');
      }}
    />;
}