Eksperimenter

Visuel editor uden kode

Vælg et element på jeres eget live website, og ændr det i egenskabspanelet, eller sæt en færdig sektion ind. Varianten gemmes, og siden er urørt.

AI-editor

Beskriv ændringen, og se den tage form

Fortæl editoren med jeres egne ord, hvad I vil have, eller peg på et element, og spørg. AI'en læser siden, foreslår ændringer og forhåndsviser dem på jeres live website. Intet gemmes, før I anvender dem.

AI-editoren ved siden af en rodet landingsside: en prompt beder om én klar overskrift, én hovedknap og planer, der er lette at sammenligne, AI'en foreslår fem ændringer og forhåndsviser dem, mens siden tegnes på ny uden rodet, og til sidst anvendes og gemmes ændringerne.
  • Et ord eller en hel sektionRet en enkelt overskrift, eller omarbejd en hel hero, menu eller pristabel med én prompt. Hver ændring vises for sig, så I kun beholder dem, I vil have.
  • JavaScript kun, når der er brug for detDe fleste tests handler om tekst, styling og markup, og det er det, AI'en skriver. Når en test skal reagere på noget, for eksempel et klik eller en scroll, skriver den også koden, og koden skal godkendes for sig.
  • Den læser siden for jerAI'en arbejder ud fra en oversigt over den side, I er på, med dens struktur og tekster. I beskriver resultatet, og den finder de elementer, der skal ændres. Ingen selektorer, ingen udvikler.
  • En forhåndsvisning, før noget gemmesDe foreslåede ændringer vises på jeres live side, hver med sin egen afkrydsningsboks. Anvender I dem, bliver de almindelige ændringer i varianten, som I kan fortryde, indtil I gemmer.
  • Stærke eksperimenter uden kodeAlle, der kan beskrive en bedre side, kan også bygge varianten. AI'en svarer på det sprog, I skriver på, og teksterne på siden beholder deres sprog.
  • I kender prisen på forhåndHver forespørgsel bruger AI-kreditter, og panelet viser et overslag, før I sender den. Udfyldte formularfelter og personoplysninger på siden maskeres, før noget sendes.
Live websiteEgenskabspanelKomponenter

Editoren åbnes fra Chromes sidepanel og indlæser jeres rigtige website i en ramme, så I peger på det, I vil ændre, frem for at beskrive det i en ticket. Når I vælger et element, åbnes egenskabspanelet: typografi, afstand på en boksmodel, I kan trække i, størrelse, layout, baggrund og kant, og søgning blandt alle CSS-egenskaber, browseren kender. Hver ændring registreres på den variant, I redigerer, aldrig på siden.

En kontakt med Normal, Hover, Focus og Active styler et elements interaktive tilstande uden CSS, så en knap kan skifte farve ved hover i varianten, sådan som den ville gøre i jeres stylesheet. Tekst redigeres, hvor den står, med et dobbeltklik, og links, billeder (inklusive de responsive billeder, de fleste Shopify-butikker bruger), alt-tekst og tilgængelighedsetiketter har deres egne felter.

Ændringer er ikke begrænset til det, der allerede er på siden. Add-fanen er et bibliotek af blokke, layouts og medier, fra en hero eller en FAQ til en sticky bar med købsknap på mobil, og hver enkelt overtager websitets egne skrifttyper og farver der, hvor den lander. Al tekst i en ændring kan indeholde sidens egne data, så én ændring kan vise hvert produkts egen pris.

En liste over ændringer viser alt, hvad varianten gør, i klart sprog (Moved, Added button, Heading text) med fortryd og gentag, I kan stole på, og redigeringer, I laver, mens der gemmes, bevares. Den liste er varianten. Det er den, der anvendes på en besøgendes side, og den, som overdragelsen til implementering senere læser for at fortælle en udvikler, hvad der skal hardkodes.

Start prøveperiodeSe det i konsollen

Editoren i overblik

Én skærm til alt, hvad en test ændrer

Layers og komponenter til venstre, jeres live side i midten, egenskabspanelet til højre. Hver sektion nedenfor viser én del af editoren i brug.

Den visuelle editor på en produktside: Trust row-blokken trækkes fra Add-fanen og slippes under læg i kurv-knappen, dens bedømmelseslinje kobles til sidens egen produktbedømmelse og antal anmeldelser, og varianten gemmes.

