Microsoft Clarity és A/B teszt a webshopban: hőtérkép és GA4

A Microsoft Clarity hőtérképekkel és munkamenet-felvételekkel megmutatja, hol kattintanak és meddig görgetnek a webshop látogatói, az A/B teszt pedig bizonyítja, hogy egy változtatás tényleg több rendelést hoz-e. Ott kezdje, ahol a vásárlási tölcsérben a legtöbb vásárlót veszíti el. Ha a konverziót 2%-ról 2,4%-ra akarja emelni, változatonként nagyjából 21 100 látogatás kell.

A cikket a CloudCart, a szófiai e-kereskedelmi platform csapata írta. A Clarity és a Google eszközeinek leírása a Microsoft és a Google dokumentációjából származik, a CloudCartra vonatkozó tények a platform dokumentációjából.

Mi a Microsoft Clarity, és mit mutat a hőtérkép?

A Microsoft Clarity a látogatói viselkedés elemzésére szolgál: felveszi a munkameneteket, hőtérképet készít, és magától megjelöli azokat a pillanatokat, amikor a vásárló elakadt. A Clarity előfizetés nélkül használható, nincs forgalmi korlát, és nem csak a látogatások egy részét rögzíti (Microsoft Clarity GYIK).

A hőtérkép (heatmap) az oldal képe, amelyen a sok kattintást vagy hosszú figyelmet kapó részek meleg színnel látszanak. Webshopban kettő a leghasznosabb: a kattintási térkép és a görgetési térkép, amely megmutatja, a látogatók mekkora része jut el az oldal egy adott magasságáig. A munkamenet-felvétel (session recording) egyetlen látogatás visszajátszása: egy vásárló egérmozgása, kattintásai és görgetése a belépéstől a kilépésig.

A Clarity három jelet automatikusan megjelöl, és ezek a webshopban szinte mindig hibára utalnak:

• Dühös kattintás (rage click). A vásárló gyorsan, sokszor kattint ugyanoda. Általában a gomb lassan vagy egyáltalán nem reagál.
• Halott kattintás (dead click). A vásárló olyasmire kattint, ami kattinthatónak látszik, de nem történik semmi. Tipikus eset a termékfotó, amely nem nagyítható, vagy a „szállítás” szó, amely nem link.
• Túlzott görgetés. A látogató sokkal gyorsabban pörgeti az oldalt, mint ahogy olvasni szokás, mert keres valamit, és nem találja.

A webshop statisztikája megmondja, melyik lépésnél veszíti el a vásárlót, a Clarity azt mutatja meg, miért. Ezért a kettőt együtt érdemes használni: a tölcsér számai és az átlagos értékek a konverziós rátáról szóló cikkben vannak, ez a cikk pedig arról szól, hogyan találja meg az okot, és hogyan ellenőrizze a javítást.

A Clarity korlátai, amelyeket érdemes ismerni

Mi	Korlát
Munkamenet-felvételek	projektenként napi 100 000 munkamenet
Felvételek megőrzése	30 nap; a kedvencnek jelöltek és egy véletlen minta 9 hónapig
Hőtérkép	térképenként legfeljebb 100 000 oldalmegtekintés; 9 hónapig elérhető
Weboldalak és csapattagok száma	nincs korlát
Beviteli mezők (e-mail, telefon, cím)	mindig maszkolva, nem kerülnek fel a Clarityba

Forrás: Microsoft Clarity GYIK. Mivel a felvételek 30 napig maradnak meg, jelölje kedvencnek azokat a munkameneteket, amelyekre a teszt után az összehasonlításhoz szüksége lesz.

Hogyan telepítse a Microsoft Clarityt a CloudCartba a Google Tag Manageren keresztül?

A Clarityt a CloudCartban a Google Tag Manager alkalmazáson keresztül a legbiztonságosabb feltenni: a kódot egy helyen kezeli, és a vásárló hozzájárulása is eljut hozzá. Az alkalmazás mind a négy csomagban benne van, a Baby Packtől a CC Masterig. Zárójelben az áll, hol végzi az adott lépést:

1. Projekt a Clarityben (clarity.microsoft.com). Jelentkezzen be, és adjon hozzá új projektet a webshop domainjével. A projekt azonosítója a böngésző címsorában látszik: clarity.microsoft.com/projects/view/ID/.
2. Tároló a GTM-ben (tagmanager.google.com). Ha még nincs, hozzon létre egy „Web” típusú tárolót a domainhez, és másolja ki a GTM-XXXXXXX formátumú azonosítót.
3. Az alkalmazás a CloudCartban (admin). Alkalmazások → Google Tag Manager, illessze be a GTM-azonosítót, és mentse. A CloudCart a tároló kódját a kirakat minden oldalára beteszi. A teljes beállítás a GA4-gyel és az adatréteggel együtt a Google Tag Manager és GA4 webshopnak című cikkben található.
4. A Clarity címke (GTM). Két út van. A gyors: a Clarityben nyissa meg a Settings → Setup → Google Tag Manager → Finish setup menüt, lépjen be a Google-fiókjával, válassza ki a fiókot és a tárolót, majd kattintson a Create and publish gombra. A kézi: a GTM-ben New Tag, a Community Template Galleryből válassza a Microsoft Clarity - Official sablont, adja meg a projekt azonosítóját, triggernek pedig az All pages lehetőséget.
5. Közzététel (GTM). Submit → Publish, a verziónak adjon beszédes nevet, például „Clarity”. Egy címke egy Clarity-projekthez tartozik.
6. Ellenőrzés (kirakat). Nyissa meg a webshopot egy új ablakban, és nézzen meg két-három oldalt. A felvételek szinte azonnal megjelennek a Clarityben, a hőtérképek pedig a látogatásokkal együtt telnek.

A lépések a Microsoft Learn: Clarity telepítése Google Tag Managerrel leírást követik. A kód a Dizájn → Custom CSS/JS részbe is beilleszthető, ott azonban nincs ellenőrzés, és egy hibás szkript azonnal megállítja a kirakatot, ezért a GTM a jobb választás.

Kell-e hozzájárulás a Microsoft Clarityhez: GDPR, sütik és maszkolás

Igen, a magyar és a többi EU-s látogatónál a Clarity hozzájárulási jelzést vár. 2025. október 31-től a Clarity ezt megköveteli az Európai Gazdasági Térségből, az Egyesült Királyságból és Svájcból érkező látogatásoknál: ezeknél a hozzájárulási mód alapból be van kapcsolva, és a Clarity érvényes jelzést vár, mielőtt sütit helyez el (Microsoft Learn: Consent Mode a Clarityben).

A gyakorlatban: hozzájárulás nélkül a Clarity nem teszi le a _clck és _clsk sütit, márpedig a _clsk köti össze egy látogatás oldalait egyetlen felvétellé. Ha a vásárló megnyit egy terméket, majd a kosarat, a Clarity két külön munkamenetet lát. A megtekintések és az alapvető kattintások számítanak, de a rendelésig vezető út teljes felvétele hiányzik.

A jogalap ugyanaz, mint minden statisztikai sütinél: információt a látogató eszközén tárolni hozzájárulással szabad, vagy ha az a látogató által kért szolgáltatáshoz feltétlenül szükséges. Hogy mi kell a sütisávba és a webshop adatkezelési tájékoztatójába, azt a sütikről és a GDPR-ról szóló cikk írja le.

Hogyan adja át a hozzájárulást a Claritynek a CloudCartban?

A Clarity külön beállítás nélkül olvassa a Google Consent Mode jelzéseit (ad_storage és analytics_storage) (Microsoft Learn: Google Consent Mode a Clarityben). A CloudCart GDPR alkalmazása pontosan ezeket a jelzéseket küldi, így a hozzájárulás kód nélkül eljut a Clarityhez:

1. A GDPR alkalmazás (admin). Alkalmazások → GDPR, aktiválja, majd a Cookies fülön válasszon sütisávot vagy sütifalat.
2. A Google Consent Mode csoport (admin). Ugyanezen a fülön kapcsolja be a Google Consent Mode csoportot. Alapból ki van kapcsolva, bekapcsoláskor meg kell erősítenie a választást. Ezután a kirakat a Google Tag Manager betöltése előtt küldi el a hozzájárulási jelzéseket.
3. A Clarity sütijei a tájékoztatóban (admin). A CloudCart nem keresi meg magától a sütiket. A Performance Cookies (statisztikai sütik) csoportba vegyen fel egy „Microsoft Clarity” nevű sütit rövid leírással („munkamenet-felvételek és hőtérképek”) és a _clck, _clsk technikai névvel. Így a vásárló látja, mihez járul hozzá.
4. Az alapértelmezett sütik (Clarity). A Clarity-projektben nyissa meg a Settings → Setup részt, és kapcsolja ki az alapértelmezett sütielhelyezést. Így a Clarity minden látogatótól hozzájárulást vár, nem csak az EU-ból érkezőktől.
5. Ellenőrzés (kirakat). Törölje a sütiket, nyissa meg a webshopot, és utasítsa el őket. A böngésző konzoljában futtassa: clarity('metadata', (d, upgrade, consent) => { console.log(consent); }, false, true, true);. Az eredmény analytics_storage: "DENIED" legyen, és ne legyen _clck és _clsk süti. Az „Elfogadom” után az értékek GRANTED-re váltanak.

Maszkolás: mit nem rögzít a Clarity

A Clarity az érzékeny tartalmat már a böngészőben elfedi, a maszkolt adat nem jut el a szervereire. Az alapértelmezett mód a Balanced: a szövegben lévő számok és e-mail-címek maszkolva vannak. A Strict a teljes szöveget elfedi, a Relaxed a szöveget nem maszkolja. A beviteli mezők és a legördülő listák minden módban maszkolva vannak (Microsoft Learn: Masking content).

Webshopnál a Balanced jó kiindulás. Ha a köszönőoldal vagy a vásárlói fiók sima szövegként mutatja a nevet és a címet, vegye fel ezeket a Settings → Masking → Mask by element részben a blokk CSS-szelektorával. A változás a mentés után egy órán belül az új felvételekre érvényes, a régieket nem maszkolja utólag.

Hogyan olvassa a hőtérképet és a felvételeket, hogy megtalálja a hibát?

A hőtérkép megmutatja, hol van a gond egy oldalon, a felvétel pedig azt, miért. Ebben a sorrendben dolgozzon:

1. Keresse meg a legnagyobb veszteségű lépést. A CloudCartban nyissa meg a Statisztika részt, és a konverziós tölcsérben hasonlítsa össze az asztali és a mobilos adatokat: Kosár → Megkezdett rendelés → Rendelés. Amelyik lépés a legtöbbet veszíti, azt nézze meg először. A jelentések leírása a CloudCart Statisztika oldalon van.
2. Nyissa meg pontosan annak az oldalnak a hőtérképét. A termékoldalnál a mobilos görgetési térképet nézze: a látogatók mekkora része jut el a „Kosárba” gombig. A kosárnál a szállítási díjra és a kuponkód mezőre eső kattintásokat.
3. Szűrje a felvételeket. Válassza azokat a munkameneteket, amelyekben volt kosár, de nem lett rendelés, telefonról jöttek, és volt bennük dühös vagy halott kattintás. Nézzen meg egymás után 20-30 felvételt.
4. Írja fel, ami ismétlődik. Tíz-egynéhány felvétel után kirajzolódik a gond: egy mező, amely hibát ad; egy gomb a hajtás alatt; egy szállítási díj, amely csak az utolsó lépésben derül ki.
5. Írjon hipotézist. Ebben a formában: „Ha [változtatás], akkor a [mutató] nő, mert [megfigyelés a felvételekből].”

Ha a felvételek lassú betöltést mutatnak (üres képernyő, későn megjelenő képek), először a sebességet javítsa: a lépések a PageSpeed és Core Web Vitals cikkben vannak.

Mit teszteljen először a webshopban?

Először azt a változtatást tesztelje, amely a legnagyobb veszteségű lépésben van, a legtöbb látogatót érinti, és a leggyorsabban elvégezhető. A táblázat összeköti a Clarity tipikus jelét egy hipotézissel és azzal a hellyel a CloudCartban, ahol a változtatást elvégzi:

Amit a Clarityben lát	Hipotézis	Mit változtat a CloudCartban	Mit mér
Dühös kattintások a szállítási díjra a kosárban	A vásárló nem tudja, mennyit fizet, és mennyi hiányzik az ingyenes szállításhoz	Ingyenes szállítás értékhatára és a BumpCart, amely mutatja, mennyi hiányzik a határig	Kosár → megkezdett rendelés; átlagos kosárérték
Mobilon a látogatók kevesebb mint 50%-a jut el a „Kosárba” gombig	A lényeg a hajtás alatt van	A termékoldal elrendezése a sablonban; rövidebb leírás felül	Kosárba helyezés 100 termékoldal-látogatásra
Halott kattintások a termékfotón	A vásárló a részleteket akarja látni	Több és nagyobb fotó a termékkatalógusban	Kosárba helyezések
Kilépés a fizetési lépésnél	Hiányzik a kedvelt fizetési mód	Bankkártya, Apple Pay és Google Pay a CloudCart Pay-jel, Express gomb a termékoldalon; az utánvét mellettük marad	Megkezdett rendelés → rendelés
Túlzott görgetés a kategóriában, keresés kattintás nélkül	A vásárló nem találja a terméket	A kategória szűrői; az Aura Search jelentése a találat nélküli keresésekről	Keresések kattintással; rendelések keresés után
Elhagyott kosár az e-mail-cím megadása után	A vásárló most halasztja el, nem végleg	Az elhagyott kosár e-mail időzítése és a benne lévő kuponkód	Visszanyert kosarak

A későn látható szállítási díj az egyik első dolog, amit a kosár felvételein érdemes keresni. A GLS házhoz szállítás és a GLS ParcelShop díja a CloudCartban már a szállítási mód kiválasztásakor látszik. Hogy az ingyenes szállítás értékhatárát hogyan válassza meg az átlagos kosárérték és a futártarifák alapján, azt az ingyenes szállításról szóló cikk mutatja meg. A kosár és a rendelési lépések a Kosár és pénztár oldalon, a befejezetlen rendelésekről szóló levelek az elhagyott kosár oldalon vannak.

A magyar webshopoknál a fizetési lépés külön figyelmet kap, mert itt a vásárlók nagy része utánvéttel fizet. Ha a felvételeken azt látja, hogy a vásárló a fizetési módoknál sokáig mozgatja az egeret, majd kilép, ne vegyen el lehetőséget: tegye a bankkártyát és az utánvétet egymás mellé, és mérje, melyik változat hoz több befejezett rendelést.

Hány látogatás kell egy A/B teszthez?

Az A/B teszt (A/B tesztelés) egy oldal két változatának összevetése, amelyeket egyszerre mutat két véletlenszerűen kiválasztott látogatói csoportnak. A szükséges látogatásszám a jelenlegi konverziótól és attól függ, mekkora hatást akar kimutatni: minél kisebb a változás, annál több forgalom kell.

Jelenlegi konverzió	+20% hatás	+30% hatás	+50% hatás
1% (rendelés a látogatásokból)	42 700	19 800	7 750
2%	21 100	9 800	3 830
3%	13 900	6 460	2 520
10% (kosárba helyezés)	3 840	1 770	690
30% (kosár → rendelés)	960	440	160

A számok a két változat mindegyikére vonatkozó látogatások, két arány összehasonlításának szabványos képletével számolva, 95%-os megbízhatósági szint és 80%-os statisztikai erő mellett. A +20% hatás 2%-os konverziónál 2,4%-ra való emelkedést jelent.

Hogyan használja a táblázatot?

• Számolja ki a teszt hosszát. Egy változat látogatásszáma × 2, osztva az oldal napi látogatásszámával. Egy napi 1 000 látogatású, 2%-os konverziójú webshopnak körülbelül 42 nap kell ahhoz, hogy +20%-ot kimutasson.
• A közelebbi lépést mérje. Ha a termékoldalt teszteli, a kosárba helyezést mérje (kb. 10%), ne az összes látogatásból lett rendelést. A szükséges forgalom nagyjából az ötödére csökken.
• Bátor változtatásokat teszteljen. Egy kis webshop nem tud +5%-ot bizonyítani. +30% és +50% közötti hatást viszont igen, és ekkorát a szállítás, a fizetés és a mobilos első képernyő változtatása hoz, a gomb színe ritkán.
• Legalább 2 teljes hét. Így a teszt a hét minden napján átmegy.

Ha a forgalom nem elég egy valódi A/B teszthez, hasonlítson időben egymás után: 4 hét a változtatás előtt és 4 hét utána, a Statisztika részben, külön telefonra és számítógépre. Válassza ki a két időszakot a naptárban, vagy használja az „Összehasonlítás: előző időszak” lehetőséget, ha a csomagja tartalmazza. A módszer részletesen a konverziós rátáról szóló cikkben szerepel. Ha a forgalom hirdetésből jön, jelölje UTM paraméterekkel, hogy előtte és utána ugyanazokat a forrásokat hasonlítsa össze: UTM paraméterek és attribúció webshopnak.

Hogyan készítsen A/B tesztet a GA4-gyel a Google Optimize megszűnése után?

A GA4 méri az A/B teszt eredményét, de nem osztja csoportokra a látogatókat. A Google Optimize, a Google A/B tesztelő eszköze 2023. szeptember 30-án megszűnt, és minden futó kísérlet akkor véget ért. A Google a Google Analyticshez kapcsolható külső eszközöket ajánlja, például az AB Tastyt, az Optimizelyt és a VWO-t (Google Optimize súgó: a szolgáltatás megszűnése).

Feladat	Hol történik
A látogatók elosztása az A és B változat között, a változat megjelenítése	Az A/B tesztelő eszköz; a szkriptjét a GTM-en keresztül teszi a CloudCartba
Rendelések, kosárba helyezések, megkezdett rendelések	GA4, amely a CloudCart Google Analytics alkalmazásától kapja az e-kereskedelmi eseményeket
Miért nyer vagy veszít a változat	Clarity: a két változat felvételei és hőtérképei
Annak ellenőrzése, hogy a webshop összesített számai is nőttek	Statisztika a CloudCartban: konverzió, tölcsér, átlagos kosárérték

A Clarityt a GA4-gyel is kösse össze a Clarity-projekt beállításaiban: a Google Analytics integrációt a Clarity GYIK írja le, és feltétele, hogy a Clarity már telepítve legyen. Ha a felvételeket változatonként akarja nézni, a GTM-ben a Clarity sablonhoz adjon egyéni címkét (Custom tag Key és Value mező), például „variant” kulccsal, amelynek értékét („A” vagy „B”) a tesztelő eszköz adja egy GTM-változón keresztül, majd ezzel szűrje a felvételeket.

A tesztelő eszköz szkriptje ugyanabba a hozzájárulási csoportba kerüljön, mint a Clarity és a GA4. Különben a statisztikai sütiket elutasító vásárló is bekerül egy változatba, és torzítja az összehasonlítást.

Gyakori hibák az A/B teszteknél és a hőtérképeknél

• Leállítás az első jó hét után. A korai eredmények ugrálnak. Csak akkor döntsön, ha elérte a táblázat szerinti forgalmat és legalább 2 teljes hetet.
• Több változtatás egy változatban. Ha a három változtatást tartalmazó változat nyer, nem tudja, melyik segített.
• Teszt akció idején. A Black Friday, az ünnepek és egy új hirdetési kampány jobban megváltoztatja a viselkedést, mint bármelyik javítás. A pénztár változtatásait legalább 2 héttel egy nagy akció előtt végezze el, és az akció hetében ne indítson új tesztet.
• Hőtérkép csak számítógépen. Telefonon a hajtás máshol van, és a számítógépen látható gomb a hajtás alá kerülhet. Nézze meg a telefonos látogatások arányát a Statisztika eszköz szerinti munkamenet-jelentésében, és a mobilos térképeket külön elemezze.
• Clarity hozzájárulás nélkül. A Google Consent Mode csoport nélkül az EU-s munkamenetek külön oldalakra esnek szét, és nem látja a kosárig vezető utat.
• Döntés egyetlen felvétel alapján. Egy dühös vásárló egyedi eset. Az a hiba, amit 20 felvételből legalább 5-ben lát.

Gyakran ismételt kérdések

Kérdése van a Clarityvel, a Google Tag Managerrel vagy a webshopja hozzájárulási beállításaival kapcsolatban? Írjon nekünk: support@cloudcart.com.