Installation du script Kameleoon

Avant de pouvoir lancer des test sur votre site, vous devez installer le script Kameleoon sur vos pages web. Cet article vous accompagnera dans l'installation de ce script.

Installation standard

L'installation est simple et rapide mais vous devez pouvoir accéder au code source des pages HTML de votre site Internet afin d'y insérer un code JavaScript personnalisé. Ce script ne changera pas quels que soient les tests lancés sur votre site Internet. 

Accéder au script 

Pour obtenir votre code JavaScript, connectez-vous à votre espace personnel.

Grâce au menu latéral de gauche, rendez-vous sur la page « Sites configurés ».

Sous l'URL de votre site Internet, cliquez sur « Installation ».

La page d'installation vous permet de récupérer le script à insérer dans le code de vos pages mail. Notez que ce script contient votre « Site code » unique, il ne fonctionnera donc que pour l'URL indiquée.

En haut à droite de cette page, Kameleoon vous indique si le script est bien installé ou non sur votre site.

Installer le script

Copiez le script et collez-le dans le code de vos pages. Pour cela, utilisez un éditeur de code source (comme par exemple Notepad ou Brackets) et ouvrez le fichier qui génère le code source des pages de votre site. Ajoutez ce code sur toutes les pages de votre site.

Nous vous conseillons de rajouter le script de Kameleoon tout de suite après l'ouverture des balises <head> des pages HMTL.

