Optimizely Web Experimentation self-hosting for Fastly users

  • Updated
This topic describes how to:
  • Set up CDN self-hosting using Fastly

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 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 the process of setting up CDN self-hosting with Fastly.

Self-hosting using the standard snippet

If you do not already know your snippet path, please follow the steps outlined in this 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, 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/<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 you may have across your site.

Fastly configuration requirements

This stage of the configuration process will be done in Fastly via the creation of an origin host and two content headers.

Create the origin host

  1. Navigate to Service configuration > Hosts.  Click Create host.

  2. On the Create a host screen, create a new condition to target your new Optimizely snippet.

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

  4. In the Apply if box, type: req.url ~ "^/optimizelyjs/<your_snippet_id>.js"

  5. Save your new condition and apply it to your new host.

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

  • Name: cdn.optimizely.com

  • Address: cdn.optimizely.com

  • Certificate hostname: cdn.optimizely.com

Configure header for host

Next, you will need to create headers to specify how you want content served to your users.

  1. In your configuration, click Content  > Create Header.

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

Be sure your header is configured in the following way:

  • Name: cdn.optimizely.com Host

  • Type / Action: Request   - Set

  • Destination: http.Host

  • Source: “cdn.optimizely.com”

  1. Click Create when you are done to save your header.

Configure base header

The final step is creating a second header to modify the base of the request.

  1. In your configuration, click Content  > Create Header.

  2. Select the condition you built for the host to continue to target the new Optimizely Web Experimentation snippet on your site.

  3. Make sure 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>/

  1. When you are done, click Create to save your header.

Once you are done creating your origin host and two content headers, remember to activate your new configuration to allow it to take effect.

Self-hosting with a custom snippet

If you are 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 have chosen for your original snippet.

If you are already using custom snippets, you do not 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 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, 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.

Fastly configuration requirements

This stage of the configuration process will be done in Fastly, via the creation of an origin host and two content headers.

Create the origin host

  1. Navigate to Service configuration > Hosts.  Click Create host.

  2. On the Create a host screen, create a new condition to target your new Optimizely snippet.

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

  4. In the Apply if box, type: req.url ~ "^/optimizelyjs/"

  5. Save your new condition and apply it to your new host.

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

  • Name: cdn.optimizely.com

  • Address: cdn.optimizely.com

  • Certificate hostname: cdn.optimizely.com

Configure header for host

Next, you will need to create headers to specify how you want content served to your users.

  1. In your configuration, click Content Create Header.

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

Be sure your header is configured in the following way:

  • Name: cdn.optimizely.com Host

  • Type / Action: Request   - Set

  • Destination: http.Host

  • Source: “cdn.optimizely.com”

  1. Click Create when you are done to save your header.

Configure base header

The final step is creating a second header to modify the base of the request.

  1. In your configuration, click Content Create Header.

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

  3. Make sure your header configuration matches these specifications:

  • Name: cdn.optimizely.com base

  • Type / Action: Request   - Regex

  • Destination: url

  • Source: req.url Would be a variable

  • Regex: ^/optimizelyjs/

  • Substitution: /public/<your_account_number>/

  1. When you are done, click Create to save your header.

Once you are done creating your origin host and two content headers, remember to activate your new configuration to allow it to take effect.