Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

The availability of features may depend on your plan type. Contact your Customer Success Manager if you have any questions.

Dev GuideAPI ReferenceUser Guide
Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide
GitHubDev CommunityOptimizely AcademySubmit a ticket

Self-host with Fastly

How to set up self-hosting with Fastly for Optimizely Web Experimentation

Suggest Edits

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

  1. Go to Service configuration > Hosts. Click Create host.
  2. Create a condition to target your Optimizely snippet.
  3. Give it a descriptive name, such as Path Match - Optimizely JS.
  4. Enter req.url ~ "^/optimizelyjs/\<your_snippet_id>.js" for Apply if.
  5. 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.

  1. Click Content > Create Header in your configuration.
  2. 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"
  3. Click Create when you are done to save your header.

Configure base header

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

  1. Click Content > Create Header in your configuration.
  2. Select the condition you built for the host to continue to target the snippet on your site.
  3. 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>/
  4. Click Create to save your header.

Remember to activate your new configuration to let it to 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.

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.

Create an origin host and two content headers in Fastly.

Create the origin host

  1. Go to Service configuration > Hosts. Click Create host.
  2. Create a condition to target your Optimizely snippet.
  3. Give it a descriptive name, such as Path Match - Optimizely JS.
  4. Enter req.url ~ "^/optimizelyjs/" for Apply if.
  5. 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.

  1. Click Content > Create Header in your configuration.
  2. 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"
  3. Click Create when you are done to save your header.

Configure base header

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

  1. Click Content > Create Header in your configuration.
  2. Select the condition you built for the host to continue to target the snippet on your site.
  3. Ensure 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>/
  4. Click Create to save your header.

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

Updated about 1 month ago