Saltar al contenido principal
Vea este vídeo para más información sobre el uso del Code editor. En este artículo:
  • Una visión general de la interfaz y las principales funciones del Code editor.
  • Instrucciones paso a paso para crear variaciones utilizando el Code editor, incluido el trabajo con código HTML, CSS y JavaScript.
  • Consejos para optimizar sus variaciones y lograr el máximo impacto.
  • Prácticas recomendadas para probar y validar sus variaciones antes de lanzar su experimento.

​
Beneficios para el usuario

Con el Code editor de Kameleoon, puede crear, lanzar y gestionar experimentos basados en código sin utilizar el Graphic editor. Inyecte código JavaScript o CSS directamente en sus variaciones y ahorre tiempo.

​
Acceder al Code editor

​
Desde el panel de Experiments

Haga clic en New experiment en su panel de Experiments > With the code editor.
A continuación, puede asignar un nombre a su prueba y asociarla a un sitio web y a una URL de página.

​
Estructura del Code editor

Nuestro Code editor tiene la siguiente estructura:
  • Header: muestra el nombre y el estado del experimento. También incluye los botones Simulate y Launch.
  • Panel de variaciones: enumera las variaciones y le permite añadir nuevas. Cada variación se puede seleccionar para editarla.
  • Área de código: puede editar el código JavaScript (JS) o CSS específico de la variación seleccionada. Incluye pestañas para alternar entre JS y CSS.
  • Barra lateral izquierda: incluye los criterios que debe definir antes de lanzar su experimento y la configuración general.

​
Información del experimento

El header muestra la información principal asociada con el experimento:
  • su nombre
  • su estado
  • la última interacción (por ejemplo, último guardado, actualización, fecha de lanzamiento).
Pase el cursor sobre el icono ? para acceder a información adicional sobre el experimento. Puede comprobar el estado de su experimento y asegurarse de que sus cambios se han guardado. Hay dos tipos de guardado disponibles:
  • Automático, cuando el estado del experimento es borrador, programado o pausado.
  • Manual, para experimentos en línea y desviados (mediante el botón verde en la pestaña Finalize).

​
Acciones del header

​
Simular

Recomendamos encarecidamente simular su experimento de Developer A/B para confirmar que su experimento se muestra y funciona correctamente. Para simular su experimento, haga clic en Simulate para abrir el modo de simulación en una nueva pestaña.

​
Programar

Para programar su experimento:
  1. Haga clic en el menú de tres puntos a la derecha de Simulate > Schedule.
  2. Especifique una fecha de inicio, una fecha de finalización o ambas.
  3. Configure las opciones Advanced schedule si es necesario.
  4. Haga clic en Schedule para confirmar la creación de su programación.
Haga clic en +Add a schedule para añadir varias programaciones a su experimento.

​
Estimar la duración

Para estimar el tiempo que tardará su experimento en obtener resultados aprovechables:
  1. Haga clic en el menú de tres puntos a la derecha de Simulate > Estimate the duration.
  2. Especifique la información requerida.
  3. Haga clic en Calculate.

​
Panel de variaciones

​
Insertar su código

Puede añadir, modificar o eliminar código en los campos JS y/o CSS (seleccione la pestaña correspondiente: JS o CSS) para todas las variaciones. En la parte superior derecha de la ventana de código hay una opción de ampliar. Haga clic en este botón para ampliar el área de código. También puede dividir la ventana de código en dos, vertical u horizontalmente, mediante botones dedicados. Haga clic en el botón de nuevo para restaurar la vista predeterminada. Haga clic en Add variation para añadir una nueva variación. Haga clic en el chevron para añadir una variación de código o una redirección de URL. Nuestro Code editor le ofrece varias funciones:
  • Autocompletado de JavaScript: cuando empieza a escribir, el editor muestra una lista desplegable de opciones de autocompletado sugeridas, lo que le permite elegir el método, parámetro o variable deseado. También se muestra información sobre el método al pasar el cursor, así como información de la firma del método, para que pueda completar su código con menos errores.
  • Detección de errores de sintaxis: los errores de sintaxis del código aparecen subrayados, y una ventana emergente le mostrará más información sobre el error al pasar el cursor.
  • Selector de color CSS: en el editor CSS, un selector de color emergente le permite rellenar automáticamente sus valores RGBA.
