Saltar al contenido principal
El modo híbrido le permite combinar el motor web de Kameleoon y un SDK del lado del servidor para que cada tarea utilice la integración más apropiada.
  • Implemente y despliegue variaciones con mayor facilidad en el lado del servidor, mientras que el tracking a herramientas de analítica de terceros puede realizarse de forma más efectiva utilizando el motor de Kameleoon a través del archivo de la aplicación engine.js (antes llamado kameleoon.js), ya que muchas soluciones externas de analítica web solo funcionan en el frontend.
  • Segmente usuarios utilizando datos recopilados en el cliente, como conversiones de objetivos o datos personalizados basados en variables del data layer, dentro de segmentos.
  • Filtre y desglose datos en los reports de Kameleoon utilizando más de 25 puntos de datos recopilados en el cliente por el motor de la aplicación frontend.
  • Excluya usuarios de un feature flag si han sido expuestos a un experimento web o una personalización.
Este artículo describe cómo implementar la integración óptima entre el SDK web de Kameleoon y el archivo de la aplicación frontend de Kameleoon para que ambos lados se comuniquen entre sí. Use el tag asincrónico de Kameleoon sin anti-parpadeo.
Para la experimentación web, normalmente necesita añadir el tag de instalación JavaScript en la etiqueta <head> o al principio de la etiqueta <body> para evitar el parpadeo. Si utiliza el modo híbrido donde el parpadeo no es una preocupación, puede instalar el script en cualquier lugar antes de la etiqueta de cierre </body>, ya que el tag solo se utiliza con fines de tracking.
La experimentación híbrida es actualmente compatible solo con los Web SDKs. Aunque los SDKs móviles aún no admiten el modo híbrido con herramientas de analítica web de terceros, los puntos de datos recopilados en el sitio web aún pueden aprovecharse si se ofrecen tanto un sitio web como una aplicación móvil. Esto significa que los datos recopilados de un usuario identificado en el sitio web también pueden utilizarse en la aplicación móvil, siempre que el visitante esté identificado de forma coherente entre ambas plataformas.

​
Sincronizar los IDs de usuario entre backend y frontend​

Uno de los retos del modo híbrido es asegurarse de que Kameleoon pueda identificar correctamente a cada visitante como la misma persona en ambos lados. En Kameleoon, este requisito implica que el visitorCode, que es un ID único para cada visitante, debe ser idéntico en ambos lados. Por ejemplo, un visitante registrado con el visitorCode 10ctbql0zpf4rwjy para una variación de experimento en el backend debe estar asociado con el código de visitante 10ctbql0zpf4rwjy cuando se dispare una conversión en el frontend. Utilizar el mismo ID garantiza un tracking correcto de las acciones del visitante, lo que se traduce en datos y estadísticas correctos. Para sincronizar los IDs de usuario, su app híbrida necesita llamar al método getVisitorCode() antes de llamar a otros métodos del SDK. Como las convenciones de nomenclatura varían entre lenguajes, los nombres de los métodos varían ligeramente según el SDK, pero cada lenguaje tiene un método equivalente con un nombre similar. Kameleoon utiliza el siguiente enfoque:
  1. En el frontend, el motor JavaScript de Kameleoon genera aleatoriamente un visitorCode para cada nuevo visitante. El motor considera nuevo a un visitante si no puede encontrar un código de visitante previo en el navegador del usuario (por ejemplo, en una cookie o en local storage). Esto suele ocurrir cuando el motor de Kameleoon se ejecuta por primera vez en el navegador del visitante. El motor de Kameleoon también puede obtener el identificador de una cookie que le pasa el backend. Esta opción le permite establecer el identificador en el servidor, en lugar de en el frontend. Por ejemplo, use esta opción si desea especificar su propio código de visitante único para cada visitante.
Si unifica los datos de sesión entre subdominios, Kameleoon busca una clave kameleoonVisitorCode en local storage. Si la clave está presente, su valor se utiliza como identificador para el código de visitante. La versión en local storage de esta clave siempre tiene prioridad, incluso si existe una cookie kameleoonVisitorCode con un valor distinto. Tenga en cuenta que Kameleoon no resetea la cookie JavaScript si los valores de local storage y de la cookie coinciden. Por motivos de ITP, es importante mantener intactas las cookies que se hayan podido establecer en el lado del servidor.
  1. En el backend, debe llamar al método getVisitorCode() o su equivalente en su SDK. Asegúrese de llamar a este método antes de proporcionar un identificador de visitante a cualquier otro método del SDK. getVisitorCode() acepta un argumento opcional de tipo string que puede utilizar para pasar su propio identificador en lugar de depender de un ID de Kameleoon generado aleatoriamente. Cuando se llama al método, Kameleoon busca primero una cookie kameleoonVisitorCode o un parámetro de consulta asociado a la solicitud HTTP actual. Si lo encuentra, el SDK utiliza ese valor como identificador del visitante.
