Protected: Freemium package
3
min
quiz
This content is password protected. To view it please enter your password below: Password:
Protected: A/B testing package
3
min
quiz
This content is password protected. To view it please enter your password below: Password:
Protected: Predictive package
3
min
quiz
This content is password protected. To view it please enter your password below: Password:
Installation guide – Basic
Before launching tests on your website, you must install the Kameleoon script. This article will guide you through the installation.
If your plan offers this option, you can set up multiple sites with your Kameleoon account. This is particularly useful for testing your website and its mobile version or if you want to test Kameleoon on your pre-production site first.
When installing Kameleoon on your site, you have the choice between three types of installation:
- basic
- premium
- custom
This article shows how to proceed with the basic installation of Kameleoon.
The installation is quick and easy but you will need to change your HTML pages’ source code and add a JavaScript tag, which includes your site code. This script will never change, whichever tests you are running on your website.
You’re not familiar with all these technical terms? You do not know how to install the script on your pages? At any time, you can decide to let your developer take care of the installation by clicking on “Forward to your developer”. All you have to do is enter their contact details in the pop-in and Kameleoon will send them all the necessary information.
Access to the script
To obtain your JavaScript code, please log into your personal space.
In the left side menu go to the “Configuration” menu, then click on “My websites”.
Click on the “Setup” button below the URL of your website.
On this installation page you will find the script to be integrated into your website. Please note that this script contains your unique “site code” and will only work with the corresponding URL.
On the top right of this page, Kameleoon will indicate if the script is installed on your website or not.
Installing the script
Copy the script and paste it in your pages’ source code. To do so, use a source code editor (such as Notepad or Brackets) and open the file generating your pages’ source code. Add this code on all of your website’s pages.
We recommend you add Kameleoon script right after the <head> element of your pages.
Tip: While it is not mandatory to install the script on all of your pages, it is highly recommended. If Kameleoon is installed on only part of your website, you lose features that cover the entire website, such as A/B test targeting options.
Congratulations! You have successfully installed Kameleoon!
Site code
Your site code is unique and is used to identify your website. It is already included in the script so you should not have to worry about it.
However, if you choose an advanced installation of Kameleoon, you will need to insert this code in the script used for the installation.
Retrieving this code is very simple, you will find it in the “Installation” part of your Back-office. It is the highlighted part in the example below:
3
min
quiz
Before launching tests on your website, you must install the Kameleoon script. This article will guide you through the installation.…
Installation guide – Custom
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:
- basic
- premium
- custom
We will see in the following article how to proceed with the custom installation of Kameleoon.
Where to configure the installation of your website?
In your personal space, go to the “My Sites” page of the “Configuration” tab in the left side menu.
On this page you will find the list of websites added to your Kameleoon account.
By default, the map of a site is already there: it is the website that you have entered during your registration.
Installation via your website card
On the map of the site whose address you entered when you registered, click on “Installation”. A page opens, allowing you to configure your installation.
Installation when adding a new website
To add a new one, click on “Add a site” (if your package allows it).
In the pop-in that opens, fill in the URL of the site you want to add and, if you wish, a description. Then click on “Add”.
A new page opens and guides you through the installation of Kameleoon. There are 4 steps.
Modifying the installation of an already setup site
To change the installation of an already added and installed site, click on “Installation” on the map corresponding to the site.
On the page that has just opened, click on “Change installation”.
A pop-in appears to alert you.
Confirm your choice to access the installation interface of the Kameleoon script.
Choosing your type of installation
In the drop-down menu, choose the custom installation.
By default, the installation selected in the drop-down menu is the basic installation. If you want to know the details of a basic installation, see the article dedicated to the basic 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 type can only be “asynchronous with anti-flicker”.
If you have not activated cross domain tracking, you have the choice of 3 possibilities.
Keep in mind that the main problem when using an advanced integration is that it can negatively affect the loading of the script and introduce a flicker effect.
Here are the different ways of installing Kameleoon along with their respective advantages and disadvantages:
| Synchronous loading | Standard asynchronous loading | Asynchronous loading with anti-flicker | |
| Speed | Yes | Yes | Yes |
| Sensibility to incidents | Strong | Weak | Weak |
| Absence of flicker effect | Yes | No | Yes |
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. Thus, 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 be loaded asynchronously.
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
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 flickering effects, while ensuring that if the script takes a long time to download, the page will be displayed.
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).
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.
Ideally, we recommend to place it just after the opening <head> element, before every other JavaScript scripts.
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.
3
min
quiz
Before launching tests on your website, you must install Kameleoon script. This script must be added at the <head> tag…
Setting up a new website
You can set up several websites with your account. It can be very useful if you want to test both your website and its mobile version or if you want to test Kameleoon on your website in pre-production first.
Adding a new website
To add a new website, you must be logged in to your personal space.
Use the left menu to go to “Configuration”, then click on “My websites”.
On this page, you will find the list of the websites you have configured with your account. To add a new one, click on “New site”.
A pop-in displays. Fill in the informations needed: the site URL and a description (optional). Then click on the “Add” button.
Once you have registered your URL, Kameleoon will create a script to install on your website. You can now install Kameleoon on your website with the same method used for your previous websites. For further information about the installation of Kameleoon, please read our installation guides: basic installation or custom installation.
Setting up the website
When you have installed the script on your pages, you can set up your new website. Reporting tools and goals are specifics to a single website, so you will have to set them up for each of your sites.
For further information about reporting tools and goals, please read our article Reporting tools and goals.
3
min
quiz
You can set up several websites with your account. It can be very useful if you want to test both…
User accounts and permissions
You can see all user accounts and their permissions from the “Users and rights” page in your back-office. Any user can visit this page but only “Admin” or “Super-admin” users can make changes on user accounts.
Accès to the “Users and rights” page
To access the “Users and rights” page, you must be logged in to your personal space. Once you are logged in, you will find this page on the “Configuration” section on the left menu.
The page is d i vided into two sections :
- Access to the accounts settings and the general settings to the left
- The selected account’s settings to the right
Click on one of the names to see the personal information and permission of this account.
If you have a “Super-admin” account, you can change these information.
General settings
The « General » tab allows you to set the same settings for all of your accounts. You can select your timezone and enable or disable regular password resets.
User accounts management
Creating a new account
To add a user account, you must be “Super-admin”.
Click on the button below to create a new account, to which you will choose to give full or restricted access to your Kameleoon account.
Deleting an account
To delete an account, you must be “Super-admin”.
First of all, use the list on the left to select the account you want to delete. Then, click on the “Delete the account” button on the bottom of the page.
Permissions
Characteristics
| Admin | Technical | Marketing | Production |
| The admin account can create new user accounts and manage your subscription. |
The technical account has access to website management options, advanced configuration and web analytics management. |
The Marketing account enables to consult the details of every A/B test launched with Kameleoon. |
The production account can activate, or not the launching button in the Kameleoon editor. |
Super-Admin
As a super admin, you can manage all user accounts. This way, you can create or delete an account and change all information such as the name, password, e-mail address and permissions of each user.
3
min
quiz
You can see all user accounts and their permissions from the “Users and rights” page in your back-office. Any user…
Password and personal information
You can update your password and personal information at any moment.
My account page
First, you need to be logged in to your personal space.
Once you are logged in, click on your name on the top of your screen. A drop-down menu appears, allowing you to click on “My account”.
This page allows you to update your name, first name, e-mail address and password.
Updating your information
To change your name, first name or e-mail address, simply type in directly in the fields you want to change.
Then, click on the “Validate” button to save your changes.
Changing your password
To change your password, click on the “Edit” icon on the right of your current password.
Type in your current password, then choose your new password.
Click on the “Validate” button to save your changes.
3
min
quiz
You can update your password and personal information at any moment. My account page First, you need to be logged in…
Advanced configuration options
Several advanced options are available for your website, such as cookies management or behavior in case of timeout. If you want to change the default settings, this article will allow you to manage the different options.
My websites
Access options
To access it, log in to your personal back-office .
Then use the menu on the left to access the “My websites” page of the “Configuration” menu, which groups together all your websites configured with your Kameleoon account.
Add a new site
You can add a new site.
A simple click on this button will open the pop-in.
Search, filter, sort
A search bar, as well as filtering and sorting tools, are also available.
Filter websites by status (Kameleoon enabled/disabled) or by script (script installed/not detected/not installed) and quickly find the one whose configuration you want to view.
You can also sort sites by name (alphabetical order), date added, status (Kameleoon enabled/disabled) or amount of associated experiences. By default, they are sorted in ascending order. To sort them in descending order, click on the green triangle that appears on the right when hovering.
Information and actions on the site
Information
Three sections are accessible from the identification card of your site.
Setup
This page allows you to install the Kameleoon script on your site.
Configuration
This page gives access to advanced configuration options: this is the one that interests us here.
Indicators
This page displays the indicators measured on your site.
When you move the mouse over the card, an information and action bar appears at the bottom:
On the left you will find the number of A/B tests and personalizations created on the site.
On the right, three icons gives you access to three different actions.
Disable/Enable
OR
If Kameleoon is enabled on your website, the displayed button is the “Disable” one. If Kameleoon is disabled then the button is the “Enable” button.
If you choose to disable Kameleoon, a confirmation pop-in will open and ask you to confirm your decision. If you disable Kameleoon, a confirmation message will appear at the bottom of the page and your A/B tests and personalizations will no longer be active on your site; however, your experiments will resume if you reactivate Kameleoon.
Remove
At the click of this button, a pop-in confirmation will appear to ask you to validate your decision or not.
Edit
Once you have identified the website that interests you, click on “Edit” or “Configuration”.
Configuration
The following page is displayed:
It consists of a header, a menu bar and three scrollable sections, accessible in one click:
- General;
- A/B test;
- Personalization.
Header
The header indicates the name of the website.
The “Actions” menu at the top right gives you access to two distinct actions. Click to scroll down.
Enable / Disable Kameleoon
If Kameleoon is enabled on your site, the option is “Disable Kameleoon”. If it’s off, then you can click on “Enable Kameleoon”.
OR
If you choose to disable Kameleoon, a confirmation pop-in will open and ask you to confirm your decision. If you disable Kameleoon, a confirmation message will appear at the bottom of the page and your A/B tests and personalizations will no longer be visible on your site. Your experiments will resume if you reactivate Kameleoon.
Remove site
Click on this option: a confirmation pop-in appears. You will have to re-install entirely the website if you change your mind.
Menu bar
You will find here the three menus “Installation”, “Configuration” and “Indicators”, as well as the possibility of displaying again the page with all your configured websites: “View all sites”.
Website description
You can add a description of your site here.
Behavior if timeout occurs
You can redefine Kameleoon’s behavior when the script exceeds its usual loading time. By default, Kameleoon will eventually launch with a flicker effect.
The available options are:
- Start Kameleoon (with flicker effect);
- Disable Kameleoon for this page;
- Disable Kameleoon for the whole visit.
Data storage
This option allows you to choose where to store data about your A/B tests on the visitor’s computer:
- Standard Cookie: Stores the data in the user’s cookies.
- Custom Cookie: Allows you to customize the user’s cookie. When you click this option, two fields appear. You must then fill in the domain name and the duration. By default, the cookie is positioned on your domain name and its validity is 30 days. You can specify a custom domain name. Do not hesitate to consult our article on this subject.
- Local storage: Stores the data in the local storage of the browser (to know more, consult our article on this subject).
Global custom script
Any JavaScript code you add in this insert will be executed each time the page is loaded, just after loading Kameleoon. This is the solution to add complex tracking code or integration to other solutions.
A/B Test
Editor launching
This option allows you to manage the access to the Kameleoon editor by using the keyboard shortcut Shift + F2. By default, the button is set to “ON”: the option is activated. To disable it, click on the button to switch it to “OFF”.
Result reporting
Enable (“ON”) or disable (“OFF”) the results reporting with this option.
Variation selection script
A variation selection script is a script to force the display of a variation based on specific rules. Enter here the complete the script code to use with Kameleoon.
Necessary reliability for the determination of a winning variation
By changing this percentage, you can set the threshold above which a variation is winning.
Variations that have a lower reliability than the set rate can not be presented as winning ones in your results, regardless of their number of conversions. This has an impact on the results presented by Kameleoon; we therefore recommend that you change this setting sparingly.
To find out more about the reliability rate, visit our lexicon page.
Personalization
Exclude visitors
You can set a percentage of your visitors who will never be exposed to your personalizations.
We recommend keeping a population unexposed, to measure the impact of your personalizations.
Advanced options
By default, Kameleoon allows the display of more than one similar personalization on a page (for example, 2 pop-ins or 2 images inserted in the same place). You can, however, forbid this simultaneous display by switching the “OFF” button to “ON”.
To add animation effects to your personalizations, Kameleoon embeds the jQuery library in the source code of your pages. If you already inject jQuery into your source code, you must disable this option by switching from “OFF” to “ON”.
Once your changes are complete, click the “Validate” button at the bottom of the page to save your settings.
If you want to reset all the default options defined on this site, click on the “Reset” button.
3
min
quiz
Several advanced options are available for your website, such as cookies management or behavior in case of timeout. If you want…
