Skip to main content
Para implementar Kameleoon en su sitio web, añada una etiqueta de instalación JavaScript al código fuente HTML de sus páginas.

Implemente Kameleoon en el código fuente HTML

Para Web Experimentation, añada siempre la etiqueta de Kameleoon en la sección <head> de su código fuente HTML. Colocar la etiqueta en la sección <body>, especialmente al final de la página, aumenta el riesgo de flickering. Añada la etiqueta lo más arriba posible en la sección <head>, idealmente inmediatamente después de la apertura de la etiqueta <head>. Esta posición permite al navegador cargar el archivo de aplicación de Kameleoon antes que otros recursos. El CSS u otros scripts colocados antes de la etiqueta de Kameleoon aumentan el riesgo de flickering.
Si utiliza el modo híbrido (tanto un SDK como la etiqueta de instalación JavaScript), puede colocar la etiqueta más adelante en el body, por ejemplo justo antes del cierre </body>. El flicker no se produce cuando se utiliza un SDK web.
Kameleoon recomienda el método etiqueta asíncrona con anti-flicker para Web Experimentation. Aunque este método carga Kameleoon más lentamente que otros, ofrece la implementación más segura. Un script asíncrono garantiza que Kameleoon no bloquee la carga de su sitio web. La superposición blanca “simula” un script cargado de forma síncrona para evitar el flickering. Para priorizar tiempos de carga más rápidos, utilice en su lugar la etiqueta síncrona.
Si su sitio web utiliza varios subdominios, incluya el código adicional para unificar los datos de sesión entre subdominios en el script de implementación. Kameleoon necesita este código para utilizar los datos de sesión en todos los subdominios para una segmentación conductual avanzada.
Añadir cualquier script o recurso a su sitio web incrementa la carga. Kameleoon prioriza el rendimiento y optimiza su código para obtener los mejores resultados posibles.

Etiqueta asíncrona con anti-flicker

Este método carga el script de Kameleoon de forma asíncrona e incluye código anti-flickering. Kameleoon utiliza una “regla CSS bloqueante” para ocultar el contenido de la página y la elimina en cuanto se carga el código de la aplicación (normalmente en menos de 50 ms) o cuando expira el timeout especificado (predeterminado 750 ms). Esta salvaguarda garantiza que Kameleoon nunca provoque que su sitio se bloquee o permanezca en blanco indefinidamente. Ajuste el timeout mediante la variable JavaScript kameleoonLoadingTimeout en el snippet de instalación.
Si se produce un timeout y el código de Kameleoon termina cargándose, puede configurar los siguientes pasos en los ajustes avanzados de confirmación de su proyecto. Tiene dos opciones:
  • Deshabilitar Kameleoon por completo para ese visitante.
  • Ejecutar el código de Kameleoon con normalidad (lo que puede provocar flickering).
Sustituya el marcador SITE_CODE por el site code de su proyecto.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.
El contador del timeout comienza cuando el navegador ejecuta el código, no cuando empieza a descargar engine.js. Establecer un timeout demasiado bajo (por ejemplo, 100 ms) puede no dar tiempo suficiente al navegador para descargar y ejecutar el archivo, especialmente en conexiones lentas o cuando hay otros scripts en cola.
Coloque la etiqueta de instalación de Kameleoon dentro de la etiqueta <head> o al principio de la etiqueta <body>. Colocarla más adelante en el <body> puede provocar que la página se cargue, desaparezca y vuelva a aparecer, ya que el código anti-flickering necesita ejecutarse dentro del <head> para funcionar correctamente.

Etiqueta síncrona

Este método carga el script de Kameleoon de forma síncrona para evitar el flickering. No obstante, este enfoque bloquea la carga de la página hasta que el navegador descarga y ejecuta el código de Kameleoon, lo que puede afectar al rendimiento.
Sustituya el marcador SITE_CODE por el site code de su proyecto.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.

Etiqueta asíncrona sin anti-flicker

Esta etiqueta instala el archivo de aplicación de Kameleoon de forma asíncrona sin prevención anti-flicker. Use esta etiqueta si el flicker no es una preocupación, por ejemplo cuando utilice el modo híbrido.
Sustituya el marcador SITE_CODE por el site code de su proyecto.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.

Implemente Kameleoon en un Tag Manager

Kameleoon admite todos los principales Tag Management Systems (TMS). Para evitar el flickering, instale Kameleoon directamente en el código fuente de su página. El uso de un TMS retrasa la carga, lo que a menudo se traduce en un flicker perceptible, especialmente si el TMS se carga al final de la página HTML. Kameleoon no ofrece soporte técnico para problemas de flickering causados por implementaciones con TMS. Los entornos de TMS no permiten la carga síncrona de JavaScript externo. Para implementaciones con TMS, utilice la etiqueta JavaScript asíncrona.
Los dominios de los scripts de Kameleoon varían según el proyecto. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Utilice el dominio que se muestra en la aplicación Kameleoon para su proyecto.
Algunos TMS ofrecen soporte del lado del servidor, lo que permite instalar Kameleoon sin causar problemas. Esta configuración equivale a incrustar el código de instalación directamente en su HTML.

