Skip to main content

Application file self-hosting with Fastly CDN

This article aims to provide a quick guide to self-hosting Kameleoon application file for Web Experimentation using Fastly CDN. Hosting the Kameleoon application file on Fastly can give noticeable performance boost, by removing the additional DNS query and SSL handshake needed if you use the Kameleoon CDN (Cloudflare).

Fastly configuration​

Log in to your Fastly account and create an origin host and two content headers as follows:

Create the origin host​

  1. Navigate to the tab Service configuration and click on the left entry Origins > Hosts. Click Create host and create a new condition to target your Kameleoon Application file. Give it a descriptive name, such as Kameleoon JavaScript Application File.
  2. In the Apply if box, provide this condition req.url ~ "^/kameleoon/kameleoon.js"
  3. Save your new condition to apply it to your new origin host.
  4. Apply the following configuration parameters to your origin host, where YOUR_SITECODE is replaced with your Kameleoon Project ID (please follow the steps outlined in this article to retrieve it):
  • Name: YOUR_SITECODE.kameleoon.io
  • Address: YOUR_SITECODE.kameleoon.io
  • Certificate hostname: YOUR_SITECODE.kameleoon.io

Origin host configuration

note

Note: The domain for your Kameleoon scripts may vary from one project to another. Your projects may be hosted on either kameleoon.eu or kameleoon.io depending on their creation date. Make sure you use the domain displayed in your project in the Kameleoon App.

Create the headers​

You will need to create headers to specify how you want content served to your users from your website:

  1. Click on the left entry Content > Headers. Click Create a header.
  2. Attach the same condition you built for the host to target the new Kameleoon JavaScript Application File on your site.
  3. Give your header a name (eg. YOUR_SITECODE.direct.kameleoon.io host) and make sure it is configured as follow, where YOUR_SITECODE is replaced with your Kameleoon Project ID.
  • Type / Action: Request - Set
  • Destination: http.Host
  • Source: "YOUR_SITECODE.direct.kameleoon.io"
  1. Click Create to save your header.

Header 1 configuration

Before activating your new configuration, you need to create a second header to modify the base of the request

  1. Click Create a header
  2. Attach the same condition you built for the host to target the new Kameleoon JavaScript Application File on your site.
  3. Give your header a name (eg. YOUR_SITECODE.direct.kameleoon.io base) and make sure it is configured as follow, where YOUR_SITECODE is replaced with your Kameleoon Project ID.
  • Type / Action: Request - Regex
  • Destination: url
  • Source: req.url
  • Regex: ^/kameleoon/kameleoon.js
  • Substitution: /kameleoon.js?uncompressed=true
  1. Click Create to save your header.

Header 2 configuration

Select compression format​

To enable compression, start by selecting a compression format using the steps below:

  1. Click the left entry Content.
  2. Scroll to the Compression area. The Compression controls appear.
  3. Select Use Brotli compression when available to use Brotli compression by default for browsers that support it.

Compression configuration

note

Remember to activate your new fastly configuration to allow it to take effect before updating your source code.

Add the Kameleoon snippet in your source code​

note

Refer to this article to understand how to implement Kameleoon on your website.

The final step is to replace the default Kameleoon Application JavaScript URL in the installation tag by your Fastly URL. For instance, let's say you are using the JavaScript File (Asynchronous Loading with Anti-Flicker) implementation method. The Kameleoon application file is by default hosted on //SITE_CODE.kameleoon.io/kameleoon.js. You just need to change this URL in the installation tag, replacing it with your own Fastly URL.