Optimizely will be sunsetting Full Stack Experimentation on July 29, 2024. See the recommended Feature Experimentation migration timeline and documentation.

Dev GuideAPI ReferenceUser Guide
Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubNuGetDev CommunitySubmit a ticketLog In
GitHubNuGetDev CommunitySubmit a ticket

Vercel Functions

Example for running Optimizely Full Stack feature flags and experiments using Vercel Functions.

Suggest Edits

Vercel Functions

Vercel Functions lets you deliver content to your site's visitors with speed and personalization. They are deployed globally by default on Vercel's Edge Network and enable you to move server-side logic to the Edge, close to your visitor's origin.

You can use Optimizely Feature Flags at the edge with NextJS applications deployed on Vercel. This example uses Optimizely Javascript SDK inside a Vercel Function for you to start implementing experimentation and feature flagging for your experiences at the edge. For a general guide to getting started with the Optimizely platform, this can be combined with the steps outlined in the JavaScript Quickstart.

Auto update with Optimizely Webhooks and Vercel Functions

This example fetches the latest datafile from the Optimizely CDN during every build. Deploy Hooks from Vercel can be used with Optimizely Webhooks to keep the application up to date with the latest changes in your Optimizely project.

Identity Management

Optimizely's Full Stack SDKs require a user-provided identifier to be passed in at runtime to drive experiment and feature flag decisions. This example generates a unique ID, stores it in a cookie, and reuses it to make the decisions sticky. Another common approach would be using an existing unique identifier within your application.

Bucketing

For information on how Optimizely Full Stack SDKs assign users to feature flags and experiments, see the documentation on how bucketing works.

Demo application

In the following example, you can create a demo application using Next.js. An example of this demo application is available on Vercel's GitHub.

Prerequisites

You need these prerequisites to use this example:

  • An Optimizely account with Full Stack Experimentation.
  • Have NPM or Yarn installed locally.

Create a Deploy Hook in Vercel

  1. Go to the Settings tab in your Vercel deployment.
  2. Look for the Deploy Hooks section and create a Hook.
  3. This will generate a URL that can be used to trigger a rebuild of the deployment.

Create a Webhook in Optimizely

  1. Follow the instructions to create a Webhook in your Optimizely project.
  2. Use the Deploy Hook URL Generated from the previous section to create the Optimizely Webhook.

How it works

When a user makes a change to the Optimizely Project using the UI, the Webhook hits Vercel's Deploy Hook URL, which triggers a new build on Vercel. Every new build fetches the latest version of the Optimizely datafile and uses it in the application.

Clone and deploy locally

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

npx create-next-app@latest

or

yarn create next-app

🚧

Important

Before running locally, follow the quickstart for the JavaScript SDK to create the following:

  • An Optimizely account.
  • At least one Feature Flag.
  • Your Optimizely SDK key.

Generate the Next.js app using this example:

npx create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely

or 

yarn create-next-app --example https://github.com/vercel/examples/tree/main/edge-functions/feature-flag-optimizely feature-flag-optimizely

Create a local environment file from the example and add your Optimizely SDK key:

cp .env.example .env.local

Run Next.js in development mode:

npm install
npm run dev

or

yarn  
yarn dev

Finally, deploy your example app to the cloud following the Vercel Documentation.

Additional resources

Updated 4 days ago