Experimentación
Editor visual sin código
Seleccione un elemento de su propio sitio en producción y cámbielo en el inspector, o inserte una sección lista para usar. La variante se guarda; la página queda intacta.
Editor de IA
Describa el cambio y véalo tomar forma
Dígale al editor lo que quiere con palabras sencillas o señale un elemento y haga su petición. La IA lee la página, propone los cambios y le muestra una vista previa en su sitio en producción. No se guarda nada hasta que usted los aplica.
- Una palabra o una sección enteraCorrija un titular o rehaga por completo un héroe, un menú o una tabla de precios con una sola petición. Cada cambio aparece por separado, así que usted se queda solo con los que quiere.
- JavaScript solo cuando hace faltaLa mayoría de los tests cambian textos, estilos y marcado, y eso es lo que escribe la IA. Cuando un test necesita un comportamiento, como algo que reacciona a un clic o al desplazamiento, también escribe el código, que se aprueba por separado.
- La IA lee la página por ustedTrabaja a partir de un esquema de la página en la que está: su estructura y sus textos. Usted describe el resultado y la IA localiza los elementos que hay que cambiar. Sin selectores ni desarrolladores.
- Una vista previa antes de guardar nadaLos cambios propuestos aparecen en su página en producción, cada uno con su casilla. Al aplicarlos se convierten en cambios ordinarios de la variante, que puede deshacer hasta que guarde.
- Experimentos sólidos sin códigoCualquiera que sepa describir una página mejor puede crear su variante. La IA responde en el idioma en que usted escribe y mantiene los textos de la página en su idioma original.
- Conozca el coste de antemanoCada petición consume créditos de IA, y el panel le muestra una estimación antes de enviarla. Los valores de los formularios y los datos personales de la página se ocultan antes de enviar nada.
El editor se abre desde el panel lateral de Chrome y carga su sitio real dentro de un marco, así que usted señala lo que quiere cambiar en lugar de describirlo en un ticket. Al seleccionar un elemento se abre el inspector: tipografía, espaciado sobre un modelo de caja que puede arrastrar, tamaño, maquetación, fondo y borde, y un buscador con todas las propiedades CSS que conoce el navegador. Cada cambio se registra en la variante que está editando, nunca en la página.
Con un conmutador Normal, Hover, Focus y Active se da estilo a los estados interactivos de un elemento sin CSS, de modo que, en la variante, un botón puede cambiar de color al pasar el puntero por encima igual que lo haría con su hoja de estilos. El texto se edita donde está con un doble clic, y los enlaces, las imágenes (incluidas las imágenes responsive que usan la mayoría de las tiendas Shopify), el texto alternativo y las etiquetas de accesibilidad tienen campos propios.
Los cambios no se limitan a lo que ya está en la página. La pestaña Add es una biblioteca de bloques, maquetaciones y medios, desde un héroe o unas FAQ hasta una barra de compra fija en móvil, y cada uno adopta las fuentes y los colores del propio sitio allí donde se coloca. Cualquier texto de un cambio puede llevar los datos de la propia página, de modo que un solo cambio puede mostrar el precio de cada producto.
Una lista de cambios muestra todo lo que hace la variante en lenguaje llano (Moved, Added button, Heading text), con deshacer y rehacer fiables, y las ediciones hechas mientras se está guardando se conservan. Esa lista es la variante. Es lo que se aplica en la página del visitante y lo que la entrega de implementación lee después para decirle a un desarrollador qué fijar en el código.
El editor de un vistazo
Una sola pantalla para todo lo que cambia un test
El panel Layers y los componentes a la izquierda, su página en producción en el centro, el inspector a la derecha. Cada sección de abajo muestra una de sus partes en funcionamiento.
Panel lateral de Chrome
Abra el editor desde la página que está viendo
La extensión se acopla al panel lateral de Chrome, junto al sitio, y sigue la pestaña en la que está usted. Detecta el sitio web, enumera sus experimentos y abre el editor en esta página y no en la página desde la que empezó el test.
- Ocupa toda la altura, se puede redimensionar y sigue abierto cuando hace clic en la página
- Filtre por estado o busque por nombre o número de experimento
- Pide acceso a un sitio una sola vez, la primera vez que abre el editor allí
Biblioteca de componentes
Añada una sección entera, no solo un color nuevo
Arrastre un bloque desde la pestaña Add a la página y una línea azul le muestra dónde quedará antes de soltarlo. Llega con la fuente y los tamaños de encabezado del propio sitio, y con su color de acento tomado del lugar donde lo soltó.
- Doce bloques, desde un héroe y unas FAQ hasta una barra fija y una ventana emergente
- Secciones, contenedores y columnas que se apilan en los teléfonos
- Vídeo, un slider de imágenes y una galería, con YouTube reproducido mediante su reproductor sin cookies
Contenido dinámico
Créelo una vez y cada página lo rellena con sus propios datos
Inserte datos de la página en cualquier texto, enlace o imagen, elegidos de una lista con los valores reales de la página. Un banner creado una sola vez saluda a cada visitante con la campaña de la que viene; en una tienda, una barra fija muestra el nombre y el precio de cada producto.
- Datos de campaña, visitante y fecha en todos los sitios, sin configuración
- Datos de producto, precio y carrito en tiendas, en la moneda de la propia página
- Si faltan datos, el elemento se oculta o muestra una alternativa que usted elige
Feeds de datos
Datos de sus propios sistemas, dentro del test
Conecte un feed que el sitio ya publique, como reseñas, fechas de eventos, textos de campaña o un feed de productos de Google Merchant, elija qué entrada ve cada visitante y marque los campos que una página puede mostrar. Los servidores de Pertento lo descargan periódicamente, así que los visitantes nunca esperan a su servidor.
- Haga coincidir la entrada con la dirección de la página, un parámetro de URL, la campaña o el producto
- O muestre la entrada programada para ahora, para promociones temporales
- Solo los campos que usted marque llegan a un visitante
Inspector y estados
Dé estilo a los estados hover, focus y active sin escribir CSS
El inspector edita lo que usted seleccione: tipografía, espaciado sobre un modelo de caja, tamaño, maquetación, fondo y borde. Un conmutador Normal, Hover, Focus y Active da estilo a los estados interactivos, de modo que el color de un botón al pasar el puntero por encima también forma parte de la variante.
- Busque cualquier propiedad CSS que conozca el navegador, con Reset en cada campo
- Enlaces, imágenes responsive, texto alternativo y etiquetas de accesibilidad
- Cada edición de un estado es un cambio ordinario, con deshacer y guardar
Texto in situ
Reescriba un titular allí mismo
Haga doble clic en cualquier texto de la página y escriba. La negrita, la cursiva y el subrayado funcionan como en un documento, y cuando hace clic fuera, la edición se convierte en un cambio ordinario que se puede deshacer con exactitud.
- Negrita, cursiva y subrayado desde el teclado, Shift+Enter para un salto de línea, Escape para cancelar
- Funciona sobre el texto y el marcado en línea que contiene
- Aparece en la lista de cambios en lenguaje llano, como Heading text
Todas las coincidencias
Cambie todos los elementos coincidentes a la vez, incluidos los que se cargan más tarde
Indique un selector CSS y añada estilo o HTML a todo lo que seleccione. Los elementos que llegan más tarde por scroll infinito, carruseles o navegación en el cliente también reciben el cambio, una vez cada uno.
- Añadir, insertar, antes, después o reemplazar
- Un recuento en vivo de cuántos elementos coinciden
- Seleccionar similares hace lo mismo señalando, para todos los elementos parecidos al que eligió
Cambios y guardado
Cada cambio en una lista, con palabras que se entienden
Cada edición aparece en lenguaje llano, como Moved, Added button o Heading text, con deshacer y rehacer fiables. Las ediciones hechas mientras se está guardando se conservan, un guardado fallido se puede reintentar y, antes de cerrar, se le pide confirmación.
- Revierta cualquier cambio individual desde la lista
- CSS y JavaScript globales arriba, con su número de líneas
- Un cambio cuyo elemento falta en la página se marca, no se oculta
Vista previa en cualquier lugar
Vea la variante en un teléfono real
Las vistas previas por dispositivo muestran los tamaños de escritorio, tableta y teléfono dentro del editor. Para ver el resultado real, Preview on another device le da un enlace que abre la variante guardada en cualquier teléfono o navegador, y un segundo enlace que devuelve ese navegador a la normalidad.
- Los tokens de inicio de sesión se eliminan del enlace, así que es seguro compartirlo
- Muestra los cambios guardados mientras el experimento está en marcha en esa página
- Se abre en cualquier navegador, no solo en Chrome
Código, si lo prefiere
HTML, CSS y JavaScript, con los mismos datos de la página
Lo que las herramientas visuales no pueden expresar se escribe como código sobre la variante. Edite o añada HTML alrededor de un elemento, o escriba el CSS y el JavaScript globales de la variante, y lea los datos de la página con pertento.data().
- Insert page data añade un token al HTML
- Read page data añade una llamada a pertento.data() al JavaScript
- El CSS y el JavaScript globales se pueden borrar por completo
Atajos de teclado
Atajos para las acciones que más repite
Los atajos funcionan en cuanto hace clic en un elemento de la página, y la lista completa está en el icono del teclado de la barra de herramientas del editor.
- Guardar
- ⌘SCtrl+S
- Deshacer
- ⌘ZCtrl+Z
- Rehacer
- ⇧⌘ZCtrl+Y
- Editar HTML
- E
- Duplicar
- D
- Ocultar, conservando su espacio
- H
- Añadir elemento
- A
- Eliminar elemento
- ⌫
- Seleccionar el elemento padre
- ⇧↵
- Subir o bajar
- ⌥↑⌥↓
- Abrir el menú del elemento
- ⇧F10
- Editar texto in situ