Si no se encuentra ninguna cookie ni parámetro, Kameleoon utiliza el argumento del método getVisitorCode(), si lo ha proporcionado, como identificador. Si no proporciona un argumento, Kameleoon genera el ID aleatoriamente. En cualquiera de estos casos, Kameleoon también establece la cookie kameleoonVisitorCode del lado del servidor con ese valor (mediante una cabecera HTTP). Siguiendo este enfoque, el visitorCode se guarda y se comparte entre frontend y backend. Si se implementa un experimento en la primera página del recorrido del visitante en su sitio web, el SDK generará el identificador y lo pasará al motor JavaScript. Si el recorrido comienza en una página donde no se llama a getVisitorCode() (o no se ejecuta el snippet de sincronización) en el backend, entonces el motor JavaScript generará primero el identificador y lo pasará al SDK. El SDK lo leerá y, a continuación, lo reescribirá como cookie del lado del servidor para sortear las restricciones de ITP.

​
Vincular feature experiments con código de tracking en el frontend​

Suele resultar útil configurar las variaciones del experimento con un SDK, pero implementar el tracking en el frontend usando el motor JavaScript. Este es un escenario habitual por los siguientes motivos:
  • Las plataformas de analítica web (como Mixpanel o Google Analytics 4) tienden a implementarse en el frontend.
  • Es posible que ya esté en uso un plan estándar de tagging del lado del cliente para Kameleoon mediante web experimentation.
  • El seguimiento de eventos y puntos de datos en el lado del frontend para fines de analítica con reporting suele ser más cómodo.
  • Hay puntos de datos adecuados para su uso en feature experiments que son más fáciles de recopilar en el frontend.

​
Enviar eventos de exposición a analítica de terceros​

Kameleoon ofrece integraciones nativas con plataformas de analítica y CDP. En modo híbrido, puede usar cualquiera de estas integraciones en combinación con feature experiments, sin necesidad de escribir código adicional. El motor frontend necesita saber cuándo se ha producido un experimento en el backend, es decir, cuándo un visitante ha sido asignado a un experimento. Esto garantiza que solo se cuenten los visitantes que realmente han disparado y visto el experimento. Para conseguir este objetivo, use el método getEngineTrackingCode() (el nombre varía ligeramente según el SDK), que está disponible en todos los SDKs del lado del servidor. Este método devuelve el código JavaScript que debe insertarse en la página para enviar automáticamente los eventos de exposición desde el frontend a la solución de analítica utilizada. Se puede incrustar en la página HTML devuelta. Por ejemplo: 
<!DOCTYPE html>
<html lang="en">
  <body>
    <script>
      const engineTrackingCode = `
        window.kameleoonQueue = window.kameleoonQueue || [];
        window.kameleoonQueue.push(['Experiments.assignVariation', 123456, 7890]);
        window.kameleoonQueue.push(['Experiments.trigger', 123456, true]);
      `;
      const script = document.createElement('script');

      script.textContent = engineTrackingCode;
      document.body.appendChild(script);
    </script>
  </body>
</html>
También debe activar la integración elegida (por ejemplo, Google Analytics 4 o Mixpanel) al configurar su feature experiment. Los datos relevantes (como ID del experimento, nombre del experimento, ID de la variación, nombre de la variación) se enviarán automáticamente a la plataforma de terceros por el motor JavaScript de Kameleoon.

​
Usar puntos de datos y eventos del frontend en feature experiments​

Si ha implementado Kameleoon en modo híbrido, los objetivos y los puntos de datos se rastrearán automáticamente en el frontend y aparecerán en los reports de Kameleoon como criterios de filtrado y desglose. Además, varias condiciones de segmentación estarán disponibles en el SDK de Kameleoon, listas para usar con fines de segmentación.

​
Gestionar el consentimiento en modo híbrido​

Al utilizar Kameleoon en modo híbrido y el consentimiento está configurado como “Required”, asegúrese de llamar tanto a la Activation API JavaScript como a los métodos del SDK al recopilar el consentimiento para que Kameleoon pueda recopilar eventos de usuario tanto desde el archivo de la aplicación Kameleoon como desde el SDK. Además, como Kameleoon tiene restringido el almacenamiento de la clave visitorCode en una cookie, asegúrese de que la clave visitorCode generada por el SDK para todas las primeras solicitudes se comparta con el motor de Kameleoon que se ejecuta en el cliente. Lea las consideraciones técnicas.
La información de consentimiento se sincroniza entre el motor de Kameleoon (engine.js) y el SDK JavaScript solo cuando alguno de los componentes se reinicializa (por ejemplo, al recargar la página o al llamar a API.Core.load). Como resultado, recomendamos encarecidamente gestionar el consentimiento de forma explícita usando los métodos dedicados que proporcionan el motor y el SDK, en lugar de confiar en este mecanismo de sincronización.