Saltar al contenido principal
Desarrollar un sitio web optimizado para campañas de pruebas A/B requiere tener en cuenta varios elementos técnicos y estructurales. Las siguientes secciones describen los aspectos clave.

​
1. Estructura HTML limpia y semántica

  • Uso adecuado de etiquetas HTML: utilice etiquetas semánticas (como <header>, <footer>, <section> o <article>) para mejorar la comprensión y manipulación del contenido.
  • Identificadores únicos: añada IDs (id="unique-id") o clases (class="class-name") claros y relevantes a los elementos para un targeting preciso.
  • Evite clases dinámicas innecesarias: evite las clases generadas automáticamente a menos que sean significativas (como 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 (como .cta-button o #main-header) para asegurarse de que sean comprensibles.

​
2. Modularidad del código

  • Separación de responsabilidades: mantenga el HTML, CSS y JavaScript bien separados para reducir dependencias complejas. Para JavaScript, exponga la lógica compleja al ámbito window para permitir su reutilización en distintas partes del sitio. Exponer la lógica permite añadir un producto al carrito desde una página específica o validar un paso de un formulario de manera eficiente.
  • Mutation Observers: utilice Mutation Observers para detectar elementos y supervisar cambios. Consulte la API de Kameleoon runWhenElementPresent, utilizada para detectar elementos renderizados en la página, aquí.
  • Logs: use console.log como forma preferida de depurar.
  • DataLayer (u objeto equivalente): evite cambiar los valores de la misma capa del dataLayer. Si la información requerida aún no está disponible, espere para establecer el valor correcto directamente, en lugar de actualizar un valor obsoleto posteriormente. Consulte la API de Kameleoon runWhenConditionTrue, utilizada para detectar cuándo se carga la información en la página, aquí.
  • Gestión del DOM: evite volver a renderizar el DOM una vez cargado. Volver a renderizar sobrescribe los cambios aplicados por Kameleoon y dificulta detectar cuándo la página termina de cargarse.

​
3. SPA (Single Page Application)

  • Cookies y LocalStorage (LS): implemente una gestión clara de cookies o LS para identificar los distintos pasos de un formulario.
  • Renderizado de eventos: para garantizar que los cambios de Kameleoon persistan y no sean sobrescritos, informe a Kameleoon cuando la página o un elemento específico haya terminado de renderizarse utilizando uno de los siguientes métodos:
    • Definir una variable de ventana, como window.pageLoadForKam = true.
    • Activar un evento en la página que Kameleoon pueda escuchar, como “pageLoaded” o “contentUpdated”: window.addEventListener('pageLoaded', () => { runKameleoonVariationCode }).
    • Añadir una clase o atributo específico a la etiqueta <body> o al elemento objetivo.
  • 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 (como los pasos de un formulario). En lugar de apilar nuevas capas en cada cambio, elimine las entradas antiguas del dataLayer antes de añadir las nuevas. Esta eliminación garantiza que Kameleoon recupere los últimos valores, ya que espera la definición del dataLayer antes de procesar los datos. Si los valores obsoletos persisten entre páginas, Kameleoon puede ejecutarse antes de que el dataLayer se actualice, lo que provocaría la recuperación de datos obsoletos de la página anterior. De lo contrario, consulte la sección “custom setup” del artículo sobre Single Page App para gestionar la recuperación de información del dataLayer.
Consulte la guía sobre cómo configurar un experimento en una single-page app para conocer las prácticas recomendadas.

​
4. Gestión de eventos

  • Múltiples disparadores: permita la manipulación de eventos como click, mousedown o hover.