A/B testování ve Webflow: nástroje, nastavení a co testovat

Proč vůbec A/B testovat web ve Webflow

Názory na weby jsou levné. Každý u stolu má oblíbený nadpis. A/B test nahradí spor daty: polovina návštěvníků uvidí verzi A, polovina verzi B a vy porovnáte, co udělali.

Webflow se k tomu hodí, protože upravit stránku a nasadit variantu nevyžaduje frontu na vývojáře. Nástroj je ale ta snadná část. Většina neúspěšných testů selže na metodě: nejasný cíl, málo návštěvnosti, předčasně ukončený test.

Tento průvodce pokrývá nástroje, základy statistiky, co testovat jako první u SaaS a B2B webů a typické chyby. Celý příběh projektu najdete v případové studii Oscilar.

Webflow Optimize vs externí nástroje

Webflow Optimize (nativní)

Podle oznámení Webflow umí Webflow Optimize A/B testování, například nadpisů, obrázků, CTA a formátů obsahu, a personalizaci pro segmenty publika bez kódu. Hlavní výhoda je, že žije v platformě, ve které už web stojí, takže není další dodavatel skriptu a je méně pohyblivých částí. Ceny ani požadavky na tarif tu neuvádím, protože se mění a sekundární zdroje se rozcházejí. Před plánováním rozpočtu se podívejte na aktuální ceník Webflow.

Externí možnosti

• Optibase je aplikace určená k A/B testování ve Webflow, popsaná v jejich průvodci. Je to zdroj od dodavatele, tak ho čtěte.
• PostHog má návod na A/B testy ve Webflow postavený na feature flazích a produktové analytice. Hodí se, když PostHog už používáte.
• VWO, AB Tasty a Optimizely jsou nástroje, na které Google odkazuje po ukončení Google Optimize. Nápověda Googlu uvádí, že Optimize skončil 30. září 2023.

Jak bych vybíral

• Malý tým, jednoduché testy: začněte nativním nástrojem nebo lehkou aplikací pro Webflow.
• Produktová analytika už běží: použijte experimenty v tomto nástroji, aby cíle a data byly na jednom místě.
• Mnoho webů, týmů a přísná pravidla: může se vyplatit enterprise platforma.

Ať zvolíte cokoli, před závazkem ověřte čtyři věci: jak se varianty zobrazují (riziko probliknutí), jak se sledují cíle, jak se dělí návštěvnost a zda nástroj funguje s vaší cookie lištou.

Nastavení před prvním testem

Postupuji pokaždé stejně.

1. Vyberte jednu hlavní metriku spojenou s tržbami: poptávky dema, registrace do zkušební verze, kvalifikované leady. Ne zobrazení stránek.
2. Zapište výchozí stav a datum. Bez toho později zlepšení neprokážete.
3. Nastavte konverzní událost a otestujte ji. Odešlete formulář sami a ověřte, že událost dorazí do analytiky. Rozbité měření je nejčastější důvod, proč je výsledek testu k ničemu.
4. Napište hypotézu: „Návštěvníci nad ohybem nechápou, co děláme, takže konkrétnější nadpis zvýší počet poptávek dema.“
5. Spočítejte velikost vzorku (další kapitola) a délku testu určete předem.
6. Variantu postavte ve Webflow, zkontrolujte všechny breakpointy a hlavní prohlížeče a pak otestujte i samotný test: funguje dělení návštěvnosti, spouští každá varianta cíl?
7. Určete, kdo je v testu. Všichni návštěvníci, nebo jen noví? Desktop a mobil dohromady? Vyřaďte interní návštěvnost.
8. Veďte záznam: datum, hypotéza, varianty, výsledek, rozhodnutí.

Velikost vzorku a délka testu lidsky

Abyste věděli, jak dlouho musí test běžet, potřebujete tři vstupy:

• Výchozí konverzní poměr, například 2 %.
• Minimální zjistitelný efekt: nejmenší zlepšení, které má smysl řešit, například relativní nárůst o 20 %.
• Hladinu spolehlivosti, běžně 95 %, a statistickou sílu testu, běžně 80 %.

Zadejte je do kalkulačky, například kalkulačky velikosti vzorku Evana Millera. Řekne vám, kolik návštěvníků potřebuje každá varianta. Čím nižší výchozí konverze a čím menší efekt chcete zachytit, tím víc návštěvníků potřebujete. Na tom stojí pravidlo: drobné úpravy potřebují velkou návštěvnost.

Praktická pravidla

• Velikost vzorku určete před startem a test dřív neukončujte.
• Nechte test běžet celé týdny, aby se započítalo chování ve všední dny i o víkendu. B2B weby se v pondělí chovají jinak než v pátek.
• Nenechávejte ho běžet donekonečna. Pokud kalkulačka chce půl roku návštěvnosti, test není reálný. Udělejte změnu větší, testujte stránku s vyšší návštěvností nebo testujte dříve ve funnelu.
• I nulový rozdíl je výsledek. Říká, že prvek tolik nezáleží, a můžete jít dál.

