Co je testovací stránka a jak ji vytvořit?

Představte si, že sedíte v publiku na broadwayském muzikálu: nyní sice vidíte dokonalou inscenaci, ale herci a štáb strávili stovky hodin přípravou, čtením rolí, zkouškami a dalšími nezbytnými úkony. Představení, které vidíte, je výsledkem dlouhé a pečlivé přípravy.

Testovací stránka je v rámci vývoje webu tedy jakousi „generální zkouškou” vašeho skutečného webu. Namísto toho, aby vývojáři publikovali aktualizace přímo na živém webu, používají k testování a provádění úprav testovací stránku (dokud daná stránka není připravena pro živé publikum).

V tomto článku naleznete podrobné informace o výhodách používání testovací stránky pro svůj e-shop, včetně toho, jak vytvořit testovací stránku na platformě Shopify.

Co znamená termín „testovací stránka“?

Testovací stránka je soukromé prostředí pro testování webových stránek, v rámci kterého můžete kontrolovat aktualizace nebo úpravy designu, aniž by to mělo vliv na živý web. Simuluje totiž živou verzi webových stránek. Díky tomu mohou vývojáři a zainteresované strany danou stránku otestovat, jako kdyby ji používali skuteční uživatelé.

Hlavním cílem testovacího prostředí je odhalit chyby a provést nutné úpravy nebo opravy. Obvykle jsou do procesu testování zapojeny zainteresované strany (marketingové nebo výkonné týmy, které poskytují zpětnou vazbu). Jakmile tyto zainteresované strany testovací stránku důkladně prověří a dojde k zohlednění jejich připomínek, aktualizace budou přeneseny do živého webu.

Významná aktualizace, jako je např. nová sekce s obrázky produktů by mohla negativně ovlivnit konverze, pokud by web v důsledku této změny nefungoval správně. Při simulaci uživatelského zážitku, který začíná kliknutím na stránku produktu a končí přidáním položek do košíku, můžete odhalit a opravit chyby dříve, než negativně ovlivní nákupní zkušenost skutečných zákazníků.

Vývojový web vs. testovací stránka vs. živý web

• Vývojový web
• Testovací stránka
• Živý web

Vývoj webových stránek probíhá ve 3 hlavních fázích: vývoj, testování a spuštění živého webu. Nejprve se kód napíše na vývojovém webu, poté se přesune na testovací stránku, kde proběhne kontrola kvality, a nakonec je živý web zpřístupněn všem uživatelům.

Vývojový web

Vývojový web je sandbox, v rámci kterého vývojáři píšou kód a realizují své nápady. Obvykle se jedná o lokální prostředí přístupné pouze vývojovému týmu. Tato fáze zahrnuje přidávání obrázků, textu, videí a kódu pro personalizované funkce, jako jsou interaktivní filtry produktů. Ačkoliv zde probíhá základní testování, vývojové prostředí je obvykle nedokončené.

Testovací stránka

Po dokončení vývoje je kód publikován na nové testovací stránce. Jedná se o generální zkoušku, v rámci které jsou vyřešeny všechny nedostatky (jako kdyby se jednalo o živý web pro veřejnost). Testovací stránky fungují on-line, obvykle na testovací doméně, která používá URL adresu testovacího webu, např. testovacistranka.nazevvasehowebu.cz.

Ujistěte se proto, že vaše testovací stránka není indexovatelná, což znemožní vyhledávačům zobrazovat  ji ve výsledcích vyhledávání. Toho lze rychle dosáhnout (tato stránka je dostupná pouze v angličtině) přidáním několika řádků kódu. Zvažte také, zda testovací stránku neochránit heslem (pokud obsahuje informace, které ještě nechcete svým zákazníkům ukázat, např. připravovanou slevovou akci).

Jakmile je testovací stránka spuštěna, zainteresované strany ji mohou zkontrolovat a poskytnout zpětnou vazbu. Kód se poté vrátí na vývojový web, na kterém vývojáři vyřeší případné připomínky a odešlou změny na testovací stránku. Tento proces se opakuje, dokud všechny zainteresované strany danou stránku neschválí.

Živý web

Živý web je finální, veřejně přístupná verze webu – nazývaná také produkčním prostředím nebo produkčním webem. Tento web je přístupný veřejnosti, přičemž aktualizace jsou viditelné všem uživatelům. Ti mohou nakupovat vaše produkty, zapojovat se do vašeho obsahu a interagovat s vaší značkou. Jakmile je web spuštěn, má k němu přístup každý uživatel internetu, proto je důkladná kontrola kvality v testovací fázi tak důležitá.

Proč používat testovací stránku pro e-shop?

Publikování nepovedené aktualizace může vaše zákazníky rozladit a ve výsledku tedy poškodit prodeje, proto je pro e-shopy obzvláště důležité používat testovací stránky. Testovací stránka vám může pomoci s následujícími úkony:

• Testováním prvků, aniž by to mělo vliv na uživatelský zážitek: Můžete tedy experimentovat s designem a novými funkcemi, aniž byste zhoršili zážitek zákazníků.
• Odhalením chyb ještě před zveřejněním aktualizací: Díky tomu můžete najít chyby, jako jsou problémy s nákupním košíkem, nefunkční tlačítka nebo poškozené obrázky produktů.
• Testováním integrace, aniž by došlo k narušení webu: Díky tomu můžete testovat integrace třetích stran, jako jsou API (rozhraní pro programování aplikací) nebo kalkulačky dopravy, aniž by to mělo negativní vliv na váš živý web.
• Navázáním spolupráce se zainteresovanými stranami: Pozvěte různé týmy, designéry a zainteresované strany a požádejte je o prověření webu a případnou spolupráci na úpravách.
• Simulací uživatelského zážitku: Vyzkoušejte si používání svého webu z pohledu zákazníků. Díky tomu budete moci najít nedostatky v rámci nákupního zážitku. V tomto případě se jedná o komplexní simulaci spíše než o to, že pouze používáte interaktivní designové soubory v nástroji Figma.
• Testováním výkonu webu: Zpomalují vaše aktualizace web? Testovací stránka vám umožní otestovat dopad na technický výkon (který může mít vliv i na organické vyhledávací pozice).