Kameleoon proporciona una API y varias funciones recomendadas para escribir su código JavaScript. Tenga en cuenta que Kameleoon no incluye jQuery; en su lugar, utiliza la versión ya presente en su sitio web. Dado que Kameleoon puede cargarse antes que jQuery, debe asegurarse de que jQuery esté completamente cargado antes de ejecutar el código JavaScript de su variación. Para comprobar si jQuery se ha cargado, utilice el siguiente código: 
Kameleoon.API.Core.runWhenConditionTrue(function(){
 return typeof jQuery != "undefined"; 
 //allows to check that jQuery is loaded. Returns True if it is, or False otherwise. Kameleoon will execute this condition again every 200ms.
 
}, function(){
 //Enter here the code you want to execute in your variation. For example if you want to change the text of a block and this block has the id "block-2345", you can use the following Kameleoon API function
 
 Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function(){
 
 //Enter here your JavaScript code
 jQuery("#bloc-2345").text("My new text");
 
 });
 
}, 200);
El código JavaScript no se ejecuta directamente en el editor. Para previsualizar su modificación, simule su experimento.
Si desea más información sobre Kameleoon.API.Core, puede consultar nuestra documentación para desarrolladores:

​
Menú de variación

Haga clic en el menú de tres puntos para mostrar el menú de la variación. Puede:
  • Renombrar una variación
  • Previsualizar una variación
  • Añadir un límite de visualización
  • Eliminar una variación
Los cambios realizados en este menú solo se aplican a la variación seleccionada.

​
Renombrar variación

Haga clic en Rename variation para editar el nombre de una variación. Escriba su nuevo nombre y haga clic en el icono X o pulse enter para confirmar.

​
Previsualizar

Haga clic en Preview variation para abrir su variación en una nueva pestaña y comprobar su visualización.

​
Añadir un límite de visualización

Haga clic en Add a display limit para controlar la frecuencia con la que se muestra una variación. Habilite los límites que desee. Pase el cursor sobre el icono ? para mostrar una información emergente con más detalles sobre un límite. Haga clic en Save para confirmar sus elecciones.

​
Eliminar

Haga clic en Delete variation > Yes para eliminar una variación. No puede eliminar la última variación: debe tener al menos una variación en su experimento.

​
Duplicar

Haga clic en el icono de duplicar a la derecha del menú de tres puntos para generar una copia de la variación.

​
Barra lateral izquierda

En la barra lateral izquierda encontrará los criterios que debe definir antes de lanzar su experimento. No puede lanzar su experimento sin completar estos pasos.

​
Pasos de finalización

Los pasos son los mismos que en el Graphic editor:
  • Targeting
  • Asignación de tráfico
  • Objetivos
  • Integraciones
Haga clic en cada una de estas secciones y defina los criterios requeridos. Aparecerá una marca verde junto a las secciones cuando las haya completado, y el botón Launch se vuelve azul. Más información sobre estos pasos de finalización

​
Ajustes generales

Aquí encontrará los ajustes generales de su experimento. Este menú consta de las siguientes secciones:
  • Información principal
  • Código del experimento
  • Script personalizado del experimento
  • Ajustes avanzados

​
Información principal

Aquí puede gestionar la información principal de su experimento. Puede especificar la URL que carga el editor, las etiquetas de su experimento y su hipótesis.

​
Código del experimento

Aquí encontrará el código general de su experimento. Kameleoon aplica este código a cada una de las variaciones de su experimento. Active el interruptor para añadir este código a la variación original.

​
Script personalizado del experimento

El código JavaScript añadido en esta sección le permite escribir código global que se aplica específicamente al experimento. Este código se ejecuta junto con el script global de Kameleoon, lo que garantiza que todos los cambios se eliminen automáticamente cuando el experimento finalice. Además, este script se ejecuta antes del código del Experimento y del de la Variación, y se ejecuta independientemente de cualquier condición de targeting que haya establecido, lo que significa que siempre se ejecutará en cuanto Kameleoon se cargue.

​
Ajustes avanzados

Aquí puede acceder a los ajustes avanzados de su experimento.
Ventana de atribución personalizada
Utilice esta sección para definir una ventana de atribución en días y horas. La ventana de atribución es el período durante el cual las conversiones e ingresos de un visitante se vinculan a una variación específica. Por defecto, la ventana de atribución se establece a nivel del sitio web, pero puede personalizarla aquí antes de lanzar su experimento. Más información sobre las ventanas de atribución personalizadas aquí.
Límites de visualización
Consulte la sección anterior sobre los límites de visualización. Puede configurar los límites de visualización en Advanced settings o en el menú Variation. La sección Advanced settings ofrece una visión general de todos los límites que ha configurado, independientemente del lugar en que los haya establecido.
Opciones del código JavaScript
Habilite esta opción para cargar el código JavaScript del experimento después de que se cargue la página. Esta opción garantiza que todos los elementos de la página estén completamente cargados antes de ejecutar el código JavaScript, evitando conflictos y mejorando el rendimiento. Evita problemas con el contenido dinámico o los scripts que se ejecutan demasiado pronto, lo que puede ser útil si sus variaciones dependen de elementos que se cargan después del renderizado inicial de la página.