Set up an A/B Test at The Edge

A/B tests are a great way to test new features on your site. A basic A/B test works by assigning visitors to a particular test "bucket" the first time they visit a site, usually using a random number between 0 and 1.

Visitors can then be redirected to different pages, depending on the bucket and cookie they were assigned.

You could even use A/B testing in combination with Geolocation at The Edge!

import type { Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  // look for existing "test_bucket" cookie
  const bucketName = "test_bucket";
  const bucket = context.cookies.get(bucketName);

  // return here if we find a cookie
  if (bucket) {
    return new Response(`${bucketName} ${bucket} already assigned!`);
  }

  // if no "test_bucket" cookie is found, assign the user to a bucket
  // in this example we're using two buckets (a, b) with an equal weighting of 50/50
  const weighting = 0.5;

  // get a random number between (0-1)
  // this is a basic example and you may want to experiment
  const random = Math.random();
  const newBucketValue = random <= weighting ? "a" : "b";

  // set the new "test_bucket" cookie
  context.cookies.set({
    name: bucketName,
    value: newBucketValue,
  });

  return new Response(
    `You have been assigned ${bucketName} ${newBucketValue}.`,
  );
};

See this in action

• Run the A/B test code, and see which bucket you were assigned!
• The Edge Function code: abtest.ts

Related

• Read more about managing cookies at The Edge
• Read more about Geolocation at The Edge