Passer au contenu principal
Pour développer un site web facile à utiliser pour des campagnes d’A/B test, il est crucial de prendre en compte plusieurs éléments techniques et structurels. Voici les aspects clés.

​
1. Structure HTML propre et sémantique

  • Utilisation correcte des balises HTML : Utilisez des balises sémantiques (<header>, <footer>, <section>, <article>, etc.) pour améliorer la compréhension et la manipulation du contenu.
  • Identifiants uniques : Ajoutez des IDs (id="unique-id") ou des classes (class="class-name") clairs et pertinents aux éléments pour un ciblage précis.
  • Évitez les classes dynamiques inutiles : Évitez les classes générées automatiquement à moins qu’elles ne soient significatives (par exemple, à partir de certains frameworks CSS).
  • Balises personnalisées : Si vous utilisez des classes dynamiques, ajoutez des attributs non dynamiques comme custom-id pour simplifier la sélection d’éléments.
  • Noms explicites : Utilisez des noms clairs et descriptifs pour les classes, les IDs et les variables (par exemple, .cta-button, #main-header) afin qu’ils soient compréhensibles, même pour des personnes extérieures.

​
2. Modularité du code

  • Séparation des responsabilités : Gardez le HTML, le CSS et le JavaScript bien séparés pour réduire les dépendances complexes. Pour la partie JavaScript, vous pouvez exposer la logique complexe au scope window, ce qui permet sa réutilisation à différents endroits du site. Par exemple, cela peut permettre d’ajouter un produit au panier depuis une page spécifique ou de valider efficacement une étape de formulaire.
  • Mutation Observers : Activez l’utilisation des Mutation Observers, qui constituent un moyen optimisé de détecter les éléments sur la page et de surveiller les changements. Consultez l’API spécifique, runWhenElementPresent, utilisée pour détecter les éléments rendus sur la page ici.
  • Logs : Permettez l’utilisation de console.log comme moyen préférable de déboguer.
  • DataLayer (ou objet équivalent) : Évitez de changer les valeurs de la même couche du dataLayer. Si l’information requise n’est pas encore disponible, attendez pour définir directement la valeur correcte, plutôt que de mettre à jour une valeur obsolète par la suite. Consultez l’API spécifique, runWhenConditionTrue, utilisée pour détecter quand des informations sont chargées sur la page ici.
  • Gestion du DOM : Évitez de re-rendre le DOM une fois qu’il a été chargé, car cela écrasera les modifications appliquées par Kameleoon et rendra difficile la détection du moment où la page a fini de charger.

​
3. SPA (Single Page Application)

  • Cookies et LocalStorage (LS) : Mettez en œuvre une gestion claire des cookies ou du LS pour identifier différentes étapes d’un formulaire, par exemple.
  • Rendu des événements : Pour garantir que les modifications de Kameleoon persistent et ne sont pas écrasées, vous pouvez informer Kameleoon lorsque la page ou un élément spécifique a fini d’être rendu en utilisant l’une des méthodes suivantes :
    • Définir une variable window, par exemple, window.pageLoadForKam = true.
    • Déclencher un événement sur la page que Kameleoon peut écouter, par exemple, en utilisant “pageLoaded” ou “contentUpdated” : window.addEventListener('pageLoaded', () => { runKameleoonVariationCode }).
    • Ajouter une classe ou un attribut spécifique à la balise <body> ou à l’élément cible.
  • DataLayer (ou objet équivalent) : Mettez à jour les valeurs du dataLayer après chaque changement d’URL, y compris les transitions de page au sein de la même URL (par exemple, les étapes de formulaire). Au lieu d’empiler de nouvelles couches à chaque changement, supprimez les anciennes entrées du dataLayer avant d’en ajouter de nouvelles. Cela garantit que Kameleoon récupère les dernières valeurs, car il attend que le dataLayer soit défini avant de traiter les données. Si des valeurs obsolètes persistent entre les pages, Kameleoon peut s’exécuter avant que le dataLayer ne soit mis à jour, entraînant la récupération de données obsolètes de la page précédente. Sinon, consultez la section “configuration personnalisée” de cet article pour gérer au mieux la récupération des informations du dataLayer.
Suivez le guide sur comment configurer une expérience sur une application monopage pour les meilleures pratiques.

​
4. Gestion des événements

  • Déclencheurs multiples : Permettez la manipulation des événements : click, mousedown, hover, etc.