Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Optimizely self-hosting for Cloudflare users

 
relevant products:
  • Optimizely X Web Experimentation
  • Optimizely X Web Personalization

THIS ARTICLE WILL HELP YOU:
  • Set up CDN self-hosting using Cloudflare

Self-hosting is ideal for customers who are using both HTTP/2 to serve their website and a CDN.  By self-hosting, you can eliminate a SSL connection to Optimizely while using multiplexing to request the snippet faster.

While self-hosting with an HTTP/1 connection may eliminate an additional DNS lookup and the SSL handshake, there's no guarantee the script will begin downloading earlier than if it was being downloaded directly from Optimizely.

This article walks you through the process of setting up CDN self-hosting with Cloudflare.

Create a custom snippet

To take advantage of CDN self-hosting, you'll need to use an Optimizely custom snippet, which is available to Enterprise-level customers.

If you're currently using the original snippet, you can create an exact copy of it using the custom snippet process. Follow the procedure described in that article, using this list of configuration options:

  • From the Type drop-down, select Create a new snippet for a single project.

  • Under Sources > Pages, select Include all pages from the selected project (default) to mirror your original snippet.

  • Under Settings, select the same ones you've chosen for your original snippet.

If you are already using custom snippets, you don't have to create a new one. Simply make a note of your snippet key instead, as you will need it later in the process.

Custom snippets are required due to the additional security they provide. When using a custom snippet, your snippet URL will now include your Optimizely account ID. On your CDN, this verifies that all content is being served from your Optimizely account.

While in Optimizely, navigate to Account Settings > Plan.  Find your account ID and make a note of it, as you will be using it later in the configuration.

Add the self-hosted snippet

If the Optimizely snippet is already installed on your page, you'll need to remove it and replace it with the new script tag that references your self-hosting path.

If you are new to Optimizely, just add this new script tag in the appropriate spot inside the <head> tag on your page.

The format of this snippet should be:

<script src="/optimizelyjs/s/<your_snippet_key>.js"></script>

where <your_snippet_key>  is replaced with the snippet key for your custom snippet.

Example:

<script src="https://cdn.optimizely.com/public/123456/s/custom.js"></script>

should now be:

<script src="/optimizelyjs/s/custom.js"></script>

Repeat this step for any additional custom snippets you may have across your site.

Build a worker in Cloudflare

The final stage of this process is building a Cloudflare worker to point the original request back to your Optimizely snippet. 

Click the Workers icon to begin creating the necessary Cloudflare script and route.

Script

You'll need a script that listens for requests from the /optimizelyjs/ route, and replaces that route with the one that leads to your custom snippet.

You can use the script below to do this (it works by adding your account ID to the script), or you can write your own.

const accountId = "xxxxxxxxxx";
const scriptRoute = "/optimizelyjs/";

async function handleRequest(request) {
 const parsedUrl = new URL(request.url)
 let path = parsedUrl.pathname.replace(scriptRoute,"")
 const url = "https://cdn.optimizely.com/public/"+ accountId + "/" + path;
 return fetch(url)
}

addEventListener('fetch', event => {
 event.respondWith(handleRequest(event.request))
})

When you're done, give your script a descriptive name, such as optimizelyjs, and save it in your worker.

Routes

Finally, you will need to specify a route for this worker to use.  Add the following path:

*<your_website_url_here>/optimizelyjs/*

In the example below, the script tag would have been placed on www.customer.com.

Don't forget to associate your script with this new route.