Sperimentazione
Editor visuale senza codice
Selezioni un elemento sul vostro sito in produzione e lo modifichi nell’inspector, oppure inserisca una sezione già pronta. La variante si salva; la pagina resta intatta.
Editor IA
Descriva la modifica e la veda prendere forma
Dica all’editor cosa vuole con parole semplici, oppure indichi un elemento e faccia la sua richiesta. L’IA legge la pagina, propone le modifiche e le mostra in anteprima sul vostro sito in produzione. Nulla viene salvato finché non le applica.
- Una parola o un’intera sezioneCorregga un titolo o rifaccia da capo un hero, un menu o una tabella prezzi con un’unica richiesta. Ogni modifica compare separatamente, così tiene solo quelle che le servono.
- JavaScript solo quando serveLa maggior parte dei test riguarda testi, stili e markup, ed è questo che scrive l’IA. Quando un test richiede un comportamento, per esempio qualcosa che reagisce a un clic o allo scorrimento, scrive anche il codice, che va approvato a parte.
- L’IA legge la pagina al posto suoL’IA lavora su uno schema della pagina in cui si trova: la sua struttura e i suoi testi. Lei descrive il risultato, l’IA trova gli elementi da modificare. Niente selettori, niente sviluppatori.
- Prima l’anteprima, poi il salvataggioLe modifiche proposte compaiono sulla vostra pagina in produzione, ognuna con la sua casella di spunta. Una volta applicate diventano modifiche ordinarie della variante, annullabili fino al salvataggio.
- Test efficaci senza codiceChiunque sappia descrivere una pagina migliore può crearne la variante. L’IA risponde nella lingua in cui le scrive e lascia i testi della pagina nella loro lingua originale.
- Conosce il costo in anticipoOgni richiesta consuma crediti IA, e il pannello ne mostra una stima prima che la invii. I valori dei moduli e i dati personali presenti nella pagina vengono mascherati prima di ogni invio.
L’editor si apre dal pannello laterale di Chrome e carica il vostro sito reale in un frame, così indica direttamente ciò che vuole cambiare invece di descriverlo in un ticket. Selezionando un elemento si apre l’inspector: tipografia, spaziatura su un box model che può trascinare, dimensione, layout, sfondo e bordo, e una ricerca su qualsiasi proprietà CSS che il browser conosce. Ogni modifica è registrata sulla variante che sta modificando, mai sulla pagina.
Un interruttore fra Normal, Hover, Focus e Active dà stile agli stati interattivi di un elemento senza CSS, così un pulsante può cambiare colore al passaggio del mouse nella variante come farebbe nel vostro foglio di stile. Il testo si modifica dove si trova con un doppio clic, e link, immagini (comprese le immagini responsive che usa la maggior parte dei negozi Shopify), testo alternativo ed etichette di accessibilità hanno campi propri.
Le modifiche non si limitano a ciò che è già sulla pagina. La scheda Add è una libreria di blocchi, layout e media, da un hero o una FAQ fino a una barra d’acquisto fissa su mobile, e ognuno assume i font e i colori del sito nel punto in cui viene collocato. Qualsiasi testo in una modifica può contenere i dati della pagina stessa, così una sola modifica può mostrare il prezzo di ciascun prodotto.
Un elenco delle modifiche mostra tutto ciò che fa la variante in parole semplici (Moved, Added button, Heading text), con annullamento e ripristino affidabili, e le modifiche fatte mentre è in corso un salvataggio vengono conservate. Quell’elenco è la variante. È ciò che viene applicato sulla pagina di un visitatore e ciò che la consegna all’implementazione legge più tardi per dire a uno sviluppatore cosa fissare nel codice.
L’editor in breve
Una sola schermata per tutto ciò che un test cambia
Layers e componenti a sinistra, la vostra pagina in produzione al centro, l’inspector a destra. Ogni sezione qui sotto ne mostra una parte all’opera.
Pannello laterale di Chrome
Apra l’editor dalla pagina che sta guardando
L’estensione si aggancia al pannello laterale di Chrome, accanto al sito, e segue la scheda in cui si trova. Trova il sito web, ne elenca i test e apre l’editor su questa pagina, invece che sulla pagina da cui è partito il test.
- A tutta altezza e ridimensionabile, e resta aperto quando clicca nella pagina
- Filtri per stato oppure cerchi per nome o numero del test
- Chiede l’accesso a un sito una sola volta, la prima volta che vi apre l’editor
Libreria di componenti
Aggiunga un’intera sezione, non solo un nuovo colore
Trascini un blocco dalla scheda Add sulla pagina: una linea blu mostra dove finirà prima ancora di rilasciarlo. Il blocco adotta il font e le dimensioni dei titoli del sito, con il colore d’accento preso dal punto in cui l’ha rilasciato.
- Dodici blocchi, da un hero e una FAQ fino a una barra fissa e un pop-up
- Sezioni, contenitori e colonne che si impilano su smartphone
- Video, uno slider di immagini e una galleria, con YouTube riprodotto tramite il suo player senza cookie
Contenuto dinamico
Lo crei una volta, e ogni pagina si riempie dei propri dati
Inserisca i dati della pagina in qualsiasi testo, link o immagine, scegliendoli da un elenco dei valori reali della pagina. Un banner creato una sola volta accoglie ogni visitatore con la campagna da cui arriva; in un negozio, una barra fissa mostra nome e prezzo di ciascun prodotto.
- Dati di campagna, visitatore e data su ogni sito, senza configurazione
- Dati di prodotto, prezzo e carrello nei negozi, nella valuta della pagina
- Se i dati mancano l’elemento si nasconde, o mostra un fallback scelto da lei
Feed di dati
Dati dai vostri sistemi, dentro il test
Colleghi un feed che il sito già pubblica, come recensioni, date di eventi, testi di campagna o un feed di prodotti Google Merchant, scelga quale elemento vede ciascun visitatore e spunti i campi che una pagina può mostrare. I server di Pertento lo scaricano a intervalli programmati, così i visitatori non aspettano mai i vostri.
- Abbini l’elemento all’indirizzo della pagina, a un parametro URL, alla campagna o al prodotto
- Oppure mostri l’elemento in programma in questo momento, per le promozioni a tempo
- Ai visitatori arrivano solo i campi che spunta
Inspector e stati
Dia stile a hover, focus e active senza scrivere CSS
L’inspector modifica qualsiasi cosa selezioni: tipografia, spaziatura su un box model, dimensione, layout, sfondo e bordo. Un interruttore fra Normal, Hover, Focus e Active dà stile agli stati interattivi, così anche il colore di un pulsante al passaggio del mouse fa parte della variante.
- Cerchi qualsiasi proprietà CSS che il browser conosce, con Reset su ogni campo
- Link, immagini responsive, testo alternativo ed etichette di accessibilità
- Ogni modifica a uno stato è una modifica ordinaria, con annulla e salvataggio
Testo direttamente in pagina
Riscriva un titolo dove si trova
Faccia doppio clic su qualsiasi testo della pagina e scriva. Grassetto, corsivo e sottolineato funzionano come in un documento, e quando clicca altrove l’intervento diventa una modifica ordinaria che il comando Annulla riporta esattamente allo stato precedente.
- Grassetto, corsivo e sottolineato da tastiera, Shift+Enter per andare a capo, Escape per annullare
- Funziona sul testo e sul markup inline al suo interno
- Elencata fra le modifiche in parole semplici, come Heading text
Tutte le corrispondenze
Modifichi in un colpo solo tutti gli elementi corrispondenti, compresi quelli che si caricano più tardi
Usi un selettore CSS e aggiunga stile o HTML a tutti gli elementi che individua. Anche gli elementi che arrivano più tardi con lo scroll infinito, i caroselli o la navigazione interna all’app ricevono la modifica, una volta ciascuno.
- Accodare, inserire, prima, dopo o sostituire
- Un conteggio in tempo reale di quanti elementi corrispondono
- Select similar fa lo stesso puntando, per ogni elemento simile a quello che ha scelto
Modifiche e salvataggio
Ogni modifica elencata, in parole comprensibili
Ogni intervento è elencato in parole semplici, come Moved, Added button o Heading text, con annullamento e ripristino affidabili. Le modifiche fatte mentre è in corso un salvataggio vengono conservate, un salvataggio non riuscito si può ripetere, e prima di chiudere viene chiesta conferma.
- Annulli una singola modifica direttamente dall’elenco
- CSS e JavaScript globali in cima, con il loro numero di righe
- Una modifica il cui elemento manca dalla pagina viene segnalata, non nascosta
Anteprima ovunque
Veda la variante su un vero smartphone
Le anteprime per dispositivo mostrano le dimensioni desktop, tablet e smartphone dentro l’editor. Per una prova reale, Preview on another device fornisce un link che apre la variante salvata su qualsiasi smartphone o browser, e un secondo link che riporta quel browser allo stato normale.
- I token di accesso vengono rimossi dal link, quindi è sicuro condividerlo
- Mostra le modifiche salvate mentre il test è in corso su quella pagina
- Si apre in qualsiasi browser, non solo in Chrome
Codice quando le serve
HTML, CSS e JavaScript, con gli stessi dati della pagina
Tutto ciò che gli strumenti visuali non riescono a esprimere si scrive come codice sulla variante. Modifichi o aggiunga HTML attorno a un elemento, oppure scriva il CSS e il JavaScript globali della variante, e legga i dati della pagina con pertento.data().
- Insert page data aggiunge un token all’HTML
- Read page data aggiunge una chiamata pertento.data() al JavaScript
- CSS e JavaScript globali si possono svuotare completamente
Scorciatoie da tastiera
Scorciatoie da tastiera per le azioni che ripete
Le scorciatoie funzionano non appena clicca un elemento sulla pagina, e l’elenco completo si apre dall’icona della tastiera nella barra degli strumenti dell’editor.
- Salva
- ⌘SCtrl+S
- Annulla
- ⌘ZCtrl+Z
- Ripeti
- ⇧⌘ZCtrl+Y
- Modifica HTML
- E
- Duplica
- D
- Nascondi, mantenendo lo spazio
- H
- Aggiungi elemento
- A
- Rimuovi elemento
- ⌫
- Seleziona elemento padre
- ⇧↵
- Sposta su o giù
- ⌥↑⌥↓
- Apri il menu dell’elemento
- ⇧F10
- Modifica il testo sul posto