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.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 JavaScriptkameleoonLoadingTimeout en el snippet de instalación.
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.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.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.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.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.FAQ
¿Cuáles son los dominios de Kameleoon que necesito incluir en la whitelist?
¿Cuáles son los dominios de Kameleoon que necesito incluir en la whitelist?
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.Cada URL de la política CSP tiene un propósito específico:
Configuración sencilla (con comodines)
Añada el siguiente contenido a la configuración de su cabecera CSP:Configuración completa (con todo el detalle)
Reemplace[your-site-code] por su site code de Kameleoon en cada línea donde aparezca y añada esto a su configuración:Web Experimentation
https://[your-site-code].kameleoon.xx: carga el script de la aplicación Kameleoon Web Experimentation,engine.js(antes llamadokameleoon.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.
¿Por qué el motor de Kameleoon (archivo de la aplicación engine.js) utiliza la función eval()?
¿Por qué el motor de Kameleoon (archivo de la aplicación engine.js) utiliza la función eval()?
El motor JavaScript de Kameleoon necesita la función El Graphic Editor de Kameleoon (incluido el panel de simulación) también requiere la función
Algunas funcionalidades de Kameleoon no están disponibles si una directiva CSP bloquea 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.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.
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).

- Uso de datos personalizados con código JavaScript personalizado.
- Uso de canales de adquisición con código JavaScript personalizado.
eval(). Puede implementar la unificación de datos de sesión independientemente de su política CSP para eval().¿Puedo usar Subresource Integrity (SRI) con el archivo de la aplicación Kameleoon?
¿Puedo usar Subresource Integrity (SRI) con el archivo de la aplicación Kameleoon?
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.
¿Puedo modificar el tag de instalación que proporciona Kameleoon?
¿Puedo modificar el tag de instalación que proporciona 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.
¿Puedo añadir el tag de instalación en un script externo aparte?
¿Puedo añadir el tag de instalación en un script externo aparte?
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.