Experimenty
Vizuální editor bez kódu
Vyberte prvek na svém živém webu a změňte jej v panelu vlastností, nebo vložte hotovou sekci. Varianta se uloží, stránka zůstává nedotčená.
AI editor
Popište změnu a sledujte, jak vzniká
Napište editoru vlastními slovy, co chcete, nebo ukažte na prvek a zeptejte se. AI si stránku přečte, navrhne změny a ukáže jejich náhled na vašem živém webu. Dokud je nepoužijete, nic se neuloží.
- Jedno slovo nebo celá sekceOpravte jeden nadpis, nebo jediným zadáním přepracujte celou hero sekci, menu či ceník. Každá změna je v seznamu zvlášť, takže si necháte jen ty, které chcete.
- JavaScript, jen když je potřebaVětšina testů mění texty, styly a markup. Přesně to AI píše. Když má test na něco reagovat, třeba na kliknutí nebo posouvání, napíše AI i kód, který pak čeká na vaše samostatné schválení.
- Stránku si přečte za vásAI pracuje s osnovou stránky, na které právě jste: s její strukturou a texty. Vy popíšete, čeho chcete dosáhnout, a AI najde prvky, které je potřeba změnit. Žádné selektory, žádný vývojář.
- Náhled dřív, než se cokoli uložíNavržené změny se objeví na vaší živé stránce, každá s vlastním zaškrtávacím políčkem. Po použití se z nich stanou obyčejné změny ve variantě, které jde až do uložení vrátit zpět.
- Silné experimenty bez kóduKdo dokáže popsat lepší stránku, dokáže pro ni postavit i variantu. AI odpovídá v jazyce, ve kterém píšete, a texty na stránce nechává v jazyce stránky.
- Cenu uvidíte předemKaždý požadavek spotřebuje AI kredity a panel ještě před odesláním ukáže odhad. Hodnoty z formulářů a osobní údaje na stránce se zamaskují dřív, než se cokoli odešle.
Editor se otevírá z bočního panelu Chrome a načte váš skutečný web do rámce, takže na věc, kterou chcete změnit, ukážete, místo abyste ji popisovali v tiketu. Výběr prvku otevře panel vlastností: typografie, rozestupy v box modelu, které upravíte tažením, velikost, rozvržení, pozadí a ohraničení, a vyhledávání napříč všemi vlastnostmi CSS, které prohlížeč zná. Každá změna se zaznamená k variantě, kterou právě upravujete, nikdy ke stránce.
Přepínačem Normal, Hover, Focus a Active nastavíte styl interaktivních stavů prvku bez CSS, takže tlačítko může ve variantě měnit barvu při najetí myší stejně, jako kdyby to měl váš web ve stylech. Text upravíte dvojklikem přímo tam, kde je, a odkazy, obrázky (včetně responzivních obrázků, které používá většina e-shopů na Shopify), alternativní text a popisky pro přístupnost mají vlastní pole.
Změny se neomezují na to, co už na stránce je. Záložka Add je knihovna bloků, rozvržení a médií, od hero sekce nebo FAQ až po sticky nákupní lištu na mobilu, a každý prvek převezme písma a barvy webu z místa, kam ho umístíte. Jakýkoli text ve změně může nést vlastní data stránky, takže jedna změna ukáže u každého produktu jeho vlastní cenu.
Seznam změn ukazuje všechno, co varianta dělá, srozumitelnými slovy (Moved, Added button, Heading text), s funkcemi zpět a znovu, na které se můžete spolehnout, a úpravy provedené během ukládání se zachovají. Tento seznam je samotná varianta. Právě on se aplikuje na stránce návštěvníka a z něj později čte předání k implementaci, které vývojáři řekne, co má napevno zapsat do kódu.
Editor v kostce
Jedna obrazovka pro všechno, co test mění
Panel Layers a komponenty vlevo, vaše živá stránka uprostřed, panel vlastností vpravo. Každá z následujících sekcí ukazuje jednu jeho část v akci.
Boční panel Chrome
Otevřete editor ze stránky, na kterou se právě díváte
Rozšíření se ukotví v bočním panelu Chrome vedle webu a sleduje kartu, na které jste. Najde web, vypíše jeho experimenty a otevře editor na této stránce, a ne na té, ze které test původně vycházel.
- Na celou výšku, s nastavitelnou velikostí, a zůstane otevřený, i když kliknete do stránky
- Filtrování podle stavu nebo hledání podle názvu či čísla experimentu
- O přístup k webu požádá jen jednou, když tam editor poprvé otevřete
Knihovna komponent
Přidejte celou sekci, ne jen novou barvu
Přetáhněte blok ze záložky Add na stránku a modrá čára předem ukáže, kam dopadne. Blok rovnou převezme písmo a velikosti nadpisů webu a barvu zvýraznění z místa, kam jste ho pustili.
- Dvanáct bloků, od hero sekce a FAQ po sticky lištu a vyskakovací okno
- Sekce, kontejnery a sloupce, které se na telefonech skládají pod sebe
- Video, slider obrázků a galerie, přičemž YouTube se přehrává přes svůj přehrávač bez cookies
Dynamický obsah
Vytvořte jednou a každá stránka si doplní vlastní data
Vložte do jakéhokoli textu, odkazu nebo obrázku data ze stránky, vybraná ze seznamu jejích skutečných hodnot. Banner vytvořený jednou přivítá každého návštěvníka kampaní, ze které přišel; v e-shopu sticky lišta ukáže u každého produktu jeho vlastní název a cenu.
- Data o kampani, návštěvníkovi a datu na každém webu, bez nastavování
- Data o produktu, ceně a košíku v e-shopech, ve vlastní měně stránky
- Když data chybí, prvek se skryje nebo ukáže záložní hodnotu, kterou zvolíte
Datové feedy
Data z vašich vlastních systémů přímo v testu
Připojte feed, který už web publikuje, například recenze, termíny akcí, texty kampaní nebo produktový feed Google Merchant, zvolte, kterou položku každý návštěvník uvidí, a zaškrtněte pole, která smí stránka zobrazit. Servery Pertenta jej stahují podle plánu, takže návštěvníci nikdy nečekají na ty vaše.
- Přiřaďte položku podle adresy stránky, parametru URL, kampaně nebo produktu
- Nebo ukažte položku naplánovanou na aktuální dobu, pro časově omezené akce
- K návštěvníkovi se vždy dostanou jen pole, která zaškrtnete
Panel vlastností a stavy
Nastavte styl pro hover, focus a active bez psaní CSS
Panel vlastností upravuje cokoli, co vyberete: typografii, rozestupy v box modelu, velikost, rozvržení, pozadí a ohraničení. Přepínačem Normal, Hover, Focus a Active nastavíte styl interaktivních stavů, takže i barva tlačítka při najetí myší je součástí varianty.
- Vyhledejte jakoukoli vlastnost CSS, kterou prohlížeč zná, s tlačítkem Reset u každého pole
- Odkazy, responzivní obrázky, alternativní text a popisky pro přístupnost
- Každá úprava stavu je obyčejná změna, kterou jde vrátit zpět i uložit
Text přímo na místě
Přepište nadpis tam, kde je
Dvakrát klikněte na jakýkoli text na stránce a pište. Tučné písmo, kurzíva a podtržení fungují jako v dokumentu, a když kliknete jinam, z úpravy se stane obyčejná změna, kterou funkce zpět přesně vrátí.
- Tučné písmo, kurzíva a podtržení z klávesnice, Shift+Enter pro zalomení řádku, Escape pro zrušení
- Funguje na textu i na inline markupu uvnitř něj
- V seznamu změn srozumitelně uvedeno jako Heading text
Všechny shody
Změňte všechny odpovídající prvky najednou, včetně těch, které se načtou později
Zacilte na CSS selektor a přidejte styly nebo HTML všemu, co mu odpovídá. Prvky, které přibudou později přes nekonečné posouvání, karusely nebo navigaci uvnitř aplikace, dostanou změnu také, každý jednou.
- Připojit, vložit, před, za nebo nahradit
- Živý počet odpovídajících prvků
- Výběr podobných udělá totéž ukázáním: změní každý prvek podobný tomu, který jste vybrali
Změny a ukládání
Každá změna v seznamu, srozumitelnými slovy
Každá úprava je uvedena srozumitelnými slovy, například Moved, Added button nebo Heading text, s funkcemi zpět a znovu, na které se můžete spolehnout. Úpravy provedené během ukládání se zachovají, neúspěšné uložení lze zopakovat a zavření se nejdřív zeptá.
- Vraťte kteroukoli jednotlivou změnu přímo ze seznamu
- Globální CSS a JavaScript nahoře, s počtem řádků
- Změna, jejíž prvek na stránce chybí, se označí, ne skryje
Náhled kdekoli
Podívejte se na variantu na skutečném telefonu
Náhledy zařízení ukazují v editoru velikosti pro desktop, tablet a telefon. Pro skutečné zařízení pak funkce Preview on another device nabídne odkaz, který otevře uloženou variantu na jakémkoli telefonu nebo v jakémkoli prohlížeči, a druhý odkaz, který ten prohlížeč vrátí do normálního stavu.
- Přihlašovací tokeny se z odkazu odstraní, takže ho můžete bezpečně sdílet
- Ukazuje uložené změny, zatímco na dané stránce běží experiment
- Otevře se v jakémkoli prohlížeči, nejen v Chrome
Kód, když ho chcete
HTML, CSS a JavaScript se stejnými daty stránky
Cokoli, co vizuální nástroje neumí vyjádřit, napíšete jako kód ve variantě. Upravte nebo přidejte HTML kolem prvku, nebo napište globální CSS a JavaScript varianty a data stránky čtěte přes pertento.data().
- Insert page data přidá do HTML token
- Read page data přidá do JavaScriptu volání pertento.data()
- Globální CSS a JavaScript lze úplně vymazat
Klávesové zkratky
Klávesové zkratky pro akce, které opakujete
Zkratky fungují, jakmile kliknete na prvek na stránce, a celý seznam najdete pod ikonou klávesnice v panelu nástrojů editoru.
- Uložit
- ⌘SCtrl+S
- Zpět
- ⌘ZCtrl+Z
- Znovu
- ⇧⌘ZCtrl+Y
- Upravit HTML
- E
- Duplikovat
- D
- Skrýt se zachováním místa
- H
- Přidat prvek
- A
- Odebrat prvek
- ⌫
- Vybrat nadřazený prvek
- ⇧↵
- Posunout nahoru či dolů
- ⌥↑⌥↓
- Otevřít nabídku prvku
- ⇧F10
- Upravit text přímo na místě