Before launching tests on your website, you must install Kameleoon script. This script must be added at the <head> tag of the source code of your site. It contains your unique code site. No worries: we will guide you step by step; and our adaptable solution will take into account all the peculiarities of your website.
If your plan allows you to do so, you can set up multiple sites with your Kameleoon account. This can be particularly useful for testing your website and mobile version or if you want to first test Kameleoon on your pre-production site.
When installing Kameleoon on your site, you have the choice between three types of installation:
We will see in the following article how to proceed with the custom installation of Kameleoon.
By choosing the custom installation, several installation options are available. Their sequence follows this pattern:
Choosing your installation method
During a custom installation, you have a choice of two installation methods. You can either directly add the script in the html code of your pages (recommended method), or use a tag manager.
Adding the script directly into the html code of your pages
This installation method is the one we recommend at Kameleoon. It avoids any performance concerns that may be related to the use of a tag manager. With this method, you put the Kameleoon script yourself in the right place within the pages of your site.
This installation option gives you the choice between three types of scripts: asynchronous with anti-flicker, asynchronous or synchronous. We will treat this topic a little further to help you make the right choice!
Using a tag manager
Kameleoon is compatible with all major Tag Management Systems (Google Tag Manager, Tag Commander, Eulerian Tag Master). However, if possible, we recommend to install Kameleoon directly in the source code of your website, and not via a TMS. The reason for this is again related to the flicker effect. Using a TMS delays the load of 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 to load Kameleoon, which can add a latency period.
If you use a Tag Management System, you should not use the asynchronous with anti-flicker script as it is not designed to work within a TMS. You can either use the standard asynchronous script or the synchronous one. However, inside a TMS, loading synchronously is not possible, so the synchronous code will act as the asynchronous one.
Enable 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 they 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 variant of an A/B test.
If you enable cross domain tracking when you install your site, you will find an option in the general configuration of your site allowing you to specify the domains allowed in the 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 automatically be included.
Choosing a type of script
If you have enabled cross domain tracking, the script types can be :
If you have not activated cross domain tracking, you have the choice of 3 possibilities:
Iframe HTML (asynchronous loading with anti-flicker)
Here are the different ways of installing Kameleoon along with their respective advantages and disadvantages:
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. Thus, if one of the scripts blocks, the page remains blank.
This ensures that page loading is not blocked while scripts are downloaded by the browser. In addition, ideally, scripts that are important should be loaded at the top of the page, and scripts that are less important or that can afford to wait should be loaded at the bottom.
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: the user can see for a few seconds the original page before it is replaced by the variant (in the case of an A / B test) or the custom page (in the case a customization), the time that the Kameleoon script is fully loaded.
Asynchronous loading with anti-flicker
If you use cross domain setup
Recommended integration method, the Dual method provides significant improvements over the Standalone Iframe method and also adds ITP (Intelligent Tracking Prevention) prevention support.
What is ITP?
For further information, please read this article.
Dual method installation
Set up your installation :
The timeout after which the page is displayed even if Kameleoon is not yet ready, is customizable and controlled by the variable kameleoonLoadingTimeout in the script below. Its default value is set at 1000ms.
If a timeout indeed occurs, the original, unmodified version of the page is instantly displayed, and Kameleoon continues to try loading in the background. You can choose what happens if/when Kameleoon finally loads.
You can host the script on the Kameleoon CDN or on your own CDN. Be aware that Kameleoon automatically offers a CDN based on your package: a basic CDN (static.kameleoon.com) and a high-performance CDN (static-bp.kameleoon.com) that loads the script faster on your pages (recommended for high traffic sites). If you have changed plans in the meantime, consider changing your installation to access the high-performance CDN (modifying it in the source code is not enough).
The Standalone Iframe method also uses asynchronous loading and reduces the Flicker effect. It stands out mainly because it supports, unlike others, our cross-domain tracking technology.
Note : This method is obsolete because it does not allow to manage the ITP. We invite users of this method to migrate to the Dual method.
Optimum location for the script
Kameleoon must be loaded and executed as soon as possible in order to avoid the flicker effect.
Knowing that the browsers load and execute scripts (and other resources, such as CSS style sheets) in their order on the HTML page, we recommend to place the script as high as possible on the HTML code.
The specific Kameleoon script of your website appears. Copy it and paste it just after the <head> tag of your site’s pages.
Once the Kameleoon script is copied to your web pages, save them and upload them to your server. You can then click on “Continue”.
Note : If you do not know how to integrate this script, let your developer do it by clicking on “Transfer to my 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 has not been able to detect the script, make sure that it is present on your site, otherwise the experiments created on Kameleoon will not be able to be launched on your site. If the script is present and correctly integrated, you can skip the verification step to validate the installation.
For more information on installation tags, do not hesitate to consult the developer documentation.