A/B Testing with Google Optimize

Google Optimize is Google' optimization tool and A/B testing solution, natively integrated with Google Analytics. In this example we'll do A/B testing with Optimize experiments at the edge.

By A/B testing directly on the server-side, you'll reduce layout shift from client-loaded experiments and improving your site's performance with smaller JavaScript bundles.

Demo

https://edge-functions-ab-testing-google-optimize.vercel.app

How to Use

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

One-Click Deploy

Deploy the example using Vercel:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-google-optimize ab-testing-google-optimize

middleware.ts loads the experiments using a pre-defined JSON file (lib/optimize-experiments.json), it currently has to be edited manually in order to add the experiments created in https://optimize.google.com.

Run Next.js in development mode:

pnpm dev

Once the page loads (http://localhost:3000) the layout will load the optimize.js script using your google tracking id, and the pages will register events for the current experiment and variant.

To create your own experiments you'll need an account with Google Optimize. Once that's done, copy the .env.example file in this directory to .env.local (which will be ignored by Git):

cp .env.example .env.local

Then open .env.local and set the environment variables to match the ones for your Google Optimize account.

Deploy it to the cloud with Vercel (Documentation).