Skip to main content
Esta página incluye instrucciones paso a paso para instalar Kameleoon, incluida la creación de un proyecto de Web Experimentation para su sitio web y la configuración de los ajustes del proyecto. (Los proyectos de Feature Experimentation admiten tanto la plataforma Web / Backend como la de aplicaciones móviles.)

​
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. Cuando crea un proyecto, el formulario de configuración le guía a través de cuatro pasos. El método de instalación determina qué opciones verá: Si activa el seguimiento entre dominios, la lista de verificación también incluye una tarea para alojar el archivo HTML estático de Kameleoon en su dominio principal.

​
Configuración del proyecto

En la aplicación de Kameleoon, haga clic en Admin > Projects para ver una lista de sus proyectos. De forma predeterminada, su cuenta tiene un 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 instalación de un proyecto:
  1. Haga clic en Admin > Projects.
  2. Haga clic en Edit en la fila del proyecto y, a continuación, en la pestaña Setup.
  3. En la sección Installation method o Technical configuration, haga clic en Edit. Se abre el formulario de configuración de tres pasos.

​
Crear un nuevo proyecto

Para crear un nuevo proyecto:
  1. Haga clic en Admin > Projects y, a continuación, en New project.
  2. Seleccione Web Experimentation, o All campaign types si también ejecuta feature flags y experimentos con SDK desde el mismo proyecto. Una vez creado el proyecto, no puede cambiar su tipo. Haga clic en Next.
  3. Introduzca el dominio principal del proyecto, elija un color y, opcionalmente, añada un nombre, una descripción y etiquetas; después, haga clic en Next.
  4. Seleccione el método de instalación y, para el fragmento de código, el modo de carga; después, haga clic en Next.
  5. Configure la compatibilidad con sitios web dinámicos (solo para el fragmento de código), el alojamiento de recursos y los dominios; después, haga clic en Next. Si seleccionó Shopify como método de instalación, Kameleoon omite este paso.
  6. Complete las tareas de la lista de verificación y, a continuación, haga clic en Complete setup.
Para terminar más tarde, haga clic en Save for later en el paso Installation method o Technical configuration. Kameleoon guarda el proyecto como borrador y el proyecto aparece en la página Projects con el estado Draft. Cuando hace clic en Complete setup, Kameleoon guarda el proyecto como Enabled. Para ver la lista completa de opciones, consulte Crear un proyecto.
Su capacidad para crear proyectos adicionales depende de su plan de Kameleoon.

​
Elija la configuración de su implementación

En el paso Installation method del formulario de configuración, elija cómo instalar Kameleoon y cómo se carga Kameleoon en su sitio web. Para obtener detalles técnicos, incluido cómo instalar Kameleoon mediante un gestor de etiquetas o cómo implementar tipos de scripts personalizados, consulte el artículo de implementación estándar.

​
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.

​
Dominios y subdominios

Puede definir qué dominios y subdominios pueden cargar el script de Kameleoon y acceder a sus funcionalidades.
  • En el paso Technical configuration, bajo Domains and subdomains, introduzca un dominio y haga clic en Add domain 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. Para habilitarlo, active Track visitors across listed subdomains en Domains and subdomains.

​
Autorizaciones

Si está segmentando subdominios, compruebe estos dos ajustes de 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.
  • En el paso Technical configuration, bajo Resource hosting, active Self-host the script file, Self-host images o ambas opciones.
  • Introduzca la URL de su red de entrega de contenido (CDN) o servidor en Script file URL, Image base URL o en ambos.
Obtenga más información sobre el alojamiento de recursos aquí.

​
Instalar el script de Kameleoon

Después de definir el dominio principal de su proyecto, Kameleoon genera un script para la instalación. Lo encontrará en la pestaña Setup y en la tarea Add JavaScript snippet to your website del paso Checklist.
  1. Haga clic en Copy para copiar el fragmento de código.
  2. Péguelo inmediatamente después de la etiqueta <head> en el código fuente de su sitio.
  3. Guarde y suba las páginas actualizadas a su servidor.
  4. En Kameleoon, haga clic en Mark as completed.
Instale el script lo antes posible en el proceso de carga de la página.

​
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 750 ms. Para explorar las opciones disponibles, consulte la captura de pantalla siguiente.
El formulario Settings con el menú desplegable Behavior if timeout occurs en la sección Campaign display
Puede acceder al menú desplegable Behavior if timeout occurs haciendo clic en Admin > Projects, haciendo clic en Edit en la fila de su proyecto y abriendo la pestaña Settings. Haga clic en Edit en la sección Campaign display.

​
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.
La pestaña Consent con las tres secciones de política de consentimiento
Para acceder al menú desplegable Behavior when consent is unknown, haga clic en Admin > Projects, haga clic en Edit en la fila de su proyecto y abra la pestaña Consent. Haga clic en Edit en la sección For A/B tests and feature experiments o For personalizations y, a continuación, seleccione Consent required en Consent policy.

