- Optimizely Web Experimentation
- Optimizely Personalization
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 Fastly.
Self-hosting using the standard snippet
If you do not already know your snippet path, follow the steps outlined in the implement the snippet article to retrieve it.
Add the self-hosted snippet
If the Optimizely Web Experimentation snippet is 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, 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 is done in Fastly through the creation of an origin host and two content headers.
Create the origin host
-
Navigate to Service configuration > Hosts. Click Create host.
-
On the Create a host screen, create a new condition to target your new Optimizely snippet.
-
Give it a descriptive name, such as "Path Match - Optimizely JS."
-
In the Apply if box, type:
req.url ~ "^/optimizelyjs/<your_snippet_id>.js"
-
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.
-
In your configuration, click Content > Create Header.
-
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"
-
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.
-
In your configuration, click Content > Create Header.
-
Select the condition you built for the host to continue to target the new Optimizely Web Experimentation snippet on your site.
-
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>/
-
-
When you are done, click Create to save your header.
When you are done creating your origin host and two content headers, remember to activate your new configuration to let 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 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 ones you chose 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.
While in Optimizely, go to Account Settings > Plan. Find your account ID and make a note of it, as you are going to use it later in the configuration.
Add the self-hosted snippet
If the Optimizely Web Experimentation snippet is 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, 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 is done in Fastly, through the creation of an origin host and two content headers.
Create the origin host
-
Navigate to Service configuration > Hosts. Click Create host.
-
On the Create a host screen, create a new condition to target your new Optimizely snippet.
-
Give it a descriptive name, such as “Path Match - Optimizely JS.”
-
In the Apply if box, type:
req.url ~ "^/optimizelyjs/"
-
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.
-
In your configuration, click Content > Create Header.
-
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”
-
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.
-
In your configuration, click Content > Create Header.
-
Select the condition you built for the host to continue to target the new Optimizely snippet on your site.
-
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>/
-
-
When you are done, click Create to save your header.
Please sign in to leave a comment.