Astuce : il n’est pas obligatoire d’installer le script sur toutes les pages de votre site, mais nous vous le conseillons vivement. En n’installant Kameleoon que sur une partie de votre site, vous vous priveriez de fonctionnalités couvrant le site entier (dans les options de ciblage d'un test A/B, par exemple).

Félicitations, vous avez installé Kameleoon !

Site Code

Votre site code est unique et sert à identifier votre site. Il est déjà inclus dans le script fournis, donc vous ne devriez pas avoir à vous en soucier.

Cependant, si vous choisissez d'installer Kameleoon en mode avancé, vous aurez besoin de récupérer ce code pour pouvoir l'insérer dans le script que vous utiliserez pour l'installation.

Pour cela, rien de plus simple, votre site code se trouve dans le script fourni ! Il s'agit de la partie surlignée dans l'exemple ci-dessous :

Installation avancée

L’intégration de Kameleoon via une balise  <script> a beau être très facile, d’autres situations peuvent se présenter.

Gardez à l'esprit qu'utiliser des options d'intégration avancées peuvent avoir un impact significatif sur le chargement du script Kameleoon et introduire un effet de clignotement notable (« Effet flicker »). Le clignotement signifie que la variante sera chargée après l'affichage de la page originale. Dans la mesure du possible, restez sur la version synchrone du script pour éviter ce problème. Cependant il arrive que la politique des IT soit d'interdire les chargements synchrones d'un script hébergé de façon externe : il est alors possible d'utiliser notre intégration asynchrone. De même vous pourriez avoir besoin de charger Kameleoon via un système de gestionnaire de tags comme Google Tag Manager.

Au bout du compte, le choix du code d'installation représente un compromis entre les exigences de sécurité (aucun impact visible en cas de perturbations sur les serveurs Kameleoon) et de fonctionnalités (absence de clignotement). Kameleoon utilisant un système redondant de CDN, nous sommes convaincus que l'option garantissant l'absence notable de flicker (chargement synchrone) peut être déployée sans risque significatif de sécurité.

Les différents types d'installation de Kameleoon ainsi que leurs avantages et inconvénients respectifs sont résumés ci-dessous :

  Chargement synchrone Chargement asynchrone standard Chargement asynchrone avec anti-flicker
Rapidité Oui Oui Oui
Sensibilité en cas d'incidents Forte Faible Faible
Absence de clignotement Oui Non Oui

Quel que soit le fragment de code présenté dans ce guide, vous devriez toujours installer le code au tout début de la section <head> du code HTML. Il est très important de procéder ainsi avant que les autres ressources ne soient écrites dans le code HTML (comme les fichiers CSS ou JavaScript). Cela n'empêchera pas Kameleoon de fonctionner mais cela augmentera considérablement les chances qu'un effet de clignotement ou qu'un timeout se produise.

Voici un exemple d'une page web correctement taguée avec Kameleoon :

<!DOCTYPE html>
<html>
	<head>
		<title>My title</title>
		<!-- Insert your Kameleoon tag here -->
		<script type="text/javascript" src="//static.kameleoon.com/css/customers/SITE_CODE/0/kameleoon.js"></script>
	</head>
	<body>
		<!-- Insert your remaining HTML code here -->
		<h1>My first heading</h1>
		<p>My first paragraph.</p>
	</body>
</html>

La seule exception à cette règle étant, bien sûr, le recours à un système de gestion de tag, puisque vous ne modifierez pas directement votre code HTML.

Chargement synchrone

Cette méthode d’intégration est celle recommandée par Kameleoon.

Pour installer la version synchrone du script Kameleoon, utilisez le code suivant sans oublier de remplacer la variable SITE_CODE ci-dessous par le code de votre site  :

<script type="text/javascript" src="//static.kameleoon.com/css/customers/SITE_CODE/0/kameleoon.js"></script>

Chargement asynchrone

Pour un site web moderne chargeant un nombre important de fichiers JavaScript, les bonnes pratiques conseillent de charger chaque script de façon asynchrone.

Un script est chargé de façon asynchrone lorsque le navigateur n'attend pas le chargement complet du serveur pour afficher la page demandée au visiteur. Autrement dit, un script asynchrone se charge en même temps que la page et ne bloque pas l'affichage de celle-ci.

Nous proposons deux façons différentes de charger Kameleoon en mode asynchrone.

Chargement asynchrone standard

Pour installer la version asynchrone du script Kameleoon, sans aucun traitement pour temporiser l'effet de clignotement, utilisez le code suivant sans oublier de remplacer la variable SITE_CODE ci-dessous par le code de votre site :

<script src="//static.kameleoon.com/css/customers/SITE_CODE/0/kameleoon.js" async="true"></script>

Chargement asynchrone avec anti-flicker

Cette intégration simule un effet bloquant en cachant l'affichage de la page jusqu'à l'arrivée du script Kameleoon. Cela va permettre de réduire l'effet de clignotement, tout en garantissant qu'en cas de réception trop longue, la page sera malgré tout affichée.

Le délai à partir duquel la page est affichée même si Kameleoon n'a pas fini le chargement est contrôlé par la variable kameleoonLoadingTimeout dans le script ci-dessous. Sa valeur par défaut est de 1000ms.

Si ce délai est atteint, la page originale, non modifiée est instantanément affichée et Kameleoon continue de se charger en tâche de fond. Vous pouvez choisir ce qui se passe une fois que Kameleoon termine de se charger.

Pour accéder à vos options de configuration, rendez-vous sur la page « Sites configurés » via le menu latéral de gauche.

Sous l’URL de votre site, cliquez sur « Configuration avancée » dans la partie « Configuration » afin d'accéder à l'ensemble des paramètres de votre compte Kameleoon.

Choisissez ensuite « Options avancés » dans la liste de gauche.

Rendez-vous dans la partie « Comportement en cas de time out » afin de choisir l'une des 3 options suivantes :

  • Lancer Kameleoon (avec flicker) : Par défaut, les tests A/B ou les personnalisations en cours sont appliqués, même en cas de time out. Un effet notable de clignotement peut se produire. Pour plus d'informations à ce sujet, consultez l'article sur l'Effet flicker.
  • Désactiver Kameleoon pour cette page : Cette option désactivera complètement Kameleoon sur la page depuis laquelle un time out s'est produit.
  • Désactiver Kameleoon pour toute la visite : Cette option aura pour effet de désactiver complètement Kameleoon sur le site entier.

Notez bien que comme le fichier JavaScript est mis en cache par votre navigateur, les timeouts se produiront principalemnt au premier chargement d'une page de votre site. Au second chargement, Kameleoon sera chargé beaucoup plus rapidement puisqu'il n'aura plus à être téléchargé.

Pour installer la version asynchrone avec anti-flicker du script Kameleoon, utilisez le code suivant sans oublier de remplacer la variable SITE_CODE ci-dessous par le code de votre site  :

<script type="text/javascript">
	var kameleoonLoadingTimeout = 1000;
var kameleoonStartLoadTime = new Date().getTime(); if (! document.getElementById("kameleoonLoadingStyleSheet") && ! window.kameleoonDisplayPageTimeOut){ var kameleoonS = document.getElementsByTagName("script")[0];var kameleoonCc = "* { visibility: hidden !important; background-image: none !important; }"; var kameleoonStn = document.createElement("style");kameleoonStn.type = "text/css";kameleoonStn.id = "kameleoonLoadingStyleSheet"; if (kameleoonStn.styleSheet){kameleoonStn.styleSheet.cssText = kameleoonCc;}else{kameleoonStn.appendChild(document.createTextNode(kameleoonCc));}kameleoonS.parentNode.insertBefore(kameleoonStn, kameleoonS); window.kameleoonDisplayPage = function(){if (kameleoonStn.parentNode){kameleoonStn.parentNode.removeChild(kameleoonStn);}}; window.kameleoonDisplayPageTimeOut = window.setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);} </script> <script src="//static.kameleoon.com/css/customers/SITE_CODE/0/kameleoon.js" async="true"></script>