Chromes sidepanel

Åbn editoren fra den side, I sidder og ser på

Udvidelsen lægger sig i Chromes sidepanel, ved siden af websitet, og følger den fane, I er på. Den finder websitet, lister dets eksperimenter og åbner editoren på denne side frem for på den side, testen blev startet fra.

  • I fuld højde, kan ændres i størrelse og forbliver åben, når I klikker ind på siden
  • Filtrér efter status, eller søg efter navn eller eksperimentnummer
  • Beder om adgang til et website én gang, første gang I åbner editoren dér
Chromes sidepanel ved siden af en produktside med en liste over websitets eksperimentudkast, hvor det valgte viser sine varianter og en Open editor-knap.

Komponentbibliotek

Tilføj en hel sektion, ikke bare en ny farve

Træk en blok fra Add-fanen ind på siden, og en blå linje viser, hvor den lander, før den gør det. Den kommer i websitets egen skrifttype og overskriftsstørrelser og tager sin accentfarve fra det sted, I slap den.

  • Tolv blokke, fra en hero og en FAQ til en sticky bar og en pop-up
  • Sektioner, containere og kolonner, der stables på telefoner
  • Video, en billedslider og et galleri, hvor YouTube afspilles gennem sin no-cookie-afspiller
Add-fanen ved siden af en produktside: FAQ-flisen trækkes ind på siden, en blå linje markerer, hvor den lander, og en FAQ dukker op under læg i kurv-knappen med pile i samme grønne farve som websitets egne knapper.

Dynamisk indhold

Byg det én gang, og hver side udfylder sine egne data

Indsæt data fra siden i enhver tekst, ethvert link eller billede, valgt fra en liste over sidens rigtige værdier. Et banner, der er bygget én gang, byder hver besøgende velkommen med den kampagne, de kom fra; i en webshop viser en sticky bar hvert produkts eget navn og pris.

  • Kampagne-, besøgs- og datodata på alle websites, uden opsætning
  • Produkt-, pris- og kurvdata i webshops, i sidens egen valuta
  • Manglende data skjuler elementet eller viser en fallback, I vælger
En sticky bar med købsknap, bygget én gang ud fra produktnavnet og prisen, vist på en telefon, mens den udfylder sit eget navn og sin egen pris på tre forskellige produktsider efter tur.

Datafeeds

Data fra jeres egne systemer, inde i testen

Forbind et feed, som websitet allerede udgiver, for eksempel anmeldelser, eventdatoer, kampagnetekster eller et produktfeed fra Google Merchant, vælg, hvilken post hver besøgende ser, og sæt flueben ved de felter, en side må vise. Pertentos servere henter det efter en plan, så besøgende aldrig venter på jeres.

  • Match posten til sideadressen, en URL-parameter, kampagnen eller produktet
  • Eller vis den post, der er planlagt til nu, til tidsbestemte kampagner
  • Det er kun de felter, I sætter flueben ved, der nogensinde når frem til en besøgende
Et anmeldelsesfeed i websiteindstillingerne, matchet til produktet via SKU og opdateret hver time, med flueben ved to af dets felter, og produktsiden, der erstatter sin fallback med den gennemsnitlige bedømmelse og det antal anmeldelser, feedet leverer.

Egenskabspanel og tilstande

Style hover, fokus og aktiv uden at skrive CSS

Egenskabspanelet redigerer det, I vælger: typografi, afstand på en boksmodel, størrelse, layout, baggrund og kant. En kontakt med Normal, Hover, Focus og Active styler de interaktive tilstande, så en knaps hoverfarve også er en del af varianten.

  • Søg blandt alle CSS-egenskaber, browseren kender, med Reset på hvert felt
  • Links, responsive billeder, alt-tekst og tilgængelighedsetiketter
  • Hver redigering af en tilstand er en almindelig ændring, med fortryd og gem
Egenskabspanelet med tilstandskontakten flyttet fra Normal til Hover og en mørkere blå baggrund valgt, mens Start free trial-knappen på et priskort får den farve og løfter sig under markøren.

Tekst på stedet

Omskriv en overskrift, hvor den står

