Saltar al contenido principal
Esta página incluye instrucciones paso a paso para instalar Kameleoon, incluida la creación de un proyecto para su sitio web, aplicación móvil o ambos, y la configuración de los ajustes del proyecto.

​
Descripción general

Antes de lanzar experimentos en su sitio web o aplicación móvil, debe instalar el script de Kameleoon. Este script, que contiene el código único de su proyecto, debe añadirse a la etiqueta <head> del código fuente. Si su plan lo permite, puede gestionar varios sitios o aplicaciones desde su cuenta de Kameleoon, lo cual es útil para realizar pruebas en entornos de staging o preproducción. Existen varias opciones de configuración. Su secuencia sigue este patrón:

​
Configuración del proyecto

En la aplicación de Kameleoon verá una lista de sus proyectos. De forma predeterminada, tendrá una tarjeta de proyecto para el sitio web o la aplicación móvil que indicó al registrarse.

​
Configurar un proyecto existente

Para modificar la configuración de un proyecto:
  1. Haga clic en Setup en la tarjeta del proyecto.
  2. Revise la configuración del proyecto y haga clic en Modify setup.
  3. En la ventana emergente que aparece, haga clic en Modify de nuevo para acceder a sus ajustes.

​
Crear un nuevo proyecto

Para crear un nuevo proyecto:
  1. Haga clic en New project.
  2. Introduzca la URL de su sitio y, opcionalmente, un nombre y una descripción.
  3. Haga clic en Add.
Aparecerá una nueva página para guiarle durante la instalación.
Su capacidad para crear proyectos adicionales depende de su plan de Kameleoon.

​
Elija la configuración de su implementación

Al configurar un nuevo proyecto, se le pedirá que elija la configuración de implementación. Para obtener detalles técnicos, incluido cómo instalar Kameleoon mediante un gestor de etiquetas o cómo implementar tipos de scripts personalizados, consulte este artículo.

​
Consentimiento

Antes de instalar el script de Kameleoon en su sitio web, asegúrese de que su configuración cumpla con la política de gestión del consentimiento de su organización. Si utiliza una Plataforma de Gestión del Consentimiento (CMP), puede integrarla con Kameleoon para controlar cuándo se activan los experimentos y la recopilación de datos. Para más detalles, consulte el artículo sobre gestión del consentimiento de Kameleoon.

​
Configuración del dominio

Puede definir qué dominios y subdominios pueden cargar el script de Kameleoon y acceder a sus funcionalidades.
  • En Domain configuration, haga clic en Add a domain/subdomain para incluir dominios en la lista permitida para el seguimiento entre dominios.
    • Esto le permite utilizar el Graphic editor de Kameleoon y almacenar/recuperar datos de visitantes entre dominios.
    • Si intenta utilizar Kameleoon en un dominio que no esté en la lista, la carga fallará debido a las políticas de seguridad del navegador (CORS).

​
Seguimiento entre dominios

El seguimiento entre dominios le permite:
  • Hacer seguimiento del mismo visitante en distintos dominios y subdominios (por ejemplo, example.com y example.org).
  • Evitar que los usuarios sean reclasificados como “nuevos visitantes” cuando se desplazan entre dominios.
  • Ofrecer experiencias coherentes de personalización y experimentación entre propiedades.
Debería habilitar el seguimiento entre dominios si planea unificar los datos de sesión en varios dominios.

​
Autorizaciones

Si está segmentando subdominios, debe configurar los siguientes encabezados HTTP:
Obtenga más información sobre la Intelligent Tracking Prevention (ITP) de Apple, que restringe el seguimiento entre sitios en Safari, en esta documentación de ITP.

​
Alojamiento de recursos

Puede elegir si Kameleoon aloja sus recursos públicos o si prefiere autoalojarlos.
  • Seleccione una opción en el menú desplegable de la página de configuración.
  • Si elige autoalojamiento, proporcione la URL de su red de entrega de contenido (CDN).
Obtenga más información sobre el alojamiento de recursos aquí.

​
Instalar el script de Kameleoon

Después de definir la URL de su sitio, Kameleoon genera un script para la instalación.
  1. Copie el fragmento de código proporcionado.
  2. Péguelo inmediatamente después de la etiqueta <head> en el código fuente de su sitio.
  3. Guarde y suba la página o páginas actualizadas a su servidor.
  4. Haga clic en Validate en Kameleoon.
Para obtener los mejores resultados, instale el script lo antes posible en el proceso de carga de la página.
Si Kameleoon no puede detectar el script, asegúrese de que se haya añadido correctamente. Puede optar por omitir la verificación si está seguro de que el script está presente.

