Passer au contenu principal
Développer un site web optimisé pour les campagnes d’A/B testing nécessite de prendre en compte plusieurs éléments techniques et structurels. Les sections suivantes décrivent les aspects clés.

​
1. Structure HTML propre et sémantique

  • Utilisation correcte des balises HTML : Utilisez des balises sémantiques (telles que <header>, <footer>, <section> ou <article>) 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, sauf si elles sont significatives (telles que celles provenant 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 des éléments.
  • Noms explicites : Utilisez des noms clairs et descriptifs pour les classes, IDs et variables (tels que .cta-button ou #main-header) pour qu’ils soient compréhensibles.

​
2. Modularité du code

  • Séparation des préoccupations : Gardez le HTML, le CSS et le JavaScript bien séparés pour réduire les dépendances complexes. Pour JavaScript, exposez la logique complexe au scope window pour permettre la réutilisation dans différentes parties du site. Exposer la logique permet d’ajouter un produit au panier depuis une page spécifique ou de valider efficacement une étape de formulaire.
  • Mutation Observers : Utilisez les Mutation Observers pour détecter les éléments et surveiller les changements. Consultez l’API Kameleoon runWhenElementPresent, utilisée pour détecter les éléments rendus sur la page ici.
  • Logs : Utilisez console.log comme moyen préféré pour déboguer.
  • DataLayer (ou objet équivalent) : Évitez de modifier les valeurs de la même couche du dataLayer. Si l’information requise n’est pas encore disponible, attendez de définir directement la bonne valeur, plutôt que de mettre à jour une valeur obsolète par la suite. Consultez l’API Kameleoon 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é. Le re-rendu écrase les modifications appliquées par Kameleoon et rend difficile la détection de la fin du chargement de la page.

​
3. SPA (Single Page Application)

  • Cookies et LocalStorage (LS) : Mettez en place une gestion claire des cookies ou du LS pour identifier les différentes étapes d’un formulaire.
  • Rendu des événements : Pour vous assurer que les modifications Kameleoon persistent et ne sont pas écrasées, informez Kameleoon lorsque la page ou un élément spécifique a fini de se rendre, en utilisant l’une des méthodes suivantes :
    • Définissez une variable window, telle que window.pageLoadForKam = true.
    • Déclenchez un événement sur la page que Kameleoon peut écouter, tel que « pageLoaded » ou « contentUpdated » : window.addEventListener('pageLoaded', () => { runKameleoonVariationCode }).
    • Ajoutez 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 (telles que les étapes d’un formulaire). Au lieu d’empiler de nouvelles couches à chaque modification, supprimez les anciennes entrées du dataLayer avant d’en ajouter de nouvelles. Cette suppression garantit que Kameleoon récupère les dernières valeurs, car il attend la définition du dataLayer avant de traiter les données. Si des valeurs obsolètes persistent entre les pages, Kameleoon peut s’exécuter avant la mise à jour du dataLayer, 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 l’article Single Page App pour gérer la récupération des informations du dataLayer.
Consultez le guide sur comment configurer une expérience sur une single-page app pour les bonnes pratiques.

​
4. Gestion des événements

  • Déclencheurs multiples : Permettez la manipulation d’événements tels que click, mousedown ou hover.