¿Qué situaciones resuelven los siguientes consejos?
- Cuando los cambios que realizó en las variantes de un experimento en el Graphic editor no aparecen, aunque los haya guardado y simulado.
- Cuando las ediciones que realizó en todas las páginas con el Graphic editor no aparecen tras publicar un experimento.
- Cuando el Graphic editor no se carga.
¿Cómo funcionan los editores gráficos?
Aunque hacer cambios con el Graphic editor parece sencillo, la arquitectura de su página web (por ejemplo, cómo está codificada) puede complicar la edición. Como la mayoría de los editores visuales diseñados para crear experimentos, el Graphic editor de Kameleoon utiliza rutas de selectores CSS para identificar los elementos que edita. Los selectores son la piedra angular de cualquier acción que realice en el Graphic editor. Kameleoon utiliza dos tipos de rutas de selectores CSS:- Selectores simples, como el ID único del elemento: al ser único, no se puede repetir en una página ni asignar a otro elemento de la misma página. Por tanto, los cambios en este elemento realizados en el Graphic editor se limitan a ese elemento.
- Selectores combinadores: el elemento se selecciona en función de una relación específica con sus elementos padres.
- Si Kameleoon encuentra un ID para el elemento seleccionado: Kameleoon utiliza el ID por defecto para identificar el elemento cuando se carga la página y aplica los cambios.
- Si Kameleoon no encuentra un ID para el elemento seleccionado: Kameleoon crea un selector combinador desde el elemento padre más cercano que tenga un ID. Por ejemplo, si a un elemento del nombre del producto le falta un ID pero la cabecera tiene un ID, Kameleoon crea una ruta única desde el elemento de la cabecera hasta el nombre del producto.
¿Qué causa los problemas?
En general, los IDs asignados a elementos en aplicaciones de una sola página se generan dinámicamente, lo que significa que sus valores y rutas de selector cambian continuamente. No obstante, Kameleoon puede hacer seguimiento de estos cambios. Para activar la opción de seguimiento, debe establecer un método de selección de elementos en una página indicando un atributo personalizado. Para ello:- Haga clic en Admin > Project.
- Haga clic en el icono del lápiz del proyecto que desea editar.
- En el menú Configuration, haga clic en General.
- En Advanced settings, cambie Enable support for dynamic websites (Single Page App, Progressive Web App…) a ON.
- En Set a custom attribute (optional), defina el atributo personalizado deseado (por ejemplo,
data-id,data-qa).
La ruta del selector utilizada no permite la selección precisa de un elemento
No todos los elementos tienen un ID. Cuando falta el ID, Kameleoon generará una ruta única desde el elemento padre más cercano con un ID hasta el elemento que desea modificar. A continuación se muestra un ejemplo de ruta de selector que identifica el bloque que contiene las miniaturas de productos:#ProductSection-product-template > div:first-child > div:first-child > div:nth-of-type(6) > div:first-child > ul:nth-of-type(1) > div:first-child.
Esta ruta empieza en el bloque padre ProductSection-product-template y pasa por otros cinco bloques hijo antes de llegar al bloque de miniaturas. Por tanto, el selector sigue Product section template > block1 > block2 > block3 > block4 > block5 > thumbnail.
En general, cuanto más amplia sea la ruta del selector, más probable es que el selector no cubra todos los casos de uso del sitio web. Como cada sitio web es único, la limitación del selector presenta retos distintos para los editores gráficos.
Las páginas de producto pueden tener diseños variados (como diferentes marcas HTML); por tanto, requieren distintos selectores. Por ejemplo, algunas páginas de producto pueden tener un bloque para valoraciones, mientras que otras no. La inconsistencia en la presencia de elementos rompe la ruta de selector original que Kameleoon encontró al crear la variante.
El riesgo de cambios inconsistentes en los elementos dentro de un experimento crece proporcionalmente a la longitud y amplitud de la ruta del selector que Kameleoon identifica y depende de la naturaleza dinámica del diseño de la página web del producto. Cuando el riesgo es demasiado alto, utilice otras opciones de selección que Kameleoon ofrece en la barra de herramientas de jerarquía. Puede que encuentre una clase HTML más segura de usar o pida a un desarrollador o CSM que cree un selector CSS o valide una elección.
Alternativamente, puede que la IA genere una ruta para un elemento.
- Seleccione un elemento.
- En la barra lateral izquierda, haga clic en Edit selector.
- Haga clic en AI generation > Validate.
Cambios conflictivos
Una de las razones de la popularidad y uso extendido de los editores gráficos es la facilidad con la que le permiten iniciar la experimentación sin necesidad de código. Los cambios son sencillos en el Graphic editor; no obstante, debe tener cuidado al introducir cambios conflictivos en sus variantes. Los cambios conflictivos generalmente se refieren a ediciones realizadas en un elemento hijo que anulan ediciones realizadas en un elemento padre. Un ejemplo es editar el color de un elemento de texto (el hijo) y luego seleccionar el padre y volver a cambiar el color. Kameleoon no aplicará ni mostrará los cambios correctamente porque el cambio en el elemento hijo se renderiza primero. Para evitar cambios conflictivos, siga estas reglas:- Nunca combine código HTML con otras capacidades de edición nativas del Graphic Editor, salvo que comprenda los resultados exactos.
- Si planea hacer cambios en el mismo elemento, asegúrese de seleccionar siempre el elemento con el mismo selector CSS. Tenga cuidado con los elementos compuestos por varios elementos.
El Graphic editor no se carga
Hay varias razones por las que el Graphic editor podría no cargarse.El Graphic editor no se carga para nadie
Paso 1: verifique la instalación del script de Kameleoon
Si el Graphic editor no se carga y se le redirige a la página de inicio de sesión u otro destino, compruebe si el script de Kameleoon está correctamente instalado en la página. Para ello:- Abra las herramientas para desarrolladores de su navegador.
- En Mac, pulse Command + Option + I
- En Windows, pulse Control + Shift + C
- Vaya a la pestaña Elements y pulse Command + F (Mac) o Control + F (Windows) y busque Kameleoon en el DOM.
- Abrir la pestaña Network.
- Filtrar por Kameleoon tras actualizar la página para confirmar si el script se está cargando.
- Si el script de Kameleoon está presente: continúe con el siguiente paso de resolución de problemas.
- Si el script de Kameleoon no está presente: debe instalar el script en el sitio web para continuar.
- En Developer tools, haga clic en las dobles flechas > Kameleoon.
- Haga clic en Dev tools > Tag injection.
- Introduzca su sitecode en Sitecode to inject.
- Haga clic en Inject tag.
Paso 2: verifique la configuración del dominio y subdominio
Asegúrese de que el dominio y todos los subdominios relevantes están configurados correctamente en Kameleoon.- Haga clic en Admin > Project.
- Seleccione Setup para el proyecto correspondiente.
- Haga clic en Modify setup.
- Vaya a la sección Domain configuration y añada todos los dominios y subdominios necesarios.
- Para subdominios, utilice un asterisco (
*). Por ejemplo,*.mywebsite.com.
- Para subdominios, utilice un asterisco (
- Tras añadir los dominios requeridos, valide su configuración.
- En la parte superior de la página, haga clic en el icono del lápiz junto al título del proyecto para modificar la URL del dominio si es necesario.
Paso 3: compruebe si hay errores de política CORS
Para garantizar que el Graphic editor funcione correctamente, compruebe la consola de su navegador en busca de errores de política CORS (cross-origin resource sharing).- Abra la consola con los siguientes atajos:
- En Mac:
Command + Option + J - En Windows:
Control + Shift + J
- En Mac:
- Busque cualquier error relacionado con CORS en rojo, como se muestra en la imagen siguiente.
*.kameleoon.com*.kameleoon.eu*.kameleoon.io
El Graphic editor se carga para algunos usuarios pero no para otros
Paso 1: borre la caché
Es posible que esté viendo una versión obsoleta de su sitio web, lo que podría impedir que el Graphic editor se cargue. Para resolver este problema:Opción 1: vacíe su caché
- Abra el inspector del navegador con uno de estos atajos:
- En Mac:
Command + Option + I - En Windows:
Control + Shift + C
- En Mac:
- Haga clic derecho en el botón de actualización del navegador y seleccione Empty cache and hard reload.
Opción 2: use navegación privada (modo incógnito)
También puede intentar abrir el Graphic editor en una ventana de navegación privada para asegurarse de que ningún archivo en caché interfiera.Paso 2: permita cookies de terceros
Asegúrese de que su navegador permita cookies de terceros, ya que son esenciales para que el Graphic editor funcione correctamente. Para habilitar las cookies de terceros:- Vaya a la Configuración del navegador.
- Vaya a Privacidad y seguridad.
- Localice la sección Cookies de terceros y asegúrese de que estén permitidas.
Paso 3: desactive los bloqueadores de anuncios
Los bloqueadores de anuncios a veces pueden interferir con el funcionamiento correcto del Graphic editor. Para resolver este problema, pruebe una de estas soluciones:- Desactive su bloqueador de anuncios y vuelva a iniciar el Graphic editor.
- Abra una ventana de navegación privada donde el bloqueador de anuncios pueda no estar activo y vuelva a iniciar el Graphic editor.
- Intente utilizar otro navegador sin bloqueadores de anuncios y vea si el Graphic editor funciona allí.
Paso 4: desactive otras extensiones del navegador
Compruebe si tiene activadas extensiones de navegador que podrían interferir con la carga correcta del Graphic editor. Las extensiones relacionadas con la privacidad (como Ghostery) o los optimizadores de rendimiento (uBlock Origin, por ejemplo) pueden impedir que el editor se cargue correctamente.Paso 5: desactive la VPN
Compruebe la configuración de su aplicación VPN o la barra de tareas en busca de conexiones activas y desactívela si está habilitada. Desconectar la VPN permitirá un acceso directo a su red sin pasar por otro servidor, lo que puede ayudar a cargar el Graphic editor de Kameleoon correctamente.Paso 6: cambie a otra red Wi-Fi
Si el Graphic editor sigue sin iniciarse, podría haber problemas relacionados con la red. Intente conectarse a otra red y vuelva a iniciar el editor.Paso 7: utilice el navegador Chrome Dev
El navegador Chrome Dev suele ser más compatible con herramientas como el Graphic editor de Kameleoon. Si tiene problemas con el navegador Chrome estándar, cambie a Chrome Dev.Paso 8: instale la extensión del Graphic editor
Instalar la extensión Kameleoon Graphic editor puede ayudar a evitar errores comunes, como problemas de política CORS, y mejorar el rendimiento de carga del editor.Paso 9: compruebe el firewall o las herramientas de seguridad (como Edgesuite o WAF)
Si su empresa utiliza un firewall, un Web Application Firewall (WAF) o una herramienta proxy como Edgesuite/Akamai, las solicitudes del Graphic Editor de Kameleoon podrían estar bloqueadas. Para resolverlo: Póngase en contacto con su equipo de TI y pídales que incluyan los dominios de Kameleoon en la lista permitida de la configuración del firewall/WAF. Los dominios y subdominios indicados en el artículo de FAQ deben ser accesibles. Asegúrese de que tanto el tráfico HTTPS (GET, POST, OPTIONS) como las conexiones WebSocket estén permitidos a estos dominios. Tras actualizar la configuración del firewall, vuelva a iniciar el Graphic Editor para confirmar si el problema se ha resuelto.