> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Guía de instalación de Web Experimentation > Instale y configure el script de Kameleoon en su sitio web, incluyendo la configuración del proyecto, del dominio, los ajustes de consentimiento y la prevención del parpadeo. 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 `` 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á: ```mermaid theme={null} flowchart LR MI[MAIN INFORMATION] --> IM[INSTALLATION METHOD] IM --> CS[CODE SNIPPET AND LOADING MODE] IM --> TM[TAG MANAGER] IM --> SH[SHOPIFY] CS --> TC[TECHNICAL CONFIGURATION] TM --> TC TC --> CL[CHECKLIST] SH --> CL ``` 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](https://app.kameleoon.com/), 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](https://docs.kameleoon.com/es/user-manual/project-management/create-a-project.md#pasos-de-configuración-del-proyecto). > [!NOTE] > > 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](https://docs.kameleoon.com/es/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md). ## 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](https://docs.kameleoon.com/es/user-manual/project-management/consent-management-policy.md) 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. > [!NOTE] > > 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: * [No establezca un encabezado de respuesta X-Frame-Options](#issue-refused-to-display-in-a-frame-because-it-set-x-frame-options-to-sameorigin) en la página que aloja el iframe de Kameleoon. * [Permita los recursos de Kameleoon en su Política de seguridad de contenido](#issue-refused-to-load-the-script). > [!NOTE] > > 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](https://docs.kameleoon.com/es/developer-docs/web-experimentation/technical-concepts/itp-management.md). ## 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í](https://docs.kameleoon.com/es/developer-docs/web-experimentation/self-hosting/simple-self-hosting-and-on-premises-options.md). ## 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 ``** 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**. > [!NOTE] > > 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 ``. 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. ![](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/get-started/web-installation/dev-tools.png) 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](https://docs.kameleoon.com/es/developer-docs/web-experimentation/technical-concepts/flicker-management-and-performance.md) 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](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/edit-project-settings.png) 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**. Si Kameleoon se carga tarde, la página puede mostrarse antes de que se aplique el código de la variación. En ese caso, las optimizaciones que se describen a continuación serán ineficaces. #### 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](https://storage.googleapis.com/kameleoon-storage-documentation/user-manual/images/manage-your-projects/consent-tab.png) 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](https://docs.kameleoon.com/es/user-manual/assets/segments/create-a-segment.md) 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](https://docs.kameleoon.com/es/developer-docs/apis/activation-api-js/api-reference/api-reference.md) 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](https://docs.kameleoon.com/es/user-manual/experimentation/web-experimentation/advanced-experiment-types/set-up-experiment-single-page-app.md) guía sobre cómo configurar un experimento en una SPA para conocer las mejores prácticas. ## FAQ > [accordion] Problema: Refused to display in a frame (X-Frame-Options) > > 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 Kameleoon** > > El 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](https://docs.kameleoon.com/es/developer-docs/web-experimentation/technical-concepts/unify-session-data-storage-across-subdomains.md). > > 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](https://docs.kameleoon.com/es/developer-docs/privacy-and-compliance/data-collection-backend.md#lista-de-datos-recopilados) y gestione el consentimiento mediante las [API de gestión del consentimiento de Kameleoon](https://docs.kameleoon.com/es/developer-docs/privacy-and-compliance/consent-management.md). > > **Resolver el problema de visualización** > > El 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options). > > 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. > [accordion] Problema: Refused to load the script > > 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)](https://developer.mozilla.org/en-US/docs/Web/HTTP/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](https://docs.kameleoon.com/es/developer-docs/web-experimentation/implementation-and-deployment/standard-implementation.md#what-are-the-kameleoon-domains-that-i-need-to-whitelist). > [accordion] ¿Funciona Kameleoon con todos los navegadores web? > > **Navegadores web compatibles** > > Kameleoon 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 editor** > > Para los navegadores que el Graphic editor soporta, consulte [¿Qué navegadores soporta el Graphic editor?](https://docs.kameleoon.com/es/user-manual/experimentation/web-experimentation/graphic-based-experiments/edit-a-variation.md#which-browsers-does-the-graphic-editor-support). > > **Compatibilidad con sitios web de diseño adaptable** > > Puede 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. > [accordion] ¿Cuál es el tiempo de expiración de la caché (TTL) del script de Kameleoon? > > 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. > > > [!NOTE] > > > > Algunos navegadores móviles pueden ignorar la configuración de TTL para optimizar el rendimiento, según la política del navegador. > [accordion] ¿Qué es el efecto flicker? > > 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 `` del HTML. Para las directrices completas, consulte [Prevención del parpadeo](#prevención-del-parpadeo). > [accordion] ¿Puede Kameleoon entrar en conflicto con otros scripts de mi sitio? > > 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. > > **jQuery** > > Kameleoon no entra en conflicto con jQuery si lo utiliza en su sitio web. No obstante, Kameleoon utiliza la biblioteca [Sizzle](http://sizzlejs.com/), que es el motor de selectores CSS utilizado por jQuery. Puede utilizar Sizzle cuando crea sus experimentos.