> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Développement de site web - Bonnes pratiques pour l'A/B testing

> Suivez les bonnes pratiques de développement de site web pour la structure HTML, la modularité du code, le support des SPA et la gestion des événements afin d'optimiser l'A/B testing.

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](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#runwhenelementpresent).
* **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](../../../../developer-docs/apis/activation-api-js/api-reference/api-reference#runwhenconditiontrue).
* **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](../advanced-experiment-types/set-up-experiment-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**](../advanced-experiment-types/set-up-experiment-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`.
