Saltar al contenido principal

​
¿Qué es una single-page app (SPA)?

​
Definición y propósito

Una aplicación de una sola página (SPA) es un tipo de aplicación web diseñada para proporcionar una experiencia de usuario más fluida y rápida actualizando dinámicamente el contenido sin recargar toda la página. Las SPA normalmente se construyen utilizando frameworks JavaScript modernos como React, Next.js o Vue.js. Muchas SPA también utilizan renderizado del lado del servidor (SSR), lo que añade complejidad a las implementaciones del lado del cliente como las pruebas A/B y la personalización. La principal ventaja de las SPA es mejorar la experiencia de navegación del visitante cargando los recursos una vez y actualizando el contenido dinámicamente, en lugar de recargar toda la página tras cada acción.

​
Retos y soluciones de implementación

Las SPA presentan desafíos únicos para herramientas como Kameleoon que dependen de las cargas de página para aplicar variaciones o ejecutar scripts. Para garantizar un rendimiento óptimo, es crucial adaptar la estrategia de implementación al tipo de SPA con el que está trabajando. En las siguientes secciones, describiremos las mejores prácticas y procedimientos para gestionar cada escenario, garantizando una integración fluida y un seguimiento preciso del comportamiento del visitante en su sitio web.

​
Configuración nativa

Si su sitio web es una SPA completa, habilitar la opción “compatibilidad con sitios web dinámicos” garantiza que Kameleoon busque cambios de URL. Cuando la URL cambia, todos los scripts de Kameleoon se vuelven a ejecutar, incluidos el targeting y el código de variación. Kameleoon también supervisará las actualizaciones en su SPA utilizando un MutationObserver para hacer seguimiento de los cambios en el DOM, incluso cuando la URL de la página permanezca estática. Esto permite a Kameleoon aplicar (o reaplicar) los cambios de la variación dinámicamente a medida que se producen actualizaciones en su sitio web. Kameleoon admite distintas modificaciones realizadas a través del Graphic editor, entre ellas:
  • Cambios de estilo
  • Modificaciones de texto
  • Actualizaciones de posición (intercambio, insertar antes/después)
  • Selectores CSS personalizados
Este enfoque garantiza que todos los cambios pertinentes se apliquen de manera coherente en un entorno dinámico. Para habilitar la compatibilidad con sitios web dinámicos:
  1. Haga clic en Admin > Projects.
  2. Localice la tarjeta de su proyecto y haga clic en el icono Edit.
  3. Haga clic en Configuration y despliegue el menú General.
  4. Desplácese hasta Advanced settings y cambie Enable support for dynamic websites (Single Page App, Progressive Web App…) a ON.
Hay varias opciones disponibles para ayudarle a optimizar su configuración:
  • Elija el alcance: puede habilitar la función para todo el sitio o limitarla a elementos específicos utilizando el Graphic editor. Restringir el alcance a elementos seleccionados ayuda a reducir el peso total del script. Vea cómo marcar un elemento como dinámico aquí.
  • Establecer un atributo personalizado (opcional): esta opción mejora la identificación de elementos y ayuda a evitar problemas relacionados con atributos y selectores dinámicos. Si su sitio web no genera IDs HTML estables o únicos, puede definir un atributo personalizado para que Kameleoon lo utilice al identificar elementos modificados. Este atributo tiene prioridad sobre el ID del elemento al construir el selector.
  • Evitar selectores de ID dinámicos (opcional): esta opción también mejora la identificación de elementos cuando se trata de atributos y selectores dinámicos. Por defecto, Kameleoon ignora los IDs HTML que contienen secuencias numéricas de más de cinco dígitos. Puede definir su propia expresión regular para excluir patrones de IDs adicionales si fuera necesario.

​
Establecer un atributo personalizado

Puede definir un atributo personalizado (por ejemplo, data-id, data-qa) para identificar elementos en la página. Los atributos personalizados son particularmente útiles cuando su sitio genera IDs dinámicos para los elementos HTML. El Graphic Editor de Kameleoon identifica los elementos utilizando selectores CSS, que se dividen en dos categorías:
  • Selección basada en ID: si el elemento tiene un ID, Kameleoon lo utilizará para localizar y modificar el elemento cuando se cargue la página.
  • Selector combinador: si no se encuentra un ID, Kameleoon crea una ruta de selector utilizando el elemento padre más cercano con un ID.
En casos en los que sus IDs son dinámicos y cambian con frecuencia, el Graphic editor puede tener dificultades para identificar elementos. Para resolver este problema, puede añadir un atributo personalizado estático (por ejemplo, <button custom-id="1">) que identifique los elementos de forma fiable entre actualizaciones.

