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-idpara 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í. - Logs: permita el uso de
console.logcomo 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í. - 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.
- Definir una variable en window, por ejemplo,
- 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 para gestionar mejor la recuperación de información del dataLayer.
4. Gestión de eventos
- Múltiples disparadores: permita la manipulación de eventos:
click,mousedown,hover, etc.