> ## 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.

# Developpement de site web - Meilleures pratiques pour l'A/B test

> Structurez et developpez votre site web avec un HTML propre, un code modulaire et des patterns adaptes aux SPA pour rendre l'A/B test avec Kameleoon fiable et maintenable.

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](../../apis/activation-api-js/api-reference/api-reference#runwhenelementpresent).
* **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](../../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é, 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](/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app) 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**](/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app) pour les meilleures pratiques.

## 4. Gestion des événements

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