Skip to content

9d8dev/ab

Repository files navigation

A/B Testing & Experimentation with Statsig, NextJS, and Vercel

Screenshot 2023-07-26 at 10 18 14 AM

This example shows how to do experimentation using Statsig, leveraging Edge Config and Edge Middleware. This example is an updated version of Vercel's Statsig example. It has been updated to use the NextJS 13 App Router.

Overview

The ab-testing-statsig-app-router-template is a simple and efficient way to get started with A/B testing on the Edge with Vercel and NextJS. It is developed and maintained by Ampry and 9d8. Built by Cameron Youngblood and Bridger Tower.

Demo

statsig-ab-testing.vercel.app

Click the Reset Cookie button to refresh the cookie and re-bucket you into a new experiment group.

How to Use

You can choose from one of the following two methods to use this repository:

One-Click Deploy using Vercel:

Deploy with Vercel

or

Clone this Repository

git clone https://github.com/9d8dev/ab-testing-statsig-app-router-template.git

cd ab-testing-statsig-app-router-template

npm install

npm run dev

Setting up environment variables

Login to the Statsig console and enable the pro plan to access experimentation features.

Navigate to Settings -> Keys and Environments. Add all three API keys (client, server, and console) to your env file respectively.

Install the Statsig Vercel Integration for your project. It will give you the Edge Config Connection String and Edge Config Item Key. Place these in your env file respectively.

Creating an Experiment

To create an experiment, sign in to Statsig and navigate to Experiments in the sidebar menu. Create a new experiment and name it whatever you like. Enter additional optional information. At the end of the form, select User ID for the ID Type.

Within your NextJS project, open /lib/constants.ts. Copy the experiment name from Statsig and paste it as the value for the EXPERIMENT constant.

example

EXAMPLE:

export const EXPERIMENT = nextjs_test;

Add a parameter to your experiment called bucket. Name your buckets. In this case, make sure that your control bucket is left blank. It doesn't matter what your name your variation, this page will be statically generated at build time. See image below for example.

Screenshot 2023-07-26 at 9 12 24 AM

When you have completed your configuration, you can start the experiment.

Making Changes to Variations

In this example, the app/[bucket]/page.js file is the variation page whereas the root app/page.js file is the control page. In other words, the root page is your original page while the bucket page contains the changes you want to test. With the configuration in this project, traffic will be split between these two pages. Make any changes to your page in the app/[bucket]/page.js file.

Statsig Events and Metrics

While this example does not yet support metrics, Statsig has a client-side React library for easily managing metrics and custom events. This allows you to send custom client events from pages that are wrapped in the Statsig provider.

Middleware

This example utilizes middleware to direct traffic to the proper variation. See middleware.ts for more details.

Contributions

This project is open for contributions. We look forward to seeing your ideas and improvements.

License

This project is licensed under the MIT License. See the LICENSE file in the repository root for more information.

Contact

For more information, check out the creators at Cameron Youngblood and Bridger Tower. Made by 9d8 and Ampry.