Guide d'installation avancé

L'intégration de Kameleoon via une balise <script> a beau être très facile, d'autres situations peuvent se présenter. Ce guide détaille les différentes façons d'intégrer Kameleoon à votre site web en fonction de votre environnement technique particulier.

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 (en anglais, « flicker »). Le clignotement signifie que la personnalisation sera chargée après l'affichage de la page originale.

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

Emplacement de taggage recommandé

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 et de placer le script Kameleoon avant que les autres ressources ne soient écrites dans le code HTML (comme les fichiers CSS ou JavaScript) : cela diminuera considérablement les chances qu'un effet de clignotement ou qu'un timeout se produise.

Voici un exemple d'une page web correctement taggué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 est le recours à un système de gestion de tag, puisque vous ne modifierez pas directement votre code HTML.

Chargement synchrone

Note : Il s'agit de la méthode d'intégration 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 pendant que la page se charge 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 cela, rendez-vous dans votre compte Kameleoon et utilisez le menu latéral de gauche pour vous rendre sur la page « Sites configurés ».

Vous verrez apparaître une liste des sites que vous avez configuré avec Kameleoon. Cliquez sur « Configuration avancée » pour le site web de votre choix.

Vous pourrez paramétrer ici le comportement en cas de time out :

  • 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 Effet flicker ou saut visuel.
  • 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 principalement 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;
	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>

Cas particuliers

Intégration dans un de gestionnaire de tags

Kameleoon est compatible avec la majorité des gestionnaires de tags. Cependant nous vous recommandons, si possible, d'installer Kameleoon directement dans le code source, et non par un gestionnaire de tags. Utiliser un gestionnaire de tags délaie le chargement de Kameleoon et augmente le risque de clignotement. C'est particulièrement problématique si votre gestionnaire est chargé en bas de la page HTML.

Si vous utilisez un gestionnaire de tags (comme Google Tag Manager, Tag Commander, etc.), n'utilisez pas le script asynchrone avec anti-flicker car il 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. Cela dit, le chargement synchrone n'est pas possible à l'intérieur d'un gestionnaire de tags : la version synchrone se comportera comme la version asynchrone.

Attention à ne pas configurer votre gestionnaire de tags pour combiner et mettre en cache le script Kameleoon qui contient une partie dynamique (les données nécessaires pour les personnalisations en cours). Si votre gestionnaire met en cache Kameleoon, vous ne pourrez lancer aucune personnalisation.

Pour en savoir plus à ce sujet, consultez l'article Installation de Kameleoon via un gestionnaire de tags.

Support des noms de domaine étendus (Wide Domain)

Kameleoon propose une solution automatique et élégante pour les personnalisations "wide domain", c'est à dire des personnalisations 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 kameleoonLoadingTimeout = 1000;
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);}
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 personnalisations 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.

Support asynchrone pour les plus anciennes versions d'Internet Explorer

Les vieilles 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 vieux IE. 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;
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>

Utilisation du CDN haute performance de 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

Utilisation de votre propre 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 ce faire, rendez-vous dans votre compte Kameleoon et utilisez le menu latéral de gauche pour vous rendre sur la page « Sites configurés ».

Vous verrez apparaître une liste des sites que vous avez configurés avec Kameleoon. Sur le site Internet pour lequel vous souhaitez utiliser votre propre CDN, cliquez sur « Configuration avancée ».

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