3 způsoby, jak vytvořit testovací stránku na platformě Shopify

1. Duplikujte svůj motiv
2. Vytvořte vývojářský obchod
3. Použijte aplikaci

Standardní weby Shopify testovací stránku neobsahují, proto si ji budete muset vytvořit. Máte na výběr ze 3 způsobů, jak to udělat:

1. Duplikujte svůj motiv

Toto je nejjednodušší způsob, jak vytvořit testovací stránku v rámci standardního plánu Shopify. Jedná se o rychlé nastavení, které vám zabere jen několik kliknutí. V rámci tohoto řešení nemusíte instalovat aplikace třetích stran, protože vaše testovací prostředí bude zabudováno do administrátorského panelu Shopify.

Návod, jak vytvořit testovací stránku na platformě Shopify prostřednictvím duplikování šablony:

1. V administrativním rozhraní panelu Shopify přejděte do sekce E-shop > Motivy.

2. V části Aktuální motiv > Akce vyberte možnost Duplikovat.

3. Nyní disponujete identickou kopií svého živého motivu. Kopii můžete libovolně upravovat, aniž by to mělo nějaký vliv na váš živý web. Kliknutím na možnost Náhled si můžete vygenerovat testovací instanci.

4. Jakmile testování dokončíte, můžete provést změny na svém živém webu.

Tato možnost je nejvhodnější pro změny designu webu, jako jsou úpravy rozvržení nebo nové sekce webových stránek. Neposkytuje však testovací prostředí pro integrace nebo změny funkcí. Nezapomeňte také, že budete muset ručně přidat prvky, které jste již vložili na svůj stávající web.

2. Vytvořte vývojářský obchod

Tato metoda vyžaduje vytvoření nového partnerského účtu Shopify, který vám umožní vytvořit kompletní obchod pro testování. Partnerské účty jsou určeny pro vývojáře, designéry a agentury, kteří vytvářejí a spravují obchody pro klienty. Jsou zdarma a poskytují vám přístup k vývojářskému obchodu, což vám umožní zrcadlit váš hlavní web (včetně designu a funkčnosti webových stránek) v soukromém prostředí.

Návod, jak vytvořit testovací stránky pomocí vývojářského obchodu:

1. Založte si partnerský účet Shopify.

2. Přejděte do části Obchody > Vytvořit obchod.

3. Jako typ obchodu vyberte možnost Vývoj.

4. Pojmenujte jej např. „testovacistranka-vaseweb”, aby jej bylo snadné odlišit od vašeho živého obchodu.

5. Přidejte produkty, nainstalujte šablonu a nakonfigurujte všechna nastavení tak, aby zrcadlila váš živý obchod.

Nyní můžete simulovat kompletní uživatelský zážitek, aniž by to nějak ovlivnilo váš skutečný web. Jedná se o nejlepší možnost pro změnu funkčnosti, včetně vlastního kódu nebo integrací třetích stran. Ačkoliv jsou vývojářské obchody zdarma (pro účely testování), mají určitá omezení (tato stránka je dostupná pouze v angličtině). V rámci těchto obchodů můžete instalovat pouze bezplatné a partnerské aplikace a generovat pouze testovací přepravní štítky.

Pokud chcete testovat další aplikace nebo vytvářet funkční přepravní štítky, můžete si založit nový placený obchod v rámci základního plánu. Stejně jako při duplikování motivu,ale budete muset ručně zkopírovat přidané prvky webu na testovací stránku.

3. Použijte aplikaci

Některé nástroje pro testování, jako je např. Duplify (který nabízí omezený bezplatný plán) vám umožní vytvořit testovací prostředí, které replikuje celý váš web. Díky tomu můžete testovat stávající webové stránky a produkty ještě před jejich spuštěním. Rewind Staging je podobná aplikace (je možné vyzkoušet její bezplatnou zkušební verzi), která zahrnuje zálohy motivů, díky čemuž se budete moci vrátit k předchozí verzi webu (pokud se něco pokazí). Stačí přejít do obchodu Shopify App Store a vyhledat si zde aplikace pro testování.

Návod, jak vytvořit testovací stránku pomocí aplikace Rewind Staging:

1. Nainstalujte si aplikaci Rewind Copy na svůj živý web; tu najdete v obchodě Shopify App Store.

2. Vyberte si svůj živý obchod jako zdrojový obchod.

3. Nainstalujte si aplikaci Rewind Copy do svého vývojářského obchodu.

4. Vyberte si svůj vývojářský obchod jako cílový obchod.

5. Zkopírujte klíč ze zdrojového obchodu do cílového obchodu (tím oba obchody propojíte).

6. Vyberte informace, které chcete zkopírovat na testovací stránku, tak, aby zrcadlila váš živý web.

7. Zkontrolujte průběžné změny kopírování, abyste udrželi synchronizaci mezi oběma obchody.

8. Klikněte na tlačítko Zahájit úkol, abyste spustili kopírování.

Ruční duplikování vašeho webu může někdy vést k chybám (některé části mohou chybět). Použití testovací aplikace tedy může zajistit vytvoření přesné kopie (zejména pokud jste si zvolili složitý motiv).