​
Evitar los selectores de ID dinámicos

Por defecto, Kameleoon evita utilizar IDs de elementos que contengan números generados dinámicamente de más de cinco dígitos consecutivos. En su lugar, construye una ruta utilizando un elemento padre estático cercano con un ID. Puede personalizar este comportamiento especificando una expresión regular para excluir ciertos IDs dinámicos, garantizando un targeting más preciso.

​
Configuración personalizada

Si su sitio web no es una SPA completa o necesita gestionar partes específicas del sitio, consulte la siguiente sección. Hay cuatro casos de uso diferentes para configuraciones personalizadas de SPA.

​
SPA parciales

Para habilitar esta opción para páginas específicas, desactívela en Advanced settings y añada el siguiente código a su Global script: 
if (document.location.href.includes('mySPApage')) {
     Kameleoon.API.Core.enableSinglePageSupport();
 }
Reemplace “mySPApage_” con la URL de su embudo._

​
Cambios de página sin cambios de URL

En los casos en los que el DOM se actualiza sin un cambio de URL, recurra a indicadores alternativos para recargar Kameleoon. A continuación se muestra un ejemplo que utiliza sessionStorage para detectar cambios de página. Puede añadir el código a su Global script: 
window.kam_step = JSON.parse(window.sessionStorage.getItem('formStep'))?.step;
 Kameleoon.API.Core.runWhenConditionTrue(() => {
     return window.kam_step != JSON.parse(window.sessionStorage.getItem('formStep'))?.step;
 }, () => {
     Kameleoon.API.Core.load();
 });

​
Detectar cambios de página con pathname

Para páginas en las que necesite que Kameleoon vuelva a ejecutarse, pero solo cuando el pathname cambie (ignorando los parámetros de consulta), detecte los cambios utilizando el pathname en lugar de la URL completa. El siguiente código se puede añadir a su Global script: 
if (document.location.href.includes('configurator')) {
     window.kam_configurator_url = document.location.pathname;
 `Kameleoon.API.Core.runWhenConditionTrue(() => {     return window.kam_configurator_url != document.location.pathname; }, () => {     Kameleoon.Gatherer.Referrer.update(window.kam_configurator_url);     Kameleoon.API.Core.load(); });`
 } else {
     Kameleoon.API.Core.enableSinglePageSupport();
 }

​
Reaplicar el código de variación sin recargar Kameleoon

En algunos casos, ciertos elementos de la página son dinámicos y, cuando el código se rehidrata, puede sobrescribir el código de Kameleoon que ya se ha aplicado. Para evitarlo, tiene dos opciones:
  • Puede informar a Kameleoon cuando la página o un elemento específico haya terminado de renderizarse usando uno de los siguientes métodos:
    • Definir una variable de ventana; por ejemplo, window.pageLoadForKam = true.
    • Activar un evento en la página 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 objetivo. A continuación, en el código de variación, utilice esta clase o atributo para realizar cambios en la página o en elementos específicos.
  • En el código de variación, puede establecer el cuarto argumento de la función runWhenElementPresent en true. Este argumento habilita la compatibilidad con elementos dinámicos y aplicaciones de una sola página (SPA). Cuando esta opción está habilitada, si Kameleoon no encuentra el selector CSS especificado para el elemento durante la carga inicial de la página, Kameleoon supervisará el DOM en busca del selector. Una vez que el elemento aparezca en el DOM, Kameleoon ejecutará la función de retrollamada. Además, si un nuevo elemento que coincida con el selector se añade más tarde a la página, Kameleoon reejecutará la retrollamada con el nuevo elemento añadido.
