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

One-Click Deploy

Deploy the example using Vercel:

Getting Started

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/ab-testing-google-optimize ab-testing-google-optimize
# or
yarn create next-app --example https://github.com/vercel/examples/tree/main/edge-functions/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:

npm install
npm run dev

# or

yarn
yarn 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.