Skip to main content
menu-icon.png

 

x
Optimizely Knowledge Base

Optimizely self-hosting for Fastly users

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

THIS ARTICLE WILL HELP YOU:
  • 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 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 Fastly.

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.

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/"

 


 

  1. 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'll 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>/

The screenshot below shows what this would look like for someone with the account number of 123456:

  1. When you're 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.