Installation guide

3

min

quiz

Be careful! All our scripts have recently changed in order to adapt to the implementation
of Intelligent Tracking Prevention (ITP) by some browsers
Old tags are still supported for now.
However, once you changed the script in the back-office, you won't be able to recover it.

 

What is ITP?

Apple’s ITP aims to increase user privacy by preventing unwanted tracking of users by websites and the various scripts installed on them. It is present on all Safari browsers. The latest version (2.1) introduces major restrictions on the functioning of browsers and applications using JavaScript, especially regarding cookies. It strongly affects web analytics software (such as Google Analytics) and A/B testing tools.


Before launching tests on your website, you must install the Kameleoon script. This script has to be added at the <head> tag of the source code of your website. It contains your unique website code. Don’t worry: we can  guide you step by step; and our adaptable solution will take all the distinctive features of your website into account.

If your package allows you to do so, you can set up multiple websites with your Kameleoon account. This can be particularly useful for testing your website and mobile version or if you want to test Kameleoon on your pre-production website first.

Several setup options are available. Their sequence follows this pattern:

At any time, if you have any doubts or difficulties, don’t hesitate to contact your developer by clicking on the corresponding button at the bottom of the setup page. The necessary information will then be sent to them so that they can help you.

 

Where to configure the setup of your website?

In your Kameleoon back-office, go to the “My websites” page on the “Configuration” tab in the left-hand side menu.

On this page, you will find a list of the websites added to your Kameleoon account.

The card of a website will already be there by default: this is the website you entered when you registered.

Setup via your website card

On the card assigned to the website, click on “Setup”. A page will open, allowing you to configure your installation.

Setup when adding a new website

To add a new one, click on “New site” (if your package allows it).

In the pop-in that opens, enter the URL of the site you want to add and, if you wish, a description. Then click on “Add”.

A new page will open and guide you through the installation of the Kameleoon’s script.

Modification of the setup

To modify the installation of an already added and installed website, click on “Setup” on the the website card.

At the bottom of the page that opens, click on “Modify setup”.

A pop-in alert will then open.

Confirm your choice to access the setup interface of the Kameleoon script.

 

Step 1: Choosing your setup options

In the successive drop-down menus, choose your setup options.

Setting up Kameleoon with/without a tag manager

Adding the script directly to the html code of your pages

We recommend this installation method at Kameleoon. It avoids any performance issues related to the use of a tag manager. With this method, you put the Kameleoon script in the right place yourself, within the pages of your website.

Using a tag manager

Kameleoon is compatible with all the major Tag Management Systems (Google Tag Manager, Tag Commander, Eulerian Tag Master). However, if possible, we recommend that you install Kameleoon directly in the source code of your website and not via a TMS. The reason for this is the : using a TMS delays loading for Kameleoon and increases flickering. This is especially problematic if your TMS is loaded at the bottom of your HTML page. Moreover, the tag manager needs to be loaded first in order to load Kameleoon, which can add a latency period.

If you use a Tag Management System, you should not use the asynchronous script with anti-flicker as it is not designed to work within a TMS.

Selecting an installation tag

This option is only available if you do not use a tag manager (recommended method).

If you have chosen to add the script directly to the html code of your pages, this installation option gives you the choice between three types of loading.

Synchronous loading

The scripts of the page are loaded one after the other following their order in the code. The page only appears once each script is loaded. So, if one of the scripts blocks, the page remains blank.

Asynchronous loading

For modern websites loading an important number of JavaScript files, best practice suggests that every script should be loaded asynchronously.

This ensures that page loading is not blocked while scripts are being downloaded by the browser. In addition, ideally, scripts that are important should be loaded at the top of the page, whereas scripts that are less important or that can wait should be loaded at the bottom of the page.

A script is loaded asynchronously when the browser doesn’t wait for the script to load to display the requested page to the user. Consequently, an asynchronous script loads in parallel with the loading of the page, and doesn’t prevent it from being displayed.

This can cause a flicker effect: for a few seconds, the user can see the original page before it is replaced by the variation (in the case of an A / B test) or the custom page (in the case a personalization) when the  Kameleoon script has fully loaded.

Asynchronous loading with anti-flicker

This integration simulates a blocking effect, preventing the loading of the page until the Kameleoon JavaScript is received by the browser. This is done in order to mitigate the flickering effect, while ensuring that if the script takes a long time to download, the page will be displayed.

Enabling or disabling cross domain tracking

If your package includes it, you can enable cross domain tracking by selecting “Yes” in the “Activate cross domain tracking” drop-down menu. This option makes it possible to track visitors on different domains (example.fr and example.org), subdomains (example.fr and payment.example.org), or on different protocols http and https.

If you do not activate it, we will not be able to track visitors from one domain to another: they will be considered as new visitors when they arrive on another domain and will be exposed again to personalization or to another variation of an A/B test.

If you enable cross domain tracking when you install your website, you will find an option in the general configuration of your site allowing you to specify the domains authorized in cross-domain tracking.

By default, all domains can load your Kameleoon script and access the data associated with your users (such as custom data), which can create a risk. If you want to allow access to Kameleoon only on a specific list of domains, enter them here. For each added domain, all subdomains will be included automatically.

Selecting a hosting for the Kameleoon application file

You can choose to host the application file yourself or let Kameleoon host it. Select the option that best suits you from the drop-down menu.

If you select “Yes”, you will be asked to enter the URL of your CDN.

Once these steps have been completed, click on “Continue” to access the second phase of the setup.

 

Step 2: Copying the code

The Kameleoon script specific to your website will appear.

The detailed instructions on the page depend on the options you selected in Step 1.

It is very important that this script is copied before any other tag, to load your variation as soon as possible and thus avoid the flicker effect.

Once the Kameleoon script is copied to your web pages, save them and transfer them to your server. You can then click on “Validate”.

Note : If you don’t know how to integrate this script, let your developer do it by clicking on “Forward to your developer”.

Kameleoon then makes sure that the script is present and that everything is in order. The verification process takes a few seconds.

If Kameleoon warns you that it could not detect the script, make sure that it is present on your website, otherwise the experiments created on Kameleoon will not be launched on your website. If the script is present and correctly integrated, then you can skip the verification step to validate the installation.

 

For more information on installation tags, do not hesitate to consult the developer documentation section.