Optimizely Web Experimentation self-hosting for Akamai users

  • Updated
Optimizely Web Experimentation

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 the process of setting up CDN self-hosting with Akamai using either a custom snippet or a standard snippet.

Self-hosting with the standard snippet

If you do not already know your snippet path, 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, 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.

Add a rule to your Akamai configuration

The final step in this process is to add a new rule to your Akamai configuration. You will have to complete this process for each standard snippet you plan to use on your site.

Add a new rule criteria

First, create a new criteria that will apply the rule on paths that match your Basic Snippet. Ex: “/optimizelyjs/123456.js”. This is the path you should have included in the new snippet on your site.

Add new behaviors

Next, add two behaviors: one targeting the origin server, and one modifying outgoing request path behavior.

Origin server

The new origin server behavior should change the value of Origin Server Hostname to cdn.optimizely.com and set the Forward Host Header value to Origin Hostname. This will modify the request going from the CDN to the browser.

Modify Outgoing Request Behavior

At this point, you will need to replace part of the incoming path, to ensure the request from the snippet on your page is directed to its location in Optimizely Web Experimentation. Ensure your configurations match these specifications:

  • Action – Replace part of the incoming path.

  • Find what/optimizelyjs/<your_project_id>.js.

  • Replace with – /js/<your_project_id>.js.

  • Occurrences – All.

  • Keep the query parameters –Yes.

This behavior will look for any requests including /optimizelyjs/<your_project_id>.js  and replace that string with a new path, which should look like /js/<your_project_id>.js.

Make sure you configure your new behavior to match the options shown above for the Action, Find what, Replace with and Occurrences fields.

TTL Setting Preservation

To ensure that Akamai respects the original TTL being set on your Optimizely Web Experimentation project settings, you must create one additional behavior for caching.

Your new caching behavior should be configured to match these options:

  • Caching Option – Honor Origin Cache-Control and Expires.

  • Force Revalidation of Stale Objects – Always revalidate with origin.

  • Default Max-age – 120 seconds (This is the default on the Optimizely CDN).

  • Honor Private? – No.

  • Honor Must-Revalidate? – No.

Your downstream caching behavior configuration options should match these:

  • Caching Option – Allow Caching.

  • Cache Lifetime – Full edge TTL (max-age).

  • Send Headers – Send same headers as origin.

  • Mark as Private – Off.

Finally, save this new rule. You will now be able to leverage your HTTP/2 configuration to request Optimizely Web Experimentation.

Self-hosting with a custom snippet

The process for setting up self-hosting is somewhat different when using a custom snippet. Please read this section carefully.

Create a custom snippet

To take advantage of CDN self-hosting, you will need to use an Optimizely Web Experimentation 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.

mceclip0.png

Add the self-hosted snippet

If the Optimizely Web Experimentation snippet is already installed on your page, you must 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.

Add a rule to your Akamai configuration

The final step in this process is to add a new rule to your Akamai configuration. Read on to find out how.

Add a new rule criteria

First, create a new criteria that will apply the rule on paths that match “/optimizelyjs/*”.  This is the path you should have included in the new snippet on your site.

Add new behaviors

Next, add two behaviors: one targeting the origin server, and one modifying outgoing request path behavior.

Origin server

The new origin server behavior should change the value of Origin Server Hostname to cdn.optimizely.com and set the Forward Host Header value to Origin Hostname. This will modify the request going from the CDN to the browser.

Modify Outgoing Request Behavior

At this point, you will need to replace part of the incoming path, to ensure the request from the snippet on your page is directed to its location in Optimizely Web Experimentation. Ensure your configurations match these specifications:

  • Action Replace part of the incoming path

  • Find what/optimizelyjs/

  • Replace with/public/<your_account_number>/

  • Occurrences – All

  • Keep the query parameters – Yes

This behavior will look for any requests, including /optimizelyjs/ and replace that string with a new path, which should look like /public/<your_account_number>.

Make sure you configure your new behavior to match the options shown above for the Action, Find what, Replace with, and Occurrences fields.

TTL Setting Preservation

To ensure that Akamai respects the original TTL being set on your Optimizely Web Experimentation project settings, you must create one additional behavior for caching.

Your new caching behavior should be configured to match these options:

  • Caching Option – Honor Origin Cache-Control and Expires.

  • Force Revalidation of Stale Objects – Always revalidate with origin.

  • Default Max-age – 120 seconds (This is the default on the Optimizely Web Experimentation CDN).

  • Honor Private? – No.

  • Honor Must-Revalidate? – No.

Your downstream caching behavior configuration options should match these:

  • Caching Option – Allow Caching.

  • Cache Lifetime – Full edge TTL (max-age).

  • Send Headers – Send the same headers as origin.

  • Mark as Private – Off.

Finally, save this new rule. You can now leverage your HTTP/2 configuration to request Optimizely Web Experimentation.