Passer au contenu principal
Le clignotement a généralement deux causes principales :
  • Le script est chargé et exécuté après que le navigateur a déjà affiché la page ou des parties de celle-ci. Ce problème de timing est directement lié à la manière dont Kameleoon a été implémenté sur votre site web. Si Kameleoon se charge trop tard ou s’il est intégré au sein d’un Tag Management System, le clignotement ne peut être évité.
  • Le moteur traitant les variations de l’expérience est trop lent et n’exécute pas les modifications assez rapidement.
Le script de Kameleoon inclut un moteur anti-clignotement unique qui garantit que les A/B tests s’exécutent en douceur, permettant aux variations de test de s’afficher sans délai, ce qui améliore l’expérience utilisateur et la fiabilité des résultats.

​
Principaux avantages de la technologie :​

Voici quelques raisons pour lesquelles la technologie anti-flicker de Kameleoon est unique et puissante :
  • Snippet asynchrone : Kameleoon charge son script de manière asynchrone depuis un CDN fiable (Cloudflare) pour garantir un premier chargement de page non bloquant et utilise la mise en cache du navigateur pour des chargements de page ultérieurs plus rapides. Kameleoon maintient un Service Level Agreement (SLA) supérieur à 99,99 %.
  • Petite taille du script : Le fichier d’application, créé avec TypeScript, a une taille de seulement 29 ko (compressé avec Brotli), ce qui minimise le temps de chargement à la première page.
  • Approche de prétraitement : Le script Kameleoon est généré uniquement à partir des composants nécessaires à votre configuration spécifique, en fonction des fonctionnalités et options que vous utilisez.
  • Moteur anti-clignotement unique : Le moteur capture les événements du DOM en temps réel et modifie l’affichage des composants impliqués dans une variation d’expérience avant qu’ils ne soient entièrement rendus.
  • Appels réseau réduits : Le script regroupe plusieurs événements de suivi dans un seul appel beacon, réduisant ainsi considérablement le nombre total d’appels réseau requis.
  • Chargement unique du script : Contrairement à d’autres plateformes nécessitant plusieurs fichiers, Kameleoon charge un seul script consolidé. Cela réduit le nombre de requêtes HTTP.
  • Chargement différé des expériences : Kameleoon vous permet de sélectionner quelles expériences inclure dans le fichier d’application, engine.js (précédemment nommé kameleoon.js) au moment du premier chargement de page, au cas par cas, et de différer les expériences non essentielles après le premier chargement.
  • Mise à jour en temps réel : Pour fournir des mises à jour plus fréquentes sans être ralenti par la mise en cache du navigateur, la fonctionnalité Live Update Experiments rafraîchit toute expérience taguée “LIVE-UPDATE” en moins d’une minute.

​
Comment empêcher le clignotement dans vos expériences​

Pour éliminer le clignotement qui se produit lors du chargement du fichier d’application, utilisez le tag asynchrone avec prévention anti-flicker. Le snippet comprend une “règle CSS bloquante” qui masque initialement tout le contenu de la page pendant que le script est téléchargé par le navigateur. Kameleoon supprime cette règle dès que le code d’application se charge, ce qui prend généralement moins de 50 millisecondes. Si le code d’application ne se charge pas dans le délai spécifié (par défaut 1000 millisecondes), la règle sera également supprimée pour éviter d’afficher une page vide indéfiniment. Cette approche garantit que Kameleoon ne peut perturber votre site web dans aucune situation.
Le timeout est géré par la variable JavaScript kameleoonLoadingTimeout, que vous pouvez ajuster dans le tag d’installation Kameleoon. Par défaut, cette variable est définie sur 1000 millisecondes. Kameleoon recommande de conserver cette valeur. Cette variable indique le temps maximal pendant lequel le tag d’installation Kameleoon peut empêcher l’affichage de votre site pendant qu’il attend le chargement du fichier d’application Kameleoon.En cas de timeout, une fois que le code Kameleoon est enfin chargé, la configuration choisie détermine ce qui se passe ensuite. Vous avez deux options dans les paramètres de confirmation avancés de votre projet Kameleoon :
  1. Désactiver entièrement Kameleoon : Si un timeout se produit, aucune expérience ou personnalisation ne sera exécutée pour ce visiteur spécifique.
  2. Exécuter normalement le code de Kameleoon : Dans ce cas, le code s’exécutera tardivement, ce qui peut entraîner un clignotement sur la page.
Gardez à l’esprit que si la valeur par défaut du timeout n’est pas ajustée, les timeouts devraient être relativement rares dans des conditions habituelles, telles qu’avec une vitesse Internet appropriée, ne survenant que chez environ 2 à 3 % de vos visiteurs.
Bien que non recommandé, vous pouvez également implémenter le tag synchrone. Dans le cas d’un chargement synchrone, des garanties automatiques sont fournies tant que le tag est inclus dans la section HTML <head>. Cette garantie existe parce que le navigateur ne rendra aucun contenu tant que le fichier d’application Kameleoon n’est pas entièrement téléchargé et exécuté. Cependant, charger des ressources de manière bloquante n’est pas considéré comme une bonne pratique. Même si la bonne méthode est implémentée, des effets de clignotement peuvent encore se produire si le moteur sous-jacent d’une solution d’A/B test n’est pas optimisé pour les empêcher. Kameleoon garantit automatiquement ces optimisations pour toutes les modifications apportées via l’éditeur graphique. Pour les variations qui utilisent du code JavaScript personnalisé, des API sont disponibles pour garantir une expérience fluide. Utilisez correctement ces API pour éviter les problèmes. Effectuez toutes les modifications d’un élément ou toutes les actions en attente d’un élément sur la page à l’aide de la méthode d’API JavaScript, en particulier Kameleoon.API.Core.runWhenElementPresent(), plutôt que d’utiliser des pollers codés à la main ou d’autres codes personnalisés.
Lors de l’implémentation de code JavaScript pour une variation, prenez en compte les modifications que vous souhaitez apporter et les éléments DOM spécifiques auxquels elles s’appliqueront. Une fois que vous avez identifié le sélecteur CSS approprié pour ces éléments, encapsulez l’appel de modification dans une fonction de rappel que vous fournirez à Kameleoon.API.Core.runWhenElementPresent(). Cette approche présente deux avantages clés : premièrement, elle garantit que le code s’exécute au bon moment, uniquement après que les éléments sont présents dans le DOM, évitant les problèmes potentiels qui pourraient survenir si votre code s’exécutait prématurément. Deuxièmement, elle élimine le risque d’effets de clignotement indésirables.

​
Impact de la gestion du clignotement sur la performance​

Bien que les solutions de surveillance des performances offrent des informations précieuses, elles ne présentent pas une image complète, en particulier pour les plateformes d’expérimentation. La véritable performance consiste à trouver le bon équilibre entre vitesse, précision et expérience utilisateur fluide. Kameleoon atteint efficacement cet équilibre : le snippet d’expérience est spécifiquement conçu pour optimiser à la fois la performance et l’expérience utilisateur. Kameleoon charge un seul script qui contient le moteur et toutes les configurations que vous avez définies sur la plateforme, y compris les expériences, objectifs et scripts personnalisés. Aucun script supplémentaire n’est chargé par la suite. Désactiver temporairement le moteur anti-clignotement pourrait améliorer les indicateurs de performance dans les outils de surveillance, mais cela compromet l’expérience utilisateur et la précision des résultats en introduisant des clignotements. Ce compromis est inacceptable.