Co testovat jako první u SaaS a B2B webů

Testy řaďte podle dvou věcí: kolik návštěvníků prvek vidí a jak blízko je konverzi. Jsou to hypotézy k ověření na vašem webu, ne záruky.

1. Nadpis a podnadpis na homepage. Konkrétní přínos proti vágnímu sloganu. Vidí ho každý návštěvník.
2. Hlavní CTA. Text („Domluvit demo“ proti „Podívat se v akci“), umístění a to, co se stane po kliknutí.
3. Formulář pro demo nebo kontakt. Méně polí, jasnější slib, co bude dál, a umístění formuláře na stránce.
4. Umístění důkazů. Loga zákazníků, citace a výsledky vedle CTA místo níž na stránce.
5. Formát hero sekce. Screenshot produktu proti abstraktní ilustraci, krátké video proti statickému obrázku.
6. Rozvržení ceníku, až hlavní cesta funguje.
7. Navigace. Jedno jasné CTA tlačítko v hlavičce a méně odkazů, které odvádějí pozornost.

Testujte jednu změnu najednou a dřív sdělení než barvu. Testy barvy tlačítka jsou oblíbené, protože jsou snadné, ne proto, že tam se konverze ztrácí. Chcete-li najít největší překážku jako první, podívejte se před návrhem varianty na nahrávky relací a místa, kde návštěvníci odpadají.

Chyby: probliknutí, nahlížení do výsledků a další

Probliknutí (flicker)

Některé nástroje běžící v prohlížeči nejdřív načtou původní stránku a variantu vymění až po spuštění skriptu. Návštěvník na okamžik uvidí původní verzi, což vypadá rozbitě a může zkreslit výsledek. Omezíte to tím, že vyzkoušíte, jak nástroj zobrazuje varianty na pomalém připojení, dáte testovací skript co nejdřív do stránky a zvolíte nástroj, jehož přístup vašim stránkám vyhovuje. Výsledek testu na stránce, která bliká, je částečně výsledek o blikání.

Nahlížení do výsledků (peeking)

Kontrola výsledků každý den a ukončení testu, když varianta „vyhrává“, zvyšuje počet falešně pozitivních výsledků. Problém vysvětluje Evan Miller v textu How Not To Run an A/B Test. Nejdřív určete velikost vzorku, nebo použijte nástroj se sekvenčními metodami určenými pro průběžné sledování, a v reportu uveďte, který z nich.

Další pasti

• Testování víc věcí najednou, takže nepoznáte, co zabralo.
• Ignorování mobilu. Varianta, která vyhraje na desktopu, může na telefonech prohrát. Výsledky segmentujte, ale nekrájejte je tak, že v segmentech nezbudou data.
• Rozbité měření u jedné varianty. Vždy otestujte obě.
• Sezónnost a kampaně. Placená kampaň spuštěná uprostřed testu změní, kdo na web chodí.
• Pomalé stránky. Rychlost je součást zážitku, takže varianty držte stejně lehké jako originál.
• Souhlas s cookies. Pokud se návštěvníci, kteří sledování odmítnou, nepočítají, ověřte, že to nezkresluje jednu variantu.

Můj pohled: postup je důležitější než nástroj

U Oscilaru, SaaS pro prevenci podvodů, se redesign testoval iterativně a konverze poptávek dema stoupla z 1,2 % na 3,7 % za čtyři měsíce. Průměrná doba návštěvy vzrostla o 35 % a míra odskočení klesla o 20 %. Netvrdil bych, že to způsobil některý jednotlivý test. Šlo o redesign v kombinaci s testováním a celý příběh je v případové studii A/B testování Oscilaru a na stránce projektu Oscilar.

Co si z toho odnáším pro agentury: nástroj je méně důležitý než disciplína. Jedna metrika, jedna hypotéza na test, předem určená velikost vzorku a záznam toho, co jste se naučili. Z toho je navíc dobrý report pro klienty na paušálu.

Stavím ve Webflow a s agenturami spolupracuji white-label, takže variantu obvykle rychle postavím a prověřím na všech breakpointech. Pokud chcete naplánovat testovací program pro svůj nebo klientův web, ozvěte se mi. K tématu spuštění webu se podívejte na SEO checklist pro Webflow.

Časté otázky

AutorPeter CekanakDesignér a Webflow vývojář · white-label partner pro agentury

Od roku 2018 navrhuji a stavím weby ve Webflow pro agentury a startupy — Client-First, GSAP, CMS a AI automatizace. Weby, které jsem postavil, pomohly klientovi k exitu za 10 mil. $ a jednomu SaaS ztrojnásobily poptávky dema.

Webflow Certified ExpertRelume ExpertClient-First