Emplacement optimal du script

Script Kameleoon

Le code de Kameleoon doit être chargé et exécuté le plus tôt possible afin de garantir que les changements par rapport aux pages originales ne subiront pas le clignotement appelé « Effet flicker ». Pour en savoir plus concernant l'effet flicker, vous pouvez consulter notre article à ce sujet.

Dans ces conditions, comme les navigateurs chargent et exécutent les scripts (et autres ressources tels les feuilles de style CSS) dans l'ordre où ils les trouvent sur la page HTML, il est recommandé de placer le code de Kameleoon le plus haut possible.

Idéalement il est préconisé de le placer juste après ouverture de la balise ouvrante <head> avant tous les autres scripts JavaScript.

Note : Cette recommandation contredit généralement les bonnes pratiques d'intégration de scripts JavaScript externes. D'habitude, il est plutôt recommandé d'insérer les scripts en fin de page afin qu'ils ne bloquent pas le chargement de la page. Le cas du script Kameleoon est une exception qui justifie le placement du script à cet endroit. De la même manière, il n'est pas recommandé de charger le script en mode asynchrone, même si c'est possible, là encore afin d'éviter l'effet flicker.

Par rapport au script Google Analytics

Les scripts de Kameleoon et de Google Analytics sont tous deux à placer dans la balise <head> de votre site Internet. Mais alors, lequel placer avant l'autre ? Idéalement, c’est le script de Kameleoon qui devrait être placé avant celui de Google Analytics, notamment pour le cas où, par exemple, la cible du test A/B est le titre de la page.

Il est conseillé de placer les deux scripts après la balise <title> située en général en haut dans la balise <head> du site.

L’ordre idéal est donc le suivant :

<!DOCTYPE html>
<html>
	<head>
<title>My title</title> <!-- Insert your Kameleoon tag here --> <script>Kameleoon</script> <!-- Insert your Google Analytics tag here --> <script>Google Analytics</script> </head> <body> <!-- Insert your remaining HTML code here --> <h1>My first heading</h1> <p>My first paragraph.</p> </body> </html>

Cas particuliers

Noms de domaine étendus

Kameleoon propose une solution automatique et élégante pour les tests A/B "wide domain", c'est à dire des tests qui se déroulent sur des noms de domaine étendus (tels que www.monsite.com et www.monsite.org). Si vous avez besoin d'un support pour les noms de domaine étendus, qui nécessite une configuration plus complexe, utilisez le code suivant sans oublier de remplacer la variable SITE_CODE ci-dessous par le code de votre site  :

