Számos olyan eszköz létezik arra, hogy mérjük egy oldal Core Web Vitals mutatóit. Ezek közül az egyik legnépszerűbb és ingyenes elemező a PageSpeed Insights: https://pagespeed.web.dev/
Ezzel az eszközzel megkapjuk akár oldal szinten is, hogy a valós felhasználói adatok alapján hogyan teljesített az oldal, már ha volt elég felhasználó az oldalon.
Emellett lassú 4G nettel emulálva kiértékeli az oldalt, és javaslatokat tesz az oldal javítására:
Azonban az alábbi problémákra nem fogunk itt választ kapni:
- A tesztben tökéletes a CLS értéke, nem mozognak el a tartalmak betöltés közben, míg a felhasználóknál ez az érték 0,57.
- INP: ez több mint 2 másodperc, de nem fogjuk tudni, hogy pontosan mely interakcióknál lassul be az oldal
- LCP értéke a tesztben nagyon magas volt, de a felhasználóknál majdnem tökéletes. Ezt is nagyon sok tényező befolyásolja, pl. különböző felbontásoknál más-más elem lesz a legnagyobb látható elem.
Az INP működéséről és az interakciók manuális teszteléséről a https://intren.hu/az-inp-interaction-to-next-paint-jelentosege-es-vizsgalata/ címen már részletesen foglalkoztunk, most azt mutatjuk meg, hogy miként lehet a valós felhasználói tevékenységet elemezni, kinél melyik elem volt a legnagyobb látható elem, milyen interakciókat hajtottak végre és azok mennyi ideig tartottak, illetve hogy mely elemek mozogtak el a legjobban
Google Tag Manager beállítása
A mérések beállításához a hivatalos web-vitals könyvtárat használtuk fel: https://github.com/GoogleChrome/web-vitals illetve ezt az útmutatót: https://github.com/google-marketing-solutions/web-vitals-gtm-template
Létre kell hozni 2 címkét: Az egyik betölti a Web Vitals könyvtárat, míg a másik elküldi az adatokat a GA4-nek. Emellett kell egy aktiválási szabály, amely fogadja az adatokat a weboldalról.
Ha mindent jól csináltunk, akkor GA4-ben is meg fognak jelenni az adatok. Ezt követően ott is létre kell hozni a megfelelő dimenziókat és mutatókat.
Google Analytics beállítása
Custom dimensions:
Ahol szöveges adatokat várunk, ott ezt állítjuk be:
Custom metrics:
Ide jönnek a számadatok, idővel kapcsolatos értékek:
GA4 events felületén is megjelennek ezek az adatok, bár itt kicsit ömlesztve vannak és sok esetben nem tudtuk megfelelően szétválasztani, átlagokat nézni:
Megoldás: Looker stúdió. Itt már szépen le lehet szűrni az adatokat és olyan formában tudjuk elemezni, ami hasznos számunkra.
Looker stúdió:
Egyszerű táblázatos formában könnyedén ki tudjuk innentől nyerni az adatokat.
Itt most URL, felbontás és böngésző szerint is szétbontottuk az LCP értékeket hogy lássuk, mikor melyik elem vagy képURL lesz a legnagyobb látható elem, és átlagosan mennyi idő alatt töltődtek be.
Ugyanilyen módon megnéztük a CLS értékeket is, hogy lássuk, mely felbontásoknál mely elem mozdul el a legnagyobb értékben.
Az interakciók vizsgálatánál azt látjuk, hogy a Google Analytics 4 audit űrlapjánál van lassulás, az űrlap kitöltése után az adatok ellenőrzése és az esetleges hibák kiírása volt picit lassú.
Ezzel a módszerrel 5 mutatót tudunk részletesen mérni: LCP, CLS, INP, FCP és TTFB.
GTM-ben be tudjuk állítani, hogy az 5 mutató közül melyiket mérje, melyik oldalon, milyen mélységben, de a tapasztalatunk az, hogy egy forgalmasabb oldalon bőven elég néhány órát futtatni a kódot ahhoz, hogy értékelhető adataink legyenek az elemzéshez.
GA4 és GTM hozzáférés esetén szívesen segítünk a beállításokban és kimutatások létrehozásában. Amennyiben szeretné használni ezt a lehetőséget, vegye fel velünk a kapcsolatot a https://intren.hu/kapcsolat/ oldalon.
