Mi is az az A/B teszt? Az ilyen tesztek alapvetően mindig az oldalunkon történő módosításokhoz kapcsolódnak. Ahelyett, hogy egy változtatást csak úgy bevezetnénk, előtte érdemes a változtatást valahogyan mérni, hogy milyen eredményeket hoz majd hosszú távon. Ugyanis egy, az oldalon történő változtatás nem feltétlenül eredményez jobb konverziókat. Lehet, csak mi gondoljuk, hogy jobban teljesít majd a webáruházunk, mindenki más pedig fordítva vélekedik a dologról.
Az ilyen tesztek lényege, hogy a látogatók egy bizonyos, véletlenszerűen választott részének az új tartalmat (ez a B verzió), míg az összes többinek a régit mutatjuk meg (ez az A, a kontroll), majd mérjük, hogy a látogatások arányában az egyes verziók mérőszámai hogyan alakulnak. Természetesen mindezt egy adott időszakban, egymás mellett "párhuzamosan".
Ennek köszönhetően egy oldalelem változtatásával pontosan mérhető az adott változtatás hatása. A teszt végén a rossz változtatásokat elvetjük, a jókat pedig alkalmazzuk.
A webáruházak tesztelésére az Optimizely szoftverét integráltuk a ShopRenterbe, mely világviszonylatban talán az egyik legnépszerűbb A/B tesztelésre használatos program.
Az alábbi rövid angol nyelvű videón meg lehet tekinteni, hogy milyen pofonegyszerű a szoftver beállítása.
Íme egy rövid útmutató a beállításhoz:
Miután beregisztráltunk az Optimizely oldalán először is a Dashboard oldalon létre kell hozni egy új kísérletet a Create Experiment gombbal. Majd megadjuk a kísérlet nevét, és az oldalt, amelyen módosítani akarunk.
Itt alapvetően több választásunk is van. Ezek közül az általunk javasolt két változat:
1) Vagy egy konkrét aloldalt szeretnénk tesztelni, melyhez később meg kell adnunk a pontos URL-t
2) Vagy egy oldaltípust szeretnénk tesztelni (például az összes termékoldalt, kategóriaoldalt)
Most ez utóbbit mutatjuk meg, ennek beállítása ugyanis egy kicsit több műveletet igényel.
Tegyük fel, hogy a termékoldalakon használt "Kosárba rakom" gombon szeretnénk változtatni. Ilyenkor kiválasztunk egy tetszőleges termék URL-t és azt adjuk meg.
http://demo.aurorashop.hu/30_multi_colored_tulips_498
Ezt követően a jobb felső részben található Options > Targeting menüpontot kell kiválasztanunk.
Itt első lépésben be kell állítanunk az oldalunk fő URL-jét (tehát csak a domain név szerepeljen) azért, hogy a teszt ne csak az adott termék oldalon fusson, majd be kell állítanunk a Substring match lehetőséget, hogy a bővített, paraméterezett URL-t is felismerje a rendszer.
Alul egy segítő URL is van, ami egy felugró ablakban mutatja, hogy a beállítások megfelelőek-e pl. az aktuális URL-re.
Ezt követően meg kell adni a Javascript kritériumunkat. Ehhez meg kell adjuk a Visitor conditions résznél az Add more conditions -> Satisfy this custom Javascript condition pontban az alábbi sort:
window.isProductPage
( megjegyzés: ha kategória oldalakat szeretnénk tesztelni a következő sort adjuk meg: window.isCategoryPage )
Ha ez megvan, az Apply gombra kattintva visszatérhetünk a teszt főképernyőjére. Itt számos lehetőség van a tesztelésre: oldal elemeket tüntethetünk el, vagy adhatunk hozzá HTML-ben, képeket cserélhetünk, vagy elemek HTML vagy CSS beállításait módosíthatjuk. Ez utóbbira egy példa, ha a Kosárba gombunk színét - ami jelen esetben egy CSS-ben kialakított egyszerű elem - megváltoztatjuk.
A gombra kattintva nem annak normál működése indul be, hanem egy menüt kapunk, amelyben számos lehetőség a rendelkezésünkre áll a gomb HTML kódját, stíluslapját, szövegét és akár a linkjét is módosíthatjuk.
A stílus módosításakor is számos lehetőségünk van, amelyeket nem részletezünk, mivel az oldalon egy rendkívül részletes Súgó áll rendelkezésre.
Ha kész vagyunk egy módosítással elmenthetjük az adott variációt, és a bal felső részben lévő Add Variation gombra kattintva újat hozhatunk létre. Itt meg kell jegyeznünk, hogy egyidejűleg nem érdemes 2-nél több variációt tesztelni (az eredeti változatot is beleértve), ugyanis így mérhetjük majd csak igazán jól a változtatás hatását.
Ha mindennel megvagyunk, a fenti Start Experiment gombbal indíthatjuk a tesztet - ehhez már mindenképp fizetős fiók kell, tesztfiókkal csak egy ideig használható a lehetőség.
Ahhoz, hogy a folyamatot befejezzük a felső menüsoron lévő Implementation gombra kattintva ki kell másolnunk a projektünk egy soros JavaScript kódját, és azt beillesztenünk a ShopRenteres webáruházunk megfelelő menüpontjába, mely itt érhető el:
Beállítások > Integrációk > Egyéb > Optimizely
A fenti művelet bonyolultnak tűnhet, de a rendszer használata végletesen egyszerű, gyorsan tanulható, és a fentieken kívül is számos más lehetőség áll rendelkezésre, akár egyszerre több verziót, akár több oldalelemet akarunk tesztelni.
Csak egy pár példa, hogy miket lehet tesztelni egy webáruházban:
- Általános oldal elemeket: bannerek, logó, az oldal színvilága, szövegek mérete, helye, hírlevél feliratkozás helye, menürendszerek stb.
- Főoldali elemek: bannerváltó, kiemelt kategóriák, legújabb és akciós termékek, hírek megléte és kialakítása stb.
- Kategória oldalnál: szűrő kialakítása, termékdobozok mérete és pozíciója, termékek száma és elrendezése egy oldalon stb.
- Termék oldalaknál: termékkép helye és mérete, kosárba rakom gomb mérete, színe, elhelyezkedése, további ajánlatok stb.
- Kosár oldalán: szállítási díj megjelenítése, pénztár gomb helye, mérete, színe, kuponkód használata stb.
- Szöveges tartalmaknál: tipográfia, szövegek hossza, tagoltsága, képek stb.
Jó tesztelést kívánunk!