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

# Desarrollo de sitios web - Buenas prácticas para A/B testing

> Estructure y desarrolle su sitio web con HTML limpio, código modular y patrones compatibles con SPA para que el A/B testing con Kameleoon sea fiable y mantenible.

Para desarrollar un sitio web que sea fácil de usar para campañas de A/B testing, es crucial considerar varios elementos técnicos y estructurales. Estos son los aspectos clave.

## 1. Estructura HTML limpia y semántica

* **Uso adecuado de etiquetas HTML**: use etiquetas semánticas (`<header>`, `<footer>`, `<section>`, `<article>`, etc.) para mejorar la comprensión y la manipulación del contenido.
* **Identificadores únicos**: añada IDs (`id="unique-id"`) o clases (`class="class-name"`) claros y relevantes a los elementos para una segmentación precisa.
* **Evite las clases dinámicas innecesarias**: evite las clases generadas automáticamente, a menos que sean significativas (por ejemplo, las de ciertos frameworks CSS).
* **Etiquetas personalizadas**: si utiliza clases dinámicas, añada atributos no dinámicos como `custom-id` para simplificar la selección de elementos.
* **Nombres explícitos**: utilice nombres claros y descriptivos para clases, IDs y variables (por ejemplo, `.cta-button`, `#main-header`) para garantizar que sean comprensibles, incluso para personas externas.

## 2. Modularidad del código

* **Separación de responsabilidades**: mantenga HTML, CSS y JavaScript bien separados para reducir las dependencias complejas. Para la parte de JavaScript, puede exponer lógica compleja al ámbito `window`, lo que permite reutilizarla en diferentes partes del sitio. Por ejemplo, esto puede facilitar añadir un producto al carrito desde una página específica o validar un paso de un formulario de forma eficiente.
* **Mutation Observers**: habilite el uso de Mutation Observers, que es una forma optimizada de detectar elementos en la página y supervisar cambios. Consulte la API específica, **`runWhenElementPresent`,** utilizada para detectar elementos renderizados en la página [aquí](../../apis/activation-api-js/api-reference/api-reference#runwhenelementpresent).
* **Logs**: permita el uso de `console.log` como forma preferible de depurar.
* **DataLayer (u objeto equivalente)**: evite cambiar los valores de una misma capa del dataLayer. Si la información necesaria aún no está disponible, espere a establecer el valor correcto directamente, en lugar de actualizar un valor desactualizado después. Consulte la API específica, **`runWhenConditionTrue`,** utilizada para detectar cuándo se carga la información en la página [aquí](../../apis/activation-api-js/api-reference/api-reference#runwhenconditiontrue).
* **Manejo del DOM**: evite volver a renderizar el DOM una vez que se ha cargado, ya que esto sobrescribirá los cambios aplicados por Kameleoon y dificultará detectar cuándo la página ha terminado de cargarse.

## 3. SPA (Single Page Application)

* **Cookies y LocalStorage (LS)**: implemente una gestión clara de cookies o LS para identificar diferentes pasos de un formulario, por ejemplo.
* **Renderizado de eventos**: para garantizar que los cambios de Kameleoon persistan y no se sobrescriban, puede informar a Kameleoon de cuándo la página o un elemento específico ha terminado de renderizarse utilizando uno de los siguientes métodos:
  * Definir una variable en window, por ejemplo, `window.pageLoadForKam = true`.
  * Disparar un evento en la página al que Kameleoon pueda escuchar, por ejemplo, usando "pageLoaded" o "contentUpdated": `window.addEventListener('pageLoaded', () => { runKameleoonVariationCode })`.
  * Añadir una clase o atributo específico a la etiqueta `<body>` o al elemento de destino.
* **DataLayer (u objeto equivalente)**: actualice los valores del **dataLayer** tras cada cambio de URL, incluidas las transiciones de página dentro de la misma URL (por ejemplo, pasos de formularios). En lugar de apilar nuevas capas en cada cambio, **elimine las entradas antiguas del dataLayer antes de añadir nuevas**. Esto garantiza que Kameleoon recupere los valores más recientes, ya que espera a que el **dataLayer** esté definido antes de procesar los datos. Si los valores desactualizados persisten entre páginas, Kameleoon podría ejecutarse antes de que se actualice el **dataLayer**, lo que provocaría que recupere datos obsoletos de la página anterior. De lo contrario, consulte la sección "custom setup" de este [artículo](/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app) para gestionar mejor la recuperación de información del dataLayer.

Siga la guía sobre [**cómo configurar un experimento en una single-page app**](/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app) para conocer las buenas prácticas.

## 4. Gestión de eventos

* **Múltiples disparadores**: permita la manipulación de eventos: `click`, `mousedown`, `hover`, etc.