Dobbeltklik på en hvilken som helst tekst på siden, og skriv. Fed, kursiv og understregning virker, som de gør i et dokument, og når I klikker væk, bliver redigeringen en almindelig ændring, som fortryd ruller præcist tilbage.

  • Fed, kursiv og understregning fra tastaturet, Shift+Enter til linjeskift, Escape for at annullere
  • Virker på tekst og den inline-markup, der er inde i den
  • Vises i listen over ændringer i klart sprog, som Heading text
En overskrift på en landingsside, der dobbeltklikkes og omskrives på stedet, med værktøjslinjen for fed, kursiv og understregning over sig, og redigeringen, der dukker op i listen over ændringer.

Hvert match

Ændr alle matchende elementer på én gang, også dem, der indlæses senere

Brug en CSS-selektor, og tilføj styling eller HTML til alt, hvad den rammer. Elementer, der kommer til senere via uendelig scroll, karruseller eller navigation i appen, får også ændringen, én gang hver.

  • Tilføj, indsæt, før, efter eller erstat
  • En live optælling af, hvor mange elementer der matcher
  • Vælg lignende gør det samme ved at pege, på alle elementer magen til det, I valgte
CSS-selektorværktøjet, der rammer artikelkortene på en blogoversigt, med tolv match: et New-badge dukker op på hvert kort efter tur, og en ny række, indlæst via uendelig scroll, har det allerede på, når den kommer til.

Ændringer og lagring

Alle ændringer på en liste, i ord I kan forstå

Hver redigering vises på listen i klart sprog, såsom Moved, Added button eller Heading text, med fortryd og gentag, I kan stole på. Redigeringer, I laver, mens der gemmes, bevares, en mislykket lagring kan prøves igen, og editoren spørger, før den lukker.

  • Rul en enkelt ændring tilbage fra listen
  • Global CSS og JavaScript øverst, med deres antal linjer
  • En ændring, hvis element mangler på siden, markeres i stedet for at blive skjult
Listen over ændringer for en variant, der fyldes op med fire redigeringer i klart sprog, hvor den sidste fortrydes og gentages, og status, der går fra ikke-gemte ændringer over gemmer til alle ændringer gemt.

Forhåndsvisning overalt

Se varianten på en rigtig telefon

Enhedsforhåndsvisninger viser desktop-, tablet- og telefonstørrelser inde i editoren. Vil I se den på en rigtig enhed, giver Preview on another device et link, der åbner den gemte variant på enhver telefon eller i enhver browser, og et andet link, der sætter den browser tilbage til det normale.

  • Login-tokens fjernes fra linket, så det er sikkert at dele
  • Viser de gemte ændringer, mens eksperimentet kører på den side
  • Åbner i enhver browser, ikke kun Chrome
Panelet Preview on another device med et link og en kopiknap, der bekræfter kopieringen, ved siden af en telefon, der viser variantens produktside.

Kode, når I vil have den

HTML, CSS og JavaScript, med de samme sidedata

Alt, hvad de visuelle værktøjer ikke kan udtrykke, skrives som kode på varianten. Redigér eller tilføj HTML omkring et element, eller skriv variantens globale CSS og JavaScript, og læs sidens data med pertento.data().

  • Insert page data tilføjer et token til HTML
  • Read page data tilføjer et pertento.data()-kald til JavaScript
  • Global CSS og JavaScript kan ryddes helt
Kodeeditoren på en variants JavaScript, der læser den besøgendes kampagne med pertento.data() og ændrer sidens overskrift for besøgende, der kom fra én bestemt kampagne.

Tastaturgenveje

Tastaturgenveje til de handlinger, I gentager

Genvejene virker, så snart I klikker på et element på siden, og den fulde liste ligger bag tastaturikonet i editorens værktøjslinje.

Gem
⌘SCtrl+S
Fortryd
⌘ZCtrl+Z
Gentag
⇧⌘ZCtrl+Y
Redigér HTML
E
Duplikér
D
Skjul, men behold pladsen
H
Tilføj element
A
Fjern element
⌫
Vælg overordnet element
⇧↵
Flyt op eller ned
⌥↑⌥↓
Åbn elementmenuen
⇧F10
Redigér tekst på stedet

Mere på dette område

Bedre eksperimenter, bedre konvertering

Test on all visitors with the world’s lightest script and make confident decisions powered by real-time reporting.

Start prøveperiodeBook en demo