- Optimizely Web Experimentation
- Optimizely Personalization
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 begin downloading earlier than if it was being downloaded directly from Optimizely Web Experimentation.
This article walks you through setting up CDN self-hosting with Cloudflare, using a standard or custom Optimizely Web Experimentation snippet.
Self-hosting using a standard snippet
If you do not already know your snippet path, follow the steps outlined in the implement the snippet article to retrieve it.
Add the self-hosted snippet
If the Optimizely Web Experimentation snippet is already installed on your page, you will need to remove it and replace it with the new script tag that references your self-hosting path.
If you are new to Optimizely Web Experimentation, 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/<your_snippet_id>.js"></script>
where <your_snippet_id> is replaced with the snippet ID for your project.
Example:
<script src="https://cdn.optimizely.com/js/123456.js"></script>
should now be:
<script src="/optimizelyjs/123456.js"></script>
Repeat this step for any additional basic snippets 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 Web Experimentation snippet.
Click the Workers icon to begin creating the necessary Cloudflare script and route.
Script
You will 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 snippet ID to the script), or you can write your own. The below script was written for 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))
})
When you are 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. Add the following path:
*<your_website_url_here>/optimizelyjs/123456.js
Do not forget to associate your script with this new route.
Self-hosting with a custom snippet
If you currently use the original snippet, you can create an exact copy using the custom snippet process. Follow the procedure described in that article using this list of configuration options:
-
From the Type drop-down list, 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 already use custom snippets, you do not have to create a new one. Make a note of your snippet key, 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 Web Experimentation account ID. On your CDN, this verifies that all content is being served from your Optimizely Web Experimentation account.
While in Optimizely Web Experimentation, go to Account Settings > Plan. Find your account ID and make a note of it, as you will use it later in the configuration.
Add the self-hosted snippet
If the Optimizely Web Experimentation snippet is already installed on your page, you will need to remove it and replace it with the new script tag that references your self-hosting path.
If you are new to Optimizely Web Experimentation, 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 will 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 are 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. Add the following path:
*<your_website_url_here>/optimizelyjs/*
Do not forget to associate your script with this new route.
Please sign in to leave a comment.