​
Segmentación

Utilice información disponible al cargar la página
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.

​
FAQ

Este problema ocurre si habilita el seguimiento entre dominios, que requiere que su dominio principal aloje un iframe estático.Cómo funciona el iframe de KameleoonEl iframe garantiza la coherencia de los datos entre subdominios al leer y escribir en localStorage en el dominio anfitrión. Este mecanismo permite a Kameleoon hacer seguimiento del mismo visitante sin llamadas adicionales al servidor. Para más detalles, consulte Unificar los datos de sesión entre subdominios.Aseguramos el iframe mediante tres medidas:
  1. Acceso restringido: solo los dominios incluidos en la variable allowedDomains pueden solicitar el iframe.
  2. Verificación del sitecode: solo el sitecode especificado puede solicitar el iframe.
  3. Almacenamiento con prefijo: Kameleoon solo accede a las entradas con el prefijo kameleoon.
Kameleoon recopila datos no personales. Consulte la lista de datos recopilados y gestione el consentimiento mediante las API de gestión del consentimiento de Kameleoon.Resolver el problema de visualizaciónEl encabezado X-Frame-Options impide que los navegadores rendericen páginas en marcos para evitar el click-jacking. Para más información, consulte la documentación de Mozilla.Para habilitar el seguimiento entre dominios, no debe establecer el encabezado X-Frame-Options. Puede asegurar el iframe proporcionando una lista restringida de dominios en el archivo del iframe alojado.
Es posible que vea un error que indica que el script https://xxxxxx.kameleoon.eu/kameleoon.js infringe su Política de seguridad de contenido (CSP).Si su sitio restringe los recursos mediante encabezados CSP, actualice su política para permitir los recursos de Kameleoon. Consulte la lista completa de dominios de Kameleoon que debe permitir.
Navegadores web compatiblesKameleoon no es compatible con algunos navegadores antiguos. Si un visitante utiliza un navegador no compatible, verá la página original en lugar del experimento. Volver a la página original no afecta negativamente a los resultados del experimento.El script de Kameleoon es compatible con:
  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
Kameleoon garantiza la compatibilidad con las tres últimas versiones de cada navegador.Navegadores compatibles con el Graphic editorPara los navegadores que el Graphic editor soporta, consulte ¿Qué navegadores soporta el Graphic editor?.Compatibilidad con sitios web de diseño adaptablePuede crear experimentos para sitios web adaptables utilizando funciones avanzadas de edición. Los principales desafíos suelen consistir en redimensionar y reposicionar bloques de contenido.Dado que las páginas se muestran en función de la resolución o el dispositivo, tenga precaución al mover elementos. Los mapas de calor no están disponibles para estas páginas, ya que carecen de un marco fijo.Kameleoon ofrece herramientas avanzadas para ayudarle a mover elementos y evitar problemas de diseño.
Cuando un visitante accede a su sitio web, su navegador descarga el código del sitio y el script de Kameleoon. El tiempo de carga de la página depende de la longitud del código y de los recursos externos. El almacenamiento en caché mejora el rendimiento en visitas posteriores al guardar los recursos estáticos en la caché del navegador.Aunque el almacenamiento en caché mejora la experiencia del usuario, puede retrasar la aparición de nuevos experimentos para los visitantes recurrentes que tengan una versión anterior del script en su caché.Para resolverlo, el script de Kameleoon incluye un indicador Cache Expiration (TTL: Time-to-live). El indicador ordena al navegador que descargue una nueva versión del script cada 1,5 horas.
Algunos navegadores móviles pueden ignorar la configuración de TTL para optimizar el rendimiento, según la política del navegador.
El efecto flicker (o parpadeo) se produce cuando un visitante ve brevemente la página original antes de que se cargue la variación. El parpadeo puede ocurrir cuando el script de Kameleoon se carga después del contenido de la página, por lo que el navegador aplica los cambios de la variación en último lugar. Para reducir el parpadeo, coloque el script de Kameleoon lo más alto posible en el <head> del HTML. Para las directrices completas, consulte Prevención del parpadeo.
Es muy poco probable que Kameleoon entre en conflicto con otros scripts.Kameleoon utiliza JavaScript puro y no requiere jQuery, lo que evita conflictos con sitios que utilizan jQuery. Funciona de forma independiente de los lenguajes del lado del servidor y evita las variables globales de JavaScript para minimizar los riesgos de incompatibilidad.jQueryKameleoon no entra en conflicto con jQuery si lo utiliza en su sitio web. No obstante, Kameleoon utiliza la biblioteca Sizzle, que es el motor de selectores CSS utilizado por jQuery. Puede utilizar Sizzle cuando crea sus experimentos.