Self-host with Cloudflare
How to set up self-hosting with Cloudflare for Optimizely Web Experimentation
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 an SSL connection to Optimizely Web Experimentation 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 is no guarantee the script will download earlier than if it was downloaded directly from Optimizely.
Use the standard snippet
See Implement the one-line JavaScript snippet to find your snippet path.
Add the self-hosted snippet
If the Optimizely snippet is installed on your page, you must remove it and replace it with the new script tag that references your self-hosting path. Add this new script tag inside the <head> tag on your page.
The snippet format should be the following:
<script src="/optimizelyjs/<your_snippet_id>.js"></script>
Replace <your_snippet_id> with the snippet ID for your project.
Example
<script src="https://cdn.optimizely.com/js/123456.js"></script>
<script src="/optimizelyjs/123456.js"></script>
Repeat this step for any additional basic snippets you may have across your site.
Build a Cloudflare worker
Build a Clouldflare worker to point to the original request back to your Optimizely snippet.
Click the Workers icon to create the Cloudflare script and route.
Script
You need a script that listens for requests from the /optimizelyjs/ route and replaces it with the one for your snippet.
You can use the script below by adding your snippet ID, or you can write your own. The following script uses an example snippet ID of 123456.
async function handleRequest(request {
const url = "https://cdn.optimizely.com/js/123456.js";
return fetch(url))
}
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
Give your script a descriptive name, such as optimizelyjs, and save it in your worker.
Routes
Specify a route for the worker. Add the following path:
*<your_website_url_here>/optimizelyjs/123456.js
Do not forget to associate your script with this new route.
Use a custom snippet
You can create a copy of the original snippet with a custom snippet. Follow Manage custom snippets with these configurations:
- Select Create a new snippet for a single project for Type.
- Select Include all pages from the selected project (default) to mirror your original snippet under Sources > Pages.
- Select the Settings you chose for your original snippet.
If you already use custom snippets, you do not have to create one. Note your snippet key, as you need it later in the process.
Note
Custom snippets are required due to the additional security they provide. When using a custom snippet, your snippet URL includes your Optimizely account ID. On your CDN, this verifies that all content is being served from your Optimizely account.
While in Optimizely, go to Account Settings > Plan. Find your account ID and note it, as you are going to use it later in the configuration.
Add the self-hosted snippet
If the Optimizely snippet is installed on your page, you must remove it and replace it with the new script tag that references your self-hosting path. Add this new script tag inside the <head> tag on your page.
The snippet format should be the following:
<script src="/optimizelyjs/s/<your_snippet_key>.js"></script>
Replace <your_snippet_key> with the snippet key for your custom snippet.
Example
<script src="https://cdn.optimizely.com/public/123456/s/custom.js"></script>
<script src="/optimizelyjs/s/custom.js"></script>
Repeat this step for any additional custom snippets you may have across your site.
Build a Cloudflare worker
Build a Clouldflare worker to point to the original request back to your Optimizely snippet.
Click the Workers icon to create the Cloudflare script and route.
Script
You need a script that listens for requests from the /optimizelyjs/ route and replaces it with the one for your custom snippet.
You can use the script below by adding your account ID, 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))
})
Give your script a descriptive name, such as optimizelyjs, and save it in your worker.
Routes
Specify a route for the worker. Add the following path:
*<your_website_url_here>/optimizelyjs/*
Do not forget to associate your script with this new route.
Updated about 11 hours ago