Optimizely integráció

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.

Optimizely

Í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

optimizely_1.PNG

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 )

optimizely_1.PNG

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.

optimizely_4.PNG

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!

Van még kérdése? Kérelem beküldése

2 Megjegyzések

  • Avatar
    Várnagy Egon

    Sziasztok!

    "Éles" bevetés előtt szeretném tesztelni az egyik új sablont az Optimizely segítségével. Kérlek segítsetek a beállításban.

    Köszönöm előre is!

    Egon

  • Avatar
    ShopRenter

    Kedves Egon!

    Lennél kedves leírni, hogy hol akadtál el, hogy segíthessünk? 

    Kérlek ide írj egy levelet ezzel kapcsolatban - http://support.shoprenter.hu/anonymous_requests/new

    Szabó Gábor

Kérjük, Belépés után hagyjon megjegyzést.