Self-host with Fastly

11 min

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.

Create an origin host and two content headers in Fastly.

Create the origin host

Go to Service configuration > Hosts. Click Create host.

Create a condition to target your Optimizely snippet.

Give it a descriptive name, such as Path Match - Optimizely JS.

Enter req.url ~ "^/optimizelyjs/\<your_snippet_id>.js" for Apply if.

Save your condition and apply it to your new host.

With the condition applied, apply these configuration parameters to your host:

Name – cdn.optimizely.com

Address – cdn.optimizely.com

Certificate hostname – cdn.optimizely.com

Configure header for host

Create headers to specify how you want content served to your users.

Click Content > Create Header in your configuration.

Select the condition you built for the host to continue to target the snippet on your site. Ensure your header is configured in the following way:

Name – cdn.optimizely.com Host

Type/Action – Request - Set

Destination – http.Host

Source – "cdn.optimizely.com"

Click Create when you are done to save your header.

Configure base header

Create a second header to modify the base of the request.

Click Content > Create Header in your configuration.

Select the condition you built for the host to continue to target the snippet on your site.

Ensure your header configuration matches these specifications:

Name – cdn.optimizely.com base

Type/Action – Request - Regex

Destination – url

Source – req.url

Regex – ^/optimizelyjs/123456.js

Substitution – /js/<your_snippet_id>/

Click Create to save your header.

Remember to activate your new configuration to let it take effect.

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.