​
Prevención del parpadeo

Cuando se carga una página web, los usuarios pueden ver brevemente la versión original antes de que se aplique la variación. Este destello momentáneo se denomina efecto de parpadeo o “flickering”. El parpadeo se produce cuando los cambios de la variación se retrasan, generando un cambio visible entre el contenido original y el modificado. El parpadeo puede afectar a la experiencia del usuario y a la fiabilidad del experimento, especialmente en pruebas A/B.

​
Pautas para evitar el parpadeo

​
Implementación

Coloque el script de Kameleoon lo más alto posible en la etiqueta <head>. Asegúrese de que el script se carga en menos de un segundo, idealmente por debajo de 500 ms. Para comprobar el tiempo de carga de Kameleoon, utilice la pestaña Network en las herramientas de desarrollo de su navegador.
La forma más eficaz de garantizar una carga rápida es instalar Kameleoon directamente en el código fuente HTML, en lugar de utilizar un gestor de etiquetas como Google Tag Manager. De manera opcional, puede utilizar el script anti-parpadeo como capa adicional de protección. Para más información, consulte la documentación para desarrolladores de Kameleoon. Si habilita esta opción, dispondrá de varias configuraciones para controlar el comportamiento de Kameleoon en caso de que se produzca el tiempo de espera. La duración del tiempo de espera se puede configurar en el script instalado y, de forma predeterminada, es de 1000 ms. Para explorar las opciones disponibles, consulte la captura de pantalla siguiente.
Puede acceder al menú desplegable Behavior if timeout occurs haciendo clic en Admin > Configuration > General.

​
Consentimiento

Si su política de consentimiento está configurada como consent required, el parpadeo puede producirse en la primera vista de página cuando el visitante aún no haya otorgado su consentimiento. Este parpadeo se produce si elige bloquear parcial o totalmente Kameleoon cuando el consentimiento es desconocido. Para prevenir el parpadeo, no debería bloquear Kameleoon, de modo que los experimentos puedan mostrarse antes de que se otorgue el consentimiento en la página de aterrizaje del visitante. Este enfoque cumple plenamente con normativas de privacidad como el GDPR, la CCPA y otros marcos importantes en el Reino Unido, Canadá y Estados Unidos, ya que no se realiza ningún seguimiento ni almacenamiento de datos (cookies/localStorage) antes de que se otorgue el consentimiento. Para explorar las opciones disponibles, consulte la captura de pantalla siguiente.
Para acceder al menú desplegable Behavior when consent is unknown, haga clic en Admin > Configuration > Experiment/Personalization.

​
Segmentación

Utilice información de carga temprana
Para obtener el mejor rendimiento, base la segmentación en datos que estén disponibles inmediatamente al cargar la página, como:
  • URL de la página
  • Tipo de navegador
  • Tipo de dispositivo
  • cookies/localStorage
Cuando sea posible, evite segmentar elementos que se carguen tarde, como las variables del dataLayer. Dado que estos pueden cargarse de forma asíncrona, utilizarlos para la segmentación puede retrasar la ejecución de la variación. Si un segmento depende de una condición JS personalizada o de datos personalizados que a su vez dependen del dataLayer, también podría producirse parpadeo. Para minimizar el parpadeo, asegúrese de que todas las condiciones utilizadas para la segmentación se resuelvan lo antes posible en el ciclo de vida de la página. Para más información sobre todas las condiciones de segmentación en el Segment Builder, consulte este artículo.

​
Código de variación

Utilice CSS en lugar de JavaScript para los cambios visuales
Utilizar CSS en lugar de JavaScript garantiza un renderizado más rápido y fluido. CSS debería utilizarse para:
  • Ocultar o modificar elementos
  • Intercambiar bloques
  • Cambiar estilos o texto
Optimice la ejecución de JavaScript con la Activation API
Si es necesario usar JavaScript, utilice la Activation API de Kameleoon para asegurarse de que las variaciones se apliquen en el momento adecuado:
  • runWhenConditionTrue: ejecuta el código cuando se cumple una condición específica.
  • runWhenElementPresent: garantiza que la variación se muestre en cuanto el elemento segmentado se cargue en la página. Utilizar estos métodos evita los retrasos provocados por elementos que se cargan de forma asíncrona.
Gestión de aplicaciones de una sola página
Si su experimento se ejecuta en una aplicación de una sola página (SPA) o en una página que se actualiza dinámicamente, se requieren pasos de implementación especiales. Siga esta guía sobre cómo configurar un experimento en una SPA para conocer las mejores prácticas.