Use el código siguiente con moderación y solo cuando sea estrictamente necesario. Limite su uso al mínimo número de casos y evite aplicarlo a varios elementos simultáneamente para mantener un rendimiento óptimo de la página. Tenga cuidado con la posibilidad de un bucle infinito si el código fuente de la página modifica el elemento cada vez que se actualiza.
const insertMyNewCTA = () => {
     if (document.querySelector("#kameleoonElement-myNewCTA") == null) {
 `    Kameleoon.API.Core.runWhenElementPresent(         '#myElement',         ([myElement]) => {             myElement.insertAdjacentHTML('beforebegin', "<button id='kameleoonElement-myNewCTA'>More info</button>");         },         null, true     ); }`
 }
 insertMyNewCTA();

​
Recuperar datos del dataLayer

Al utilizar GTM como método de recuperación para establecer valores de datos personalizados, Kameleoon depende de un dataLayer definido para acceder a sus valores. Si el dataLayer se actualiza tras cada cambio de URL apilando nuevas entradas en lugar de eliminar las antiguas, Kameleoon puede recuperar valores obsoletos. Esta recuperación se produce porque los datos antiguos persisten entre páginas y Kameleoon puede ejecutarse antes de que se actualice el dataLayer. Para evitar este problema, asegúrese de que las entradas obsoletas se eliminen antes de añadir nuevas. Como alternativa, implemente código personalizado para esperar a que cambie la longitud del dataLayer antes de recuperar los últimos valores: 
`window.dataLayerLength = window.dataLayerLength || 0; Kameleoon.API.Core.runWhenConditionTrue(() => { return window.dataLayer && window.dataLayerLength != window.dataLayer.length }, () => { window.dataLayerLength = window.dataLayer.length //then, retrieve and use dataLayer info here })`

​
Consideraciones generales

​
Event listeners, timeouts e intervalos

Utilice Kameleoon.API.Utils para gestionar event listeners, timeouts o intervalos. Estos métodos garantizan que los listeners y los temporizadores se eliminen automáticamente cuando se produzca un cambio de URL sin recarga de la página. Estas eliminaciones evitan duplicados cuando Kameleoon se vuelve a ejecutar.

​
IDs únicos para los elementos

Cuando añada elementos a través de Kameleoon, asegúrese de que su id empiece por kameleoonElement. Esta convención de nombres garantiza que el elemento se elimine antes de que Kameleoon se vuelva a ejecutar, evitando duplicación o conflictos. Ejemplo: <div id="kameleoonElement-myNewCTA"></div>

​
Incremento de la vista de página

Kameleoon solo cuenta una nueva página cuando todos sus scripts se vuelven a ejecutar, lo que ocurre bajo dos condiciones:
  • Cuando se llama a Kameleoon.API.Core.enableSinglePageSupport(), combinado con un cambio de URL.
  • Cuando se activa explícitamente Kameleoon.API.Core.load().
Siguiendo todas las directrices anteriores, puede garantizar que las variaciones se implementen de forma eficaz y coherente en las SPA, mejorando la experiencia de usuario al tiempo que se mantiene la integridad de los datos. Si necesita asistencia adicional, no dude en ponerse en contacto con el equipo de Kameleoon.

​
Alternativas

​
SDK de REACT y JS

Kameleoon ofrece un SDK de React y un SDK de JavaScript/TypeScript diseñados para aplicaciones de una sola página. Estos SDK proporcionan un método alternativo para ejecutar experimentos y gestionar feature flags dentro de su SPA integrando el SDK en el código base de su aplicación. Para obtener una lista completa de funciones disponibles para SPA, consulte nuestra documentación de SDK.

​
Plugin de GatsbyJS

Kameleoon también proporciona un plugin específico para aplicaciones GatsbyJS. Para integrar Kameleoon con su aplicación GatsbyJS, siga las instrucciones descritas en este artículo.

​
Framework Next.js

Si su sitio web está construido con Next.js, hay una consideración importante al utilizar el Graphic editor de Kameleoon. Los sitios web de Next.js se cargan de una forma específica que podría provocar un conflicto con los cambios de Kameleoon si ocurren demasiado rápido, lo que podría hacer que la página se muestre incorrectamente.

​
Solución recomendada

El equipo de Kameleoon creó una guía de configuración dedicada para Next.js que resuelve este problema automáticamente. Esta configuración garantiza:
  • Kameleoon se carga rápida y eficientemente.
  • Su página se muestra sin parpadeos.
  • Los cambios aparecen en el momento adecuado sin romper su sitio.
  • La navegación de la página funciona correctamente.
Consulte la guía paso a paso: Implementación con Next.js

​
Enfoques alternativos

Si no puede utilizar la configuración recomendada anterior, hay otras formas de evitar conflictos. Su desarrollador puede añadir una señal sencilla que indique a Kameleoon “la página está lista para los cambios ahora”.
  • Método 1: indicador de página lista
    • Añada un marcador al elemento <body> una vez que la página esté completamente cargada. A continuación, configure sus experimentos de Kameleoon para que solo se ejecuten cuando este marcador esté presente.
  • Método 2: evento personalizado
    • Utilice la cola de comandos de Kameleoon para enviar una señal una vez que su página esté lista: Events.trigger('my page is hydrated').
    • A continuación, configure sus experimentos para que utilicen el criterio de targeting Custom event para esperar esta señal antes de realizar cambios. Para más detalles sobre la implementación de eventos personalizados y otros criterios de targeting, consulte este artículo
La configuración dedicada de Next.js gestiona todo esto automáticamente, por lo que no tendrá que preocuparse por estos detalles técnicos.