Elija el disparador correcto

Al implementar Kameleoon mediante un TMS, utilice un disparador específico para garantizar que el script se ejecute lo antes posible. Elija el disparador que se active primero en cada página para su TMS concreto.
No configure su TMS para almacenar en caché ni combinar el script de Kameleoon. El archivo de aplicación contiene datos de configuración dinámicos necesarios para ejecutar experimentos y personalizaciones. Almacenar este archivo en caché impide que los experimentos se inicien o se ejecuten correctamente.Evite utilizar tecnología de prevención anti-flicker dentro de un TMS, ya que no está diseñada para funcionar correctamente en ese entorno.

FAQ

Si su sitio web restringe la carga de recursos (scripts, imágenes, multimedia, CSS) mediante la cabecera HTTP estándar Content-Security-Policy (CSP), actualice la CSP de su sitio para permitir la carga de los recursos de Kameleoon. La misma política cubre el archivo de aplicación de Kameleoon y los SDK del lado del cliente.

Configuración sencilla (con comodines)

script-src siempre prevalece sobre default-src. No use esta configuración si ya utiliza la configuración completa en su CSP.
Añada el siguiente contenido a la configuración de su cabecera CSP:

Configuración completa (con todo el detalle)

Kameleoon añade regularmente nuevas funcionalidades al producto, lo que podría dar lugar a URLs adicionales. Enumere explícitamente en la cabecera CSP todos los hosts y tipos de recursos posibles (script, image, etc.).
Reemplace [your-site-code] por su site code de Kameleoon en cada línea donde aparezca y añada esto a su configuración:
Cada URL de la política CSP tiene un propósito específico:
Web Experimentation
  • https://[your-site-code].kameleoon.xx: carga el script de la aplicación Kameleoon Web Experimentation, engine.js (antes llamado kameleoon.js).
  • https://(eu|na)-data.kameleoon.(eu|io): se utiliza para el tracking.
  • https://logger.kameleoon.io: envía datos de tracking para logging.
  • https://data.kameleoon.net: necesario si utiliza la herramienta de simulación de Kameleoon para hacer QA de experimentos en varios subdominios.
Feature Experimentation (SDKs del lado del cliente)
  • https://client-config.kameleoon.com: necesario para versiones de SDK < 2.1.0.
  • https://sdk-config.kameleoon.eu: necesario para versiones de SDK >= 2.1.0.
  • https://events.kameleoon.com:8110: necesario para el streaming en tiempo real, una opción premium.
  • https://api.kameleoon.com: autentica las solicitudes del SDK (/oauth/token).
  • https://(eu|na)-data.kameleoon.(eu|io): se utiliza para el tracking.
  • https://logger.kameleoon.io: envía datos de tracking para logging.
Editores gráficos
  • https://static.kameleoon.com: (obsoleto) carga recursos estáticos para el antiguo editor gráfico.
  • https://editor.kameleoon.com: (obsoleto) utilizado por el antiguo editor gráfico.
  • https://graphical-editor.kameleoon.com: utilizado por el nuevo editor gráfico.
  • https://storage.kameleoon.(eu|io): carga imágenes utilizadas en experimentos creados con los editores gráficos.
Prompt-based experimentation (PBX)
  • https://aibuilder.kameleoon.com: utilizado por el editor prompt-based.
  • https://electra.kameleoon.com: utilizado por el editor prompt-based.
  • https://storage.kameleoon.(eu|io): carga imágenes en el editor prompt-based.
  • https://api.kameleoon.com: carga información relacionada con la cuenta.
  • https://sdk-config.kameleoon.eu: controla los feature flags de Kameleoon activados en el editor prompt-based.
  • wss://electra.kameleoon.com : se utiliza para el intercambio de datos.
Simulación
  • https://api.kameleoon.com: utilizado por la simulación antigua.
  • https://simulation.kameleoon.com: utilizado por la nueva simulación.
Product Recommendation
  • https://static.products.kameleoon.com: carga recursos para el módulo Product Recommendation.
  • https://api.products.kameleoon.com: API utilizada por el módulo Product Recommendation.
  • https://images.products.kameleoon.com: carga imágenes de producto para las recomendaciones.
APIs e integraciones
  • https://api.kameleoon.com: necesario si tiene intención de usar la Automation API para pruebas directamente desde el navegador.
  • https://customers.kameleoon.com: necesario si utiliza la SDK API o una integración personalizada desarrollada por Kameleoon.
