AB testing with Statsig

In this demo we use Statsig's Edge SDK to pull experiment variant 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 maintain the odds in 50/50.

Buckets are statically generated at build time in a /[bucket] page so its fast to rewrite to them.

The middleware implementation is in pages/_middleware.ts:

import { NextRequest, NextResponse } from 'next/server'
// `statsig-node` also works in the V8 environment of Edge Functions import statsig from 'statsig-node'

// Store a cookie for the user const UID_COOKIE = 'uid'

export async function middleware(req: NextRequest) {
// Clone the URL   const url = req.nextUrl.clone()

// Just run for the / path   if (req.nextUrl.pathname !== '/') {
    return NextResponse.next()
  }

// Initialize the statsig client, rules are fetched in this step // and saved in memory for reuse in subsequent requests   await statsig.initialize(process.env.STATSIG_SERVER_API_KEY as string, {
// We only want to wait at a max 300ms for statsig to respond     initTimeoutMs: 300,
  })

// Get users UID from the cookie   let userID = req.cookies[UID_COOKIE]

// Set a userID if not present   if (!userID) {
    userID = crypto.randomUUID()
  }

// Get the experiment from statsig   const experiment = await statsig.getExperiment({ userID }, 'new_homepage')

// Get bucket from experiment   const bucket = experiment.get('name', 'a')

// Change the pathname to point to the correct bucket   url.pathname = `/b`

// Create a response   const response = NextResponse.rewrite(url)

// Set cookie if not present   if (!req.cookies[UID_COOKIE]) {
    response.cookie(UID_COOKIE, userID)
  }

// Return the response   return response
}

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

bucket: b

Using metrics in your experiments

Statsig Metrics are a way to track events that happen in your site. To enable them we use the StatsigProvider in pages/_app.tsx:

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

function App({ Component, pageProps }: AppProps) {
  const Layout = getLayout<LayoutProps>(Component)

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

  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 use Statsig.logEvent to track events during experiments:

import { Statsig } from 'statsig-react';

...

export default function MyComponent(): JSX.Element {

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