Installation instructions
Optimizely Edge Delivery lets you execute Optimizely Web experiments on Cloudflare Workers.
For help with installation, see the demo walkthrough below and follow the steps in this article.
Prerequisites
- Have a Cloudflare account.
- Install the Wrangler CLI.
- Route your website through Cloudflare.
- Have an Optimizely Web Experimentation account.
- Create an experiment.
Quick Start
- Clone the Edge Delivery repository and go to the templates/edge-delivery-starter directory.
cd templates/edge-delivery-starter- Install requirements.
npm install- Run the Worker locally.
npm run dev This opens your Worker executing in a browser. This loads the website https://example.com/ and executes an experiment that modifies the H1 header text on the edge.
- Modify the SNIPPET_ID and DEV_URL environment variables in the wrangler.toml file. The Snippet ID (snippetId) tells which configuration file to use for executing your experiments. The development URL (devUrl) identifies what the SDK should target when testing locally or at your Worker site directly. This project's environment variables are set to an example experiment by default. Modify these to test an experiment against your website.
const options = {
"snippetId": "29061560280",
"devUrl": "https://example.com/"
};- Run npm run dev again to test the changes.
- Log in to your Cloudflare account using OAuth.
wrangler login- Deploy the Worker to your Cloudflare account.
npm run deploy- Add a route for your Cloudflare Worker for the target website you want to proxy. Alternatively, you can add a route to the wrangler.toml before running npm run deploy.
- Go to your website in a browser to see your experiments in action.
Implement in an existing Worker
You can install the Optimizely Edge Delivery SDK in any existing Cloudflare Worker, whether you already route your incoming traffic through a Cloudflare Worker or prefer to start from scratch using Cloudflare's getting started guide.
Install the Edge Delivery SDK
Install the Edge Delivery library using npm:
npm install @optimizely/edge-delivery@latestImplement and execute experiments
applyExperiments
The applyExperiments method executes experiments by using the request information to make experiment bucketing decisions and apply active experiment variations to the control. Any decisions or changes that cannot be made on the edge are packaged together and added to the <head> element for execution on the browser.
import { applyExperiments } from '@optimizely/edge-delivery';
...
await applyExperiments(request, ctx, options);Other configuration options
If you already have a Cloudflare Edge Worker proxying your traffic, you can install and execute experiments in your existing Cloudflare Worker by downloading and installing the library with NPM, adding the import, and passing a Response object as the control in the options parameter.
let control = await fetch(request);
...
const options = {
// Other options
"control": control
};