Eksperimentering
Visuell editor uten kode
Velg et element på ditt eget live nettsted og endre det i egenskapspanelet, eller legg inn en ferdig seksjon. Varianten lagres, og siden forblir urørt.
AI-editor
Beskriv endringen og se den ta form
Fortell editoren med vanlige ord hva du vil ha, eller pek på et element og spør. AI-en leser siden, foreslår endringer og forhåndsviser dem på det live nettstedet ditt. Ingenting lagres før du tar dem i bruk.
- Ett ord eller en hel seksjonRett opp én overskrift, eller bygg om en hel hero, meny eller pristabell med én enkelt prompt. Hver endring vises for seg, så du beholder bare dem du vil ha.
- JavaScript bare når det trengsDe fleste tester handler om tekst, styling og markup, og det er det AI-en skriver. Når en test skal reagere på noe, for eksempel et klikk eller rulling, skriver den også koden, og koden må godkjennes for seg.
- Den leser siden for degAI-en jobber ut fra en oversikt over siden du er på, med strukturen og tekstene. Du beskriver resultatet du vil ha, og den finner elementene som skal endres. Ingen selektorer, ingen utvikler.
- Forhåndsvisning før noe lagresDe foreslåtte endringene vises på den live siden din, hver med sin egen avkrysningsboks. Tar du dem i bruk, blir de vanlige endringer i varianten, som du kan angre helt til du lagrer.
- Sterke eksperimenter uten kodeAlle som kan beskrive en bedre side, kan også bygge varianten. AI-en svarer på språket du skriver på, og tekstene på siden beholder språket sitt.
- Du vet hva det koster på forhåndHver forespørsel bruker AI-kreditter, og panelet viser et anslag før du sender den. Utfylte skjemafelt og personopplysninger på siden maskeres før noe sendes.
Editoren åpnes fra sidepanelet i Chrome og laster det ekte nettstedet ditt i en ramme, så du peker på det du vil endre i stedet for å beskrive det i en oppgave. Velger du et element, åpnes egenskapspanelet: typografi, avstand på en boksmodell du kan dra i, størrelse, layout, bakgrunn og kant, og søk i alle CSS-egenskaper nettleseren kjenner. Hver endring lagres på varianten du redigerer, aldri på siden.
Med en bryter for Normal, Hover, Focus og Active styler du de interaktive tilstandene til et element uten CSS, så en knapp kan skifte farge ved hover i varianten, slik den ville gjort i stilarket ditt. Tekst redigerer du der den står, med et dobbeltklikk, og lenker, bilder (også de responsive bildene de fleste Shopify-butikker bruker), alt-tekst og tilgjengelighetsetiketter har egne felt.
Endringene er ikke begrenset til det som allerede finnes på siden. Fanen Add er et bibliotek med blokker, layouter og medier, fra en hero eller en FAQ til en sticky-bar med kjøpsknapp på mobil, og hver av dem henter nettstedets egne skrifttyper og farger der den havner. All tekst i en endring kan inneholde sidens egne data, så én endring kan vise hvert produkts egen pris.
En endringsliste viser med vanlige ord alt varianten gjør (Moved, Added button, Heading text), og du kan stole på angre og gjør om. Endringer du gjør mens en lagring pågår, blir tatt vare på. Den listen er varianten. Det er den som brukes på siden når en besøkende kommer, og den som implementeringsoverleveringen senere leser for å fortelle en utvikler hva som skal hardkodes.
Editoren i korte trekk
Én skjerm for alt en test endrer
Layers og komponenter til venstre, den live siden din i midten, egenskapspanelet til høyre. Hver seksjon nedenfor viser én del av den i bruk.
Sidepanelet i Chrome
Åpne editoren fra siden du ser på
Utvidelsen legger seg i sidepanelet i Chrome, ved siden av nettstedet, og følger fanen du er i. Den finner nettstedet, viser eksperimentene for det og åpner editoren på denne siden i stedet for på siden testen startet fra.
- Full høyde og justerbar størrelse, og panelet forblir åpent når du klikker inn på siden
- Filtrer etter status, eller søk etter navn eller eksperimentnummer
- Ber om tilgang til et nettsted én gang, første gang du åpner editoren der
Komponentbibliotek
Legg til en hel seksjon, ikke bare en ny farge
Dra en blokk fra fanen Add inn på siden, så viser en blå linje hvor den havner før du slipper den. Den kommer med nettstedets egen skrifttype og overskriftsstørrelser, og aksentfargen hentes fra der du slapp den.
- Tolv blokker, fra en hero og en FAQ til en sticky-bar og en popup
- Seksjoner, containere og kolonner som legger seg under hverandre på mobil
- Video, en bildeslider og et galleri, og YouTube spilles av gjennom spilleren uten cookies
Dynamisk innhold
Bygg én gang, så fyller hver side inn sine egne data
Sett inn data fra siden i hvilken som helst tekst, lenke eller bilde, valgt fra en liste med sidens ekte verdier. Et banner som er bygget én gang, møter hver besøkende med kampanjen de kom fra; i en nettbutikk viser en sticky-bar hvert produkts eget navn og pris.
- Data om kampanje, besøkende og dato på alle nettsteder, uten oppsett
- Produkt-, pris- og handlekurvdata i nettbutikker, i sidens egen valuta
- Mangler dataene, skjules elementet eller viser en reserveverdi du velger
Datafeeder
Data fra dine egne systemer, inne i testen
Koble til en feed som nettstedet allerede publiserer, for eksempel anmeldelser, arrangementsdatoer, kampanjetekster eller en produktfeed fra Google Merchant, velg hvilken oppføring hver besøkende ser, og kryss av for feltene en side får vise. Pertentos servere henter den etter en tidsplan, så besøkende venter aldri på serverne dine.
- Velg oppføringen etter sideadressen, en URL-parameter, kampanjen eller produktet
- Eller vis oppføringen som er planlagt for akkurat nå, for tidsbegrensede kampanjer
- Bare feltene du krysser av for, når fram til besøkende
Egenskapspanel og tilstander
Style hover, fokus og aktiv uten å skrive CSS
Egenskapspanelet redigerer det du velger: typografi, avstand på en boksmodell, størrelse, layout, bakgrunn og kant. Med en bryter for Normal, Hover, Focus og Active styler du de interaktive tilstandene, så hover-fargen til en knapp også er en del av varianten.
- Søk i alle CSS-egenskaper nettleseren kjenner, med Reset på hvert felt
- Lenker, responsive bilder, alt-tekst og tilgjengelighetsetiketter
- Hver endring av en tilstand er en vanlig endring, med angre og lagring
Tekst der den står
Skriv om en overskrift der den står
Dobbeltklikk på hvilken som helst tekst på siden og skriv. Fet, kursiv og understreking fungerer som i et dokument, og når du klikker bort, blir redigeringen en vanlig endring som kan angres nøyaktig.
- Fet, kursiv og understreking fra tastaturet, Shift+Enter for linjeskift, Escape for å avbryte
- Fungerer på tekst og på inline-markupen i den
- Vises i endringslisten med vanlige ord, som Heading text
Alle treff
Endre alle elementer som passer, på én gang, også dem som lastes senere
Bruk en CSS-selektor og legg til styling eller HTML på alt den treffer. Elementer som kommer senere via uendelig rulling, karuseller eller navigasjon inne i appen, får også endringen, én gang hver.
- Sett inn sist, sett inn først, før, etter eller erstatt
- En live opptelling av hvor mange elementer som treffes
- Velg lignende gjør det samme ved å peke, for alle elementer som ligner det du valgte
Endringer og lagring
Hver endring på listen, med ord du kan lese
Hver redigering vises med vanlige ord, som Moved, Added button eller Heading text, og du kan stole på angre og gjør om. Endringer du gjør mens en lagring pågår, blir tatt vare på, en mislykket lagring kan prøves på nytt, og editoren spør før den lukkes.
- Tilbakestill en enkelt endring fra listen
- Global CSS og JavaScript øverst, med antall linjer
- En endring der elementet mangler på siden, blir markert, ikke skjult
Forhåndsvisning hvor som helst
Se varianten på en ekte mobil
Forhåndsvisning per enhet viser størrelsene for desktop, nettbrett og mobil inne i editoren. Vil du se det på ekte, gir Preview on another device en lenke som åpner den lagrede varianten på hvilken som helst mobil eller nettleser, og en lenke til som setter den nettleseren tilbake til vanlig visning.
- Innloggingstokener fjernes fra lenken, så den er trygg å dele
- Viser de lagrede endringene mens eksperimentet kjører på den siden
- Åpnes i alle nettlesere, ikke bare i Chrome
Kode når du vil ha den
HTML, CSS og JavaScript, med de samme sidedataene
Alt de visuelle verktøyene ikke kan uttrykke, skrives som kode på varianten. Rediger eller legg til HTML rundt et element, eller skriv global CSS og JavaScript for varianten, og les sidens data med pertento.data().
- Insert page data legger til et token i HTML
- Read page data legger til et kall til pertento.data() i JavaScript
- Global CSS og JavaScript kan tømmes helt
Hurtigtaster
Hurtigtaster for handlingene du gjentar
Hurtigtastene virker så snart du klikker på et element på siden, og hele listen ligger bak tastaturikonet i verktøylinjen i editoren.
- Lagre
- ⌘SCtrl+S
- Angre
- ⌘ZCtrl+Z
- Gjør om
- ⇧⌘ZCtrl+Y
- Rediger HTML
- E
- Dupliser
- D
- Skjul, men behold plassen
- H
- Legg til element
- A
- Fjern element
- ⌫
- Velg overordnet element
- ⇧↵
- Flytt opp eller ned
- ⌥↑⌥↓
- Åpne elementmenyen
- ⇧F10
- Rediger tekst der den står