Recursos internos
Por defecto, engine.js no incluye rutas de simulación ni información específica de la aplicación para minimizar el tamaño del script. Para incluir estos detalles, cargue el script completo kameleoonFull.js, que proporciona a engine.js los datos necesarios sobre recursos internos e instrucciones de carga.
  • https://static.kameleoon.com: carga recursos internos.
  • https://static.experimentation.dev: carga recursos internos.
  • https://sdk-config.experimentation.dev: controla los feature flags de Kameleoon activados en el producto Kameleoon.
  • https://eu-data.experimentation.dev: envía datos de tracking con fines de logging.
El dominio de sus scripts de Kameleoon https://[your-site-code].kameleoon.xx puede variar de un proyecto a otro. Los proyectos usan kameleoon.eu o kameleoon.io según su fecha de creación. Use el dominio que se muestra en la aplicación de Kameleoon para su proyecto. Lo mismo se aplica si utiliza Kameleoon en modo híbrido.
El motor JavaScript de Kameleoon necesita la función eval() para añadir código personalizado a Kameleoon, como datos personalizados y JavaScript personalizado, al implementar variaciones de una página. La función eval() permite a Kameleoon ejecutar dinámicamente este código personalizado en tiempo de ejecución.Si utiliza una directiva Content Security Policy (CSP) que impide el uso de la función eval(), implemente el siguiente snippet de JavaScript antes del tag de instalación de Kameleoon:
Si su CSP bloquea eval(), implementar el fragmento de código no eliminará estas restricciones. Para garantizar toda la funcionalidad, ajuste la directiva CSP correspondiente para permitir eval() o funciones similares. De lo contrario, determinadas funcionalidades avanzadas de segmentación o personalización de Kameleoon seguirán siendo inaccesibles debido a la aplicación de la seguridad del navegador.
El Graphic Editor de Kameleoon (incluido el panel de simulación) también requiere la función eval(). No obstante, puede sortear este requisito instalando la extensión de Kameleoon para Chrome y habilitando el ajuste Dev Tools > Tag injection > Bypass policies para anular las políticas localmente. También debe proporcionar su sitecode. Habilitar el ajuste Bypass policies le permite usar el Graphic Editor en un navegador Chrome.
Ajuste Bypass policies en la extensión de Chrome
Algunas funcionalidades de Kameleoon no están disponibles si una directiva CSP bloquea la función eval(). Estas limitaciones se aplican incluso si utiliza alguno de los fragmentos de código o soluciones alternativas mencionados en esta respuesta. Las siguientes funcionalidades seguirán sin estar disponibles a menos que su CSP permita explícitamente eval():
  • Segmentar un segmento con una condición JavaScript personalizada (solo se admite cuando la condición se ejecuta de forma asíncrona).
Ajuste de condición de segmentación asíncrona
  • Uso de datos personalizados con código JavaScript personalizado.
  • Uso de canales de adquisición con código JavaScript personalizado.
El iframe que Kameleoon utiliza para unificar datos de sesión entre subdominios no utiliza la función eval(). Puede implementar la unificación de datos de sesión independientemente de su política CSP para eval().
Lamentablemente, no. Aunque SRI ofrece una funcionalidad de seguridad útil, el archivo de la aplicación Kameleoon cambia con el tiempo. Si no lo hiciera, funcionalidades como iniciar y detener experimentos al instante sin un redespliegue serían imposibles. Dado que el contenido del archivo cambia, el hash del recurso también cambia, lo que significa que no se puede usar SRI. De lo contrario, el navegador bloquearía el recurso en cuanto se actualizara en los servidores.
Los scripts de Kameleoon ya son cortos, y usar una versión minificada no afecta de forma significativa al tiempo de carga de la página, ya que el código ya está comprimido con Brotli o Gzip. Kameleoon no recomienda las versiones minificadas, pero, si son necesarias, están disponibles a continuación.

Carga asincrónica con anti-parpadeo

Unificar datos de sesión entre subdominios

Si utiliza el tag de datos de sesión unificados para unificar datos de sesión entre subdominios con el tag sincrónico o con el tag asincrónico sin anti-parpadeo:
Si utiliza el tag de datos de sesión unificados y el tag asincrónico con anti-parpadeo, añada los tres tags de script en el siguiente orden:
  1. Tag asincrónico con anti-parpadeo.
  2. Tag de datos de sesión unificados.
  3. Tag de instalación de Kameleoon.
No modifique los tags de instalación. Su código está exhaustivamente probado y optimizado. Modificarlos puede dar lugar a una configuración que no funcione. Si necesita modificar un tag de instalación, contacte con su Customer Success Manager para coordinarse con los desarrolladores. No intente realizar modificaciones por su cuenta.
No incluya ningún tag de instalación en su propio script externo independiente. Por ejemplo, nunca haga esto:
Aunque técnicamente puede funcionar, afecta de forma significativa al rendimiento de Kameleoon e introduce un efecto de parpadeo notable. Esta configuración genera los problemas de usar un tag manager sin ninguno de los beneficios asociados.