<script type="text/javascript">
var kameleoonURL = "https://SITE_CODE.kameleoon.eu";
var kameleoonStartLoadTime = new Date().getTime();
var kameleoonLoadingTimeout = 1000;
var kameleoonProcessMessageEvent = function(event){if (kameleoonURL == event.origin){window.removeEventListener("message", kameleoonProcessMessageEvent);window.kameleoonExternalIFrameLoaded = true;eval(event.data);Kameleoon.Analyst.load();}};
if (window.addEventListener){window.addEventListener("message", kameleoonProcessMessageEvent, false);}
if (! document.getElementById("kameleoonLoadingStyleSheet") && ! window.kameleoonDisplayPageTimeOut){
var kameleoonS = document.getElementsByTagName("script")[0];var kameleoonCc = "* { visibility: hidden !important; background-image: none !important; }";
var kameleoonStn = document.createElement("style");kameleoonStn.type = "text/css";kameleoonStn.id = "kameleoonLoadingStyleSheet";
if (kameleoonStn.styleSheet){kameleoonStn.styleSheet.cssText = kameleoonCc;}else{kameleoonStn.appendChild(document.createTextNode(kameleoonCc));}kameleoonS.parentNode.insertBefore(kameleoonStn, kameleoonS);
window.kameleoonDisplayPage = function(){if (kameleoonStn.parentNode){kameleoonStn.parentNode.removeChild(kameleoonStn);}};
window.setTimeout(function(){}, 25);
window.kameleoonDisplayPageTimeOut = window.setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);}
var iframeNode = document.createElement("iframe");
iframeNode.src = kameleoonURL;
iframeNode.id = "kameleoonExternalIframe";
iframeNode.style = "float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";
document.head.appendChild(iframeNode);
</script>
Note : Vous n'avez pas besoin du support pour les noms de domaine étendus si vous faites des tests qui ne se déroulent que sur des sous-domaines (par exemple, www.monsite.com et paiement.monsite.com).
Note : En utilisant cette méthode, le chargement est toujours asynschrone, et il n'est pas possible de charger Kameleoon en mode synchrone.

Gestionnaire de tags

S’il est possible d'installer Kameleoon via un gestionnaire de tags (Google Tag Manager, Tag Commander, Eulerian Tag Master), cette démarche est déconseillée pour des raisons de performance. En effet, les gestionnaires de tags sont en général chargés très bas dans la page, ce qui implique que Kameleoon sera chargé lui aussi très tard, ce qui peut provoquer un effet flicker très visible en fonction du test et perturber les performances du test A/B. Par ailleurs, le gestionnaire de tag doit d'abord être chargé avant de pouvoir charger le tag Kameleoon, ce qui peut induire un temps de latence supplémentaire. 

Si vous utilisez un gestionnaire de tags (comme Google Tag Manager, Tag Commander, etc.), n'utilisez pas le script asynchrone avec anti-flicker qui n'est pas prévu pour être utilisé à l'intérieur d'un gestionnaire de tags. Vous pouvez utiliser indifféremment le script asynchrone standard ou le script synchrone. Notez cependant que le chargement synchrone n'est pas possible à l'intérieur d'un gestionnaire de tags.

Par ailleurs, attention à ne pas configurer votre gestionnaire de tags pour combiner et mettre en cache le script Kameleoon : si votre gestionnaire met en cache Kameleoon, vous ne pourrez lancer aucun test.

Si vous devez utiliser un gestionnaire de tag pour l'installation du tag Kameleoon, nous recommandons donc d'utiliser la version ci-dessous du script Kameleoon. Il s'agit de la version asynchrone non bloquante.

var scriptNode = document.createElement("script");
scriptNode.src = "//static.kameleoon.com/css/customers/SITE_CODE/0/kameleoon.js";
scriptNode.type = "text/javascript";
scriptNode.async = true;
document.head.appendChild(scriptNode);

Remplacez tout simplement le paramètre SITE_CODE par votre code site.

Version Wide Domain Support pour les gestionnaires de tag :

<script type="text/javascript">
var kameleoonLoadingTimeout = 1000;
var kameleoonStartLoadTime = new Date().getTime();
var kameleoonURL = "https://SITE_CODE.kameleoon.eu";
var kameleoonProcessMessageEvent = function(event){if (kameleoonURL == event.origin){window.removeEventListener("message", kameleoonProcessMessageEvent);window.kameleoonExternalIFrameLoaded = true;eval(event.data);Kameleoon.Analyst.load();}};
if (window.addEventListener){window.addEventListener("message", kameleoonProcessMessageEvent, false);}
var iframeNode = document.createElement("iframe");
iframeNode.src = kameleoonURL;
iframeNode.id = "kameleoonExternalIframe";
iframeNode.style = "float: left !important; opacity: 0.0 !important; width: 0px !important; height: 0px !important;";
document.head.appendChild(iframeNode);
</script>

Support asynchrone pour anciennes versions d'IE

Les anciennes versions d'Internet Explorer (versions 9 et antérieures) ne supportent pas l'attribut async de la balise <script>. Si vous avez absolument besoin d'un chargement asynchrone même sur ces navigateurs, vous pouvez utiliser un code d'intégration qui créé le noeud <script> dynamiquement. Il sera ensuite chargé de façon non bloquant même sur les anciennes versions d'Internet Explorer. Il a par contre un défaut majeur. Comme la balise <script> n'est pas traitée par le parser HTML, toutes les autres ressources chargées directement depuis le HTML (même placées plus bas) vont devenir prioritaires et seront téléchargées avant le script. Le chargement de Kameleoon sera significativement décalé ce qui augmente le risque d'un effet de clignotement ou timeout.

<script type="text/javascript">
var kameleoonSiteCode = "SITE_CODE";
var kameleoonLoadingTimeout = 1000;
var kameleoonStartLoadTime = new Date().getTime(); if (! document.getElementById("kameleoonLoadingStyleSheet") && ! window.kameleoonDisplayPageTimeOut){ var kameleoonS = document.getElementsByTagName("script")[0];var kameleoonCc = "* { visibility: hidden !important; background-image: none !important; }"; var kameleoonStn = document.createElement("style");kameleoonStn.type = "text/css";kameleoonStn.id = "kameleoonLoadingStyleSheet"; if (kameleoonStn.styleSheet){kameleoonStn.styleSheet.cssText = kameleoonCc;}else{kameleoonStn.appendChild(document.createTextNode(kameleoonCc));}kameleoonS.parentNode.insertBefore(kameleoonStn, kameleoonS); var kameleoonScn = document.createElement("script");kameleoonScn.type = "text/javascript";kameleoonScn.async = true; kameleoonScn.src = "//static.kameleoon.com/css/customers/"+kameleoonSiteCode+"/0/kameleoon.js";kameleoonS.parentNode.insertBefore(kameleoonScn, kameleoonS); window.kameleoonDisplayPage = function(){if (kameleoonStn.parentNode){kameleoonStn.parentNode.removeChild(kameleoonStn);}}; window.kameleoonDisplayPageTimeOut = window.setTimeout(window.kameleoonDisplayPage, kameleoonLoadingTimeout);} </script> 

CDN Kameleoon

Pour les sites à fort trafic ou qui sont très attentifs au temps de chargement de leurs pages et notamment des scripts externes, Kameleoon propose un CDN Haute Performance. Si votre contrat permet l'utilisation de ce CDN, il est nécessaire de remplacer dans le script d'installation choisi l'occurrence :

static.kameleoon.com

Par :

static-bp.kameleoon.com

Votre CDN

Le script Kameleoon peut être hébergé sur votre propre CDN. Vous devrez créer un sous-domaine dans l'interface de votre CDN (comme http://kameleoon.monsite.com) qui pointera vers :

static-direct.kameleoon.com

Vous devrez ensuite remplacer dans le code JavaScript que vous aurez choisi toutes les occurrences de :

static.kameleoon.com

Par le domaine que vous aurez créé à cet effet, par exemple :

kameleoon.monsite.com

N'oubliez pas de spécifier le domaine que vous aurez créé dans le back-office de Kameleoon. Dans le cas contraire, vous ne pourrez pas uploader les images utilisées dans vos variantes.

Pour accéder à vos options de configuration, rendez-vous sur la page « Sites configurés » via le menu latéral de gauche.

Sous l’URL de votre site, cliquez sur « Configuration avancée » dans la partie « Configuration » afin d'accéder à l'ensemble des paramètres de votre compte Kameleoon.

Choisissez ensuite « Options avancés » dans la liste de gauche.

Parmi les options disponibles, rendez-vous dans la partie « URL personnalisée du CDN »  afin d'y insérer l'URL de votre CDN.

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk