Mit mér pontosan a GTM elemláthatóság triggere?
Az elemláthatóság (Element Visibility) trigger akkor tüzel, amikor egy általad kijelölt oldalelem a megadott arányban és a megadott ideig megjelenik a látogató képernyőjén. Így azt méred, hogy a CTA gomb, az árblokk vagy az ajánlatkérő űrlap a szeme elé került-e, akármennyit görgetett is az oldalon.
Hivatalosan igazolt. A Google Tag Manager a triggertípusok között, a Felhasználói elköteleződés csoportban sorolja fel az elemláthatóságot. Tüzeléskor gtm.elementVisibility esemény kerül az adatrétegbe, és bekapcsolhatók hozzá beépített változók, köztük a Percent Visible (a látható rész aránya) és az On-Screen Duration (a képernyőn töltött idő ezredmásodpercben). A technika a böngészők Intersection Observer felületére épül, amelyet a W3C specifikál. Ez a felület azt számolja, hogy az elem területéből mekkora rész esik a látható ablakba.
Miért mond többet a CTA megjelenése a görgetési mélységnél?
A görgetési mélység az oldal teljes hosszához mér, a CTA helye viszont oldalanként, sőt eszközönként más. Ugyanaz a 75 százalék az egyik oldalon már a gomb után van, a másikon még előtte. Az elemláthatóság ezzel szemben közvetlenül arra a kérdésre felel, hogy a gomb megjelent-e.
Hivatalosan igazolt. A GA4 bővített mérése alapból egyetlen görgetési eseményt rögzít, amikor a látogató eléri az oldal alját nagyjából 90 százalékos mélységnél. Köztes küszöbökhöz külön GTM-beállítás kell.
Saját tapasztalat. Hosszú landing oldalakon a GYIK, a vélemények és a lábléc miatt a 90 százalékos jelzés viszonylag ritkán érkezik meg, pedig a fő CTA már az első harmadban látszott. Mobilon a tördelés miatt az árblokk sokkal lejjebb csúszik százalékban, mint asztali gépen, így a görgetési adat eszközönként mást jelent. Az elemláthatóságnál ez a torzítás kiesik, mert az elemhez kötöd a mérést.
Szakmai feltételezés. Ha az oldal szerkezete gyakran változik (új szekció kerül a CTA fölé), a görgetési küszöbök értelmezése minden módosítás után elcsúszik, az elemhez kötött mérés viszont jó eséllyel stabil marad, amíg a szelektor nem változik.
Hogyan állítsd be lépésről lépésre?
A beállítás egy stabil azonosítóval kezdődik, utána jön a trigger, végül a GA4 eseménycímke. Az alábbi sorrendben haladj.
- Jelöld meg az elemet. A böngésző fejlesztői eszközében nézd meg, van-e a gombnak egyedi
idértéke. Ha nincs, vagy az oldalépítő minden mentéskor újat generál, kérj a fejlesztőtől saját adatattribútumot, például<a href='/ajanlatkeres' data-meres='fo-cta'>Ajánlatot kérek</a>. Ehhez a szelektor[data-meres='fo-cta']lesz. - Hozd létre a triggert. A GTM-ben válaszd a Triggerek, Új, majd az Elemláthatóság típust.
- Add meg a kiválasztási módot. Az ID módban egy azonosítót írsz be, a CSS-szelektor módban bármilyen érvényes szelektort, például
#arblokkvagy.cta-gomb. - Válaszd ki a tüzelés gyakoriságát. Három lehetőség van, oldalanként egyszer, elemenként egyszer, illetve minden alkalommal, amikor az elem megjelenik.
- Állítsd be a minimális látható arányt. Az alapérték 50 százalék.
- Adj meg minimális időtartamot. Ezredmásodpercben adod meg, mennyi ideig kell az elemnek folyamatosan látszania.
- Döntsd el a DOM-változások figyelését. Erre a később betöltődő elemeknél van szükség, a részleteket lent találod.
- Szűkítsd az oldalakra. A „Néhány láthatósági esemény” opcióval add meg például, hogy a Page Path tartalmazza az
/ajanlatrészt. - Kösd GA4 eseménycímkéhez. Az esemény neve legyen beszédes, például
cta_megjelent, paraméterként küldd acta_helyértékét (példáularblokk_alatt). - Teszteld előnézetben. A Tag Assistantben görgess el a CTA-ig, és nézd meg, hogy a
gtm.elementVisibilityesemény a várt pillanatban jelenik-e meg.
Mikor jobb az ID, és mikor a CSS-szelektor?
Hivatalosan igazolt. Az ID alapú kiválasztás csak az első egyező elemet figyeli az oldalon. CSS-szelektorral több elemet is mérhetsz egyszerre. Ha egy oldalon három azonos ajánlatkérő gomb van (fent, középen, lent), az ID mód csak az elsőt látja, a [data-meres='fo-cta'] szelektor mindhármat. Ha külön szeretnéd látni, melyik pozíció jelent meg, adj mindegyiknek saját attribútumértéket, és készíts hozzájuk külön triggert, vagy olvasd ki az elem attribútumát egy egyéni JavaScript-változóval.
Milyen arányt és időt érdemes megadni?
Saját tapasztalat. Egy gombnál az 50 százalék és nagyjából 1000 ezredmásodperc józan kiindulás, mert kizárja a gyors átgörgetést, de nem követel túl sokat. Egy nagyobb árblokknál vagy összehasonlító táblánál 1500-2000 ezredmásodperc közelebb visz ahhoz, hogy a látogató ránézett a tartalomra.
Szakmai feltételezés, amely az Intersection Observer működéséből következik. Az arány az elem saját területéhez viszonyít. Ha az árblokk mobilon magasabb a képernyőnél, egyszerre sosem látszhat 100 százaléka, így a 100 százalékos küszöb soha nem teljesül, és a trigger néma marad. Ilyen elemnél 20-30 százalék a reális beállítás, vagy jelölj ki benne egy kisebb belső elemet, például az árat tartalmazó sort.
Hogyan számold ki a látott, de nem kattintott CTA arányát?
A látott, de nem kattintott arány azoknak a munkameneteknek a része, amelyekben a CTA megjelent, de kattintás nem követte. A képlet így néz ki.
látott, de nem kattintott arány = (CTA-t látó munkamenetek - CTA-ra kattintó munkamenetek) / CTA-t látó munkamenetek
Ehhez két esemény kell ugyanarra az elemre.
cta_megjelentaz elemláthatóság triggerről, oldalanként egyszeri tüzeléssel.cta_kattintasegy kattintás triggerről (Csak linkek vagy Minden elem), azzal a feltétellel, hogy a Click Element egyezik a[data-meres='fo-cta'], [data-meres='fo-cta'] *szelektorral. A második rész a gombon belüli ikonra vagy szövegre eső kattintást is elkapja.
Képzeletbeli számokkal szemléltetve, ha egy hónapban 1200 munkamenetben jelent meg a CTA, és ebből 96-ban kattintottak rá, akkor a látott, de nem kattintott arány (1200 - 96) / 1200, vagyis 92 százalék. A GA4 Felfedezések részében egy tölcsér-felfedezéssel (első lépés cta_megjelent, második cta_kattintas) ezt munkamenet-szinten, eszközkategória szerint is bontani tudod.
Hivatalosan igazolt. A saját eseményparaméterek, például a cta_hely, csak akkor jelennek meg a GA4 szabványos jelentéseiben és a felfedezésekben dimenzióként, ha egyéni dimenzióként regisztrálod őket, és csak a regisztráció utáni adatokra érvényesek.
Saját tapasztalat az értelmezésről. A két mutató együtt két külön problémát választ szét. Ha kevés munkamenetben jelenik meg a CTA, az elhelyezéssel vagy az oldal elejével van baj, mert a látogatók nem jutnak el odáig. Ha sokan látják, de kevesen kattintanak, az ajánlat, a gomb szövege vagy a közvetlenül fölötte álló tartalom szorul átgondolásra. A két esetben más a teendő, ezért érdemes külön kezelni őket. Egy javuló arány sem garantál több megrendelést, a mérés csak azt mutatja meg, hol érdemes keresgélni.
Milyen gyakori hibák torzítják a mérést?
A leggyakoribb hibaforrás a később betöltődő tartalom, a csúszkák rejtett elemei, a többszöri tüzelés és a túl tág DOM-figyelés. Mindegyikre van egyszerű ellenőrzés.
Lusta betöltés és később megjelenő elemek
Ha a CTA vagy az árblokk JavaScripttel kerül az oldalra (lusta betöltés, felugró ablak, árkalkulátor, külső foglalási modul), akkor a trigger indulásakor még nincs a DOM-ban, ezért nem is figyeli. Hivatalosan igazolt. Erre való a DOM-változások figyelése opció, amely a később beszúrt egyező elemeket is figyelés alá veszi. Ha egy elem a GTM saját betöltése előtt már az oldalon volt, ez az opció nem kell hozzá.
Csúszka, fülek, lenyíló blokkok
Saját tapasztalat. A csúszkák (carousel) nem aktív diái gyakran egy overflow: hidden tárolón kívül állnak, ezért helyesen nem számítanak láthatónak. Gond akkor van, ha a csúszka áttetszőséggel vált (opacity: 0), mert geometriailag az elem a képernyőn van, így a mérés láthatónak veheti, holott a látogató semmit sem lát belőle. Ugyanez igaz a fülekbe vagy harmonikába rejtett tartalomra, ha a rejtés áttetszőséggel vagy nulla magassággal történik. Ilyenkor a szelektorba vedd bele az aktív állapotot jelző osztályt, például .slide.is-active [data-meres='fo-cta'], és a DOM-változások figyelése legyen bekapcsolva, hogy az osztály cseréjét is észlelje.
Ismétlődő tüzelés
A „minden alkalommal” beállítás minden visszagörgetésnél új eseményt küld. Ez felfújja az eseményszámot, és a látott, de nem kattintott arányt is elrontja, ha eseményszámmal számolsz. A legtöbb CTA-mérésnél az oldalanként egyszeri tüzelés a jó választás. A „minden alkalommal” akkor hasznos, ha kifejezetten a visszatérő figyelmet akarod vizsgálni, és ilyenkor is munkamenet- vagy felhasználószintű mutatóval érdemes dolgozni.
A DOM-változások figyelésének teljesítményhatása
Hivatalosan igazolt. A Google Tag Manager súgója jelzi, hogy a DOM-változások figyelése teljesítményproblémát okozhat. Szakmai feltételezés. A hatás jó eséllyel annál nagyobb, minél tágabb a szelektor és minél többet változik a DOM, például egy végtelen görgetésű terméklistán vagy egy élő chat-ablaknál. A kockázatot úgy csökkentheted, hogy csak ott kapcsolod be, ahol tényleg kell, egyedi adatattribútumot használsz általános osztálynév helyett, és a triggert oldalútvonal-feltétellel szűkíted a releváns oldalakra. Élesítés után a böngésző teljesítmény-panelén és a Core Web Vitals adatokon érdemes rápillantani, változott-e az interakciós válaszidő.
Ragadós CTA és fejlécbe tett gomb
Saját tapasztalat. A képernyő aljára vagy a fejlécbe rögzített gomb a betöltés pillanatától látszik, így a trigger szinte minden oldalmegtekintésnél azonnal tüzel. Ennek a megjelenési aránya semmit nem mond arról, eljutott-e a látogató a tartalomig. Ilyen elemeket zárj ki a szelektorból, vagy mérd őket külön eseménynévvel.
Hozzájárulás-kezelés
Ha a GA4-címke a hozzájárulási beállítások miatt nem küldhet adatot, a megjelenési és a kattintási esemény egyformán kiesik. Az arány ettől még értelmezhető, de az abszolút számok csak a mérhető látogatókra érvényesek, ezt jelentéskészítéskor írd mellé.
Mit nézz át élesítés előtt?
A rövid ellenőrzőlista a gyakori hibák nagy részét még az élesítés előtt kiszűri.
- A szelektor egyedi és stabil, a fejlesztői eszköz konzoljában a
document.querySelectorAllpontosan annyi elemet ad vissza, ahányat mérni akarsz. - Ahol több egyező elem van, CSS-szelektort használsz, nem ID-t.
- A látható arány elérhető az elem méretéhez képest mobilon is.
- A minimális időtartam kiszűri a gyors átgörgetést, de nem túl szigorú.
- A tüzelés oldalanként egyszeri, hacsak nem tudatosan döntöttél másképp.
- A DOM-változások figyelése csak ott van bekapcsolva, ahol az elem később kerül az oldalra.
- A ragadós és a fejlécben álló gombok külön vannak kezelve.
- A kattintás trigger ugyanarra az elemre szűr, a gyermekelemekkel együtt.
- A
cta_helyparaméter egyéni dimenzióként regisztrálva van a GA4-ben. - Az előnézeti módban mobil és asztali nézetben is végiggörgettél, és az esemény a várt pillanatban jelent meg.
Mit nem mond meg ez a mérés?
Az elemláthatóság azt igazolja, hogy az elem a képernyőn volt, azt nem, hogy a látogató el is olvasta. A minimális időtartam ezt a bizonytalanságot csökkenti, de nem szünteti meg. Szakmai feltételezés. Ha valaki a böngészőfület a háttérben nyitva hagyja, vagy közben a telefonjával foglalkozik, a mérés látott megjelenést rögzíthet. Ezért a számot irányjelzőnek érdemes kezelni, és más jelekkel (kattintás, űrlapkitöltés, munkamenet-hossz) együtt értelmezni. A mérés önmagában nem javít a konverzión, viszont megmutatja, hogy a változtatást az elhelyezésen vagy az ajánlaton érdemes-e kezdeni, és egy későbbi A/B teszthez is tiszta kiinduló adatot ad.
Források és további olvasnivalók
- Google Tag Manager súgó, Elemláthatósági trigger (Element visibility trigger)
- Google Tag Manager súgó, Beépített változók webes tárolókhoz
- Google Analytics súgó, Bővített mérés eseményei (Enhanced measurement)
- Google Analytics súgó, Egyéni dimenziók és metrikák
- Google Analytics súgó, Tölcsér-felfedezés
- W3C, Intersection Observer specifikáció
- MDN Web Docs, Intersection Observer API
- web.dev, Interaction to Next Paint (INP)
- Az elemláthatóság trigger egy konkrét elem megjelenését méri, ezért a görgetési százaléknál pontosabban felel arra, hogy a látogató eljutott-e a CTA-ig.
- Az ID alapú kiválasztás csak az első egyező elemet figyeli, ha több CTA-t mérnél, CSS-szelektort használj.
- A látott, de nem kattintott arányt a megjelenés és a kattintás eseményből számolod munkamenet-szinten, és ez az elhelyezés problémáját elválasztja az ajánlat problémájától.
- A lusta betöltésű elemekhez kell a DOM-változások figyelése, de ez lassíthatja az oldalt, ezért csak szűk szelektorral és célzott oldalakon kapcsold be.
- Ha egy elem magasabb a képernyőnél, a 100 százalékos láthatósági küszöb sosem teljesül, ilyenkor alacsonyabb arány kell.
Gyakori kérdések
Mi a különbség az elemláthatóság trigger és a görgetési mélység között?
A görgetési mélység az oldal hosszához viszonyított százalékot méri, az elemláthatóság egy konkrét elem megjelenését. Mivel a CTA helye oldalanként és eszközönként más, az elemláthatóság pontosabban mutatja meg, hogy a látogató eljutott-e a gombig.
Miért nem tüzel a trigger, pedig a gomb látszik?
A leggyakoribb ok, hogy az elem a GTM indulása után került az oldalra, és nincs bekapcsolva a DOM-változások figyelése. Másik gyakori ok, hogy a szelektor nem egyezik, vagy az elem magasabb a képernyőnél, és a látható arány küszöbe túl magas.
ID-t vagy CSS-szelektort válasszak?
Az ID mód csak az első egyező elemet figyeli, ezért ha egy oldalon több azonos CTA van, CSS-szelektort használj. A legstabilabb egy saját adatattribútum, például data-meres='fo-cta'.
Hogyan kapom meg a látott, de nem kattintott CTA arányát GA4-ben?
Küldj egy megjelenési eseményt az elemláthatóság triggerről és egy kattintási eseményt ugyanarra az elemre. A GA4 tölcsér-felfedezésében munkamenet-szinten kivonod a kattintókat a látók számából, és elosztod a látók számával.
Lassítja az oldalt az elemláthatóság trigger?
Az alapbeállítás általában kis terheléssel jár. A Google súgója szerint a DOM-változások figyelése teljesítményproblémát okozhat, ezért ezt csak szűk szelektorral és a releváns oldalakra korlátozva érdemes bekapcsolni.
Garantálja a jobb konverziót, ha ezt mérem?
Nem garantálja. A mérés megmutatja, hogy a gyenge eredmény oka inkább az elhelyezés vagy inkább az ajánlat, és ez segítheti a jobb döntést, de a változtatás hatását külön kell mérni.
Források és további olvasnivalók
Ezen az oldalon a hivatalosan igazolt információt elsődleges forrásokból építjük fel; a saját tapasztalatot és a szakmai becslést mindig külön jelöljük a szövegben.