Az oldalak betöltési sebessége fontos szerepet játszik a felhasználói élményben, így közvetetten a Google rangsort is befolyásolhatja. Ebből kifolyólag fontos látnunk, hogy az egyes aloldalak hogyan teljesítenek, melyik részen van probléma, hogy azokat javítani tudjuk. Különösen érdemes olyankor figyelni a változást, ha lecserélésre kerül egy funkció, vagy tárhely csere, frissítés történik.
Ennek mérésére a Google Analytics korábbi verziója lehetőséget adott. Mintavételezéssel nyomon követhettük többek között a szerver válaszidőt és a betöltési sebességet is.
Azonban a GA3 július 1-től már nem gyűjt adatokat (GA 360 is csak 2024. június 30-ig), így muszáj volt áttérni a GA4-re, amelyben sajnos ez a funkció hiányzik, nem méri a betöltési sebességeket, így ezt manuálisan, nekünk kell megoldani. Ennek lépéseit mutatjuk be a cikkben, melynek előfeltétele, hogy a GA4 mérése Google Tag Manager-en keresztül történjen.
Szükséges kód a betöltési sebesség mérésére
Az alábbi kód minden oldal-betöltéskor lefut, és EVENT-ként küldi el az adatokat a GTM-nek:
<script>
(function() {
var dataLayerName = ‘dataLayer’;
var pt = window.performance || window.webkitPerformance;
pt = pt && pt.timing;
if (!pt)
return;
if (pt.navigationStart === 0 || pt.loadEventStart === 0)
return;
var timingData = {
„page_load_time”: pt.loadEventStart – pt.navigationStart,
„page_download_time”: pt.responseEnd – pt.responseStart,
„dns_time”: pt.domainLookupEnd – pt.domainLookupStart,
„redirect_response_time”: pt.fetchStart – pt.navigationStart,
„server_response_time”: pt.responseStart – pt.requestStart,
„tcp_connect_time”: pt.connectEnd – pt.connectStart,
„dom_interactive_time”: pt.domInteractive – pt.navigationStart,
„content_load_time”: pt.domContentLoadedEventStart – pt.navigationStart
};
if (Object.values(timingData).filter(function(e) {
if (e < 0)
return e;
}).length > 0)
return;
window[dataLayerName] && window[dataLayerName].push({
„event”: „performance_timing”,
„timing”: timingData
})
}
)()
</script>
GTM beállítása a kód futtatásához
Első lépésként létre kell hozni egy új, Custom HTML típusú TAG-et, majd bele kell tenni a fenti kódot.
Ehhez pedig egy TRIGGERS-t is be kell állítani oly módon, hogy minden alkalommal fusson le, amikor az oldal betöltődik (windows.loaded)
Ennek köszönhetően minden oldalbetöltéskor lefut a kód, és a betöltési adatokat elküldi a GTM-nek.
- EVENT neve: performance_timing
- Betöltési adatok (milliszekundumban): “timing” tartalmazza az adatokat.
Például:
{
event: ‘performance_timing’,
timing: {
page_load_time: 131,
page_download_time: 0,
dns_time: 0,
redirect_response_time: 1,
server_response_time: 34,
tcp_connect_time: 0,
dom_interactive_time: 63,
content_load_time: 63
}
}
Következő résznél be kell állítanunk a GTM-ben, hogy a kapott adatokkal mit kezdjen.
GA4 EVENT tag beállítása
Ehhez első lépésként létrehozunk egy új TAG-et: GA4 Event
Itt állítjuk be, hogy a GA4-nek küldje el az EVENT-et a megadott paraméterekkel együtt. Azt is megadtuk, hogy GA4-ben az Event neve ez legyen: performance_timing.
GA4 változók beállítása
A változók dinamikus értékek, melyeket a Custom HTML-ben megadott “timing” tömb ad át nekünk, így minden változónál meg kell adnunk, hogy melyik adatot olvassa ki belőle. Például ha a szerver válaszidőt akarjuk kiolvasni és elküldeni a GA4-nek, akkor ott a timing.server_response_time nevet kell megadni.
GA4 Trigger beállítása
Létrehoztunk egy TAG-et, amely a változók segítségével elküldi az adatokat a GA4-nek. Így már csak egy Triggert kell létrehoznunk hozzá, amelyben meghatározzuk, hogy a fenti TAG akkor fusson le, mikor az oldal elküldte a GTM-nek a performance_timing EVENT-et.
Ha minden beállítás megfelelő, és publikálva is lett a GTM változtatása, akkor innentől már küldi is az adatokat GA4-be.
Adatok tesztelése GA4-ben
Miközben böngésszük a weboldalt, megnézhetjük a GA4 realtime felületén, hogy milyen Event-ek futnak le és azoknak milyen paramétereik vannak:
Ahogy a képeken látszik, az utóbbi 30 percben háromszor futott le a performance_timing EVENT. Kattintás után látszanak a konkrét értékek is (290, 361 és 439 milliszekundum alatt reagált a szerver).
Egyedi metrikák definiálása GA4-ben
Ahhoz, hogy ezekkel az adatokkal dolgozni tudjunk, fel kell venni paraméterként a GA4 admin felületén (Custom definitions → Custom metrics)
Ide ugyanazokat az EVENT paramétereket kellett felvinni, amiket a GTM elküld, mértékegysége pedig milliszekundum.
Innentől kezdve a GA4 is gyűjti az adatokat, és 24-48 órán belül megjelenik az EVENT-ek között a performance_timing is:
Innentől nyomon követhetők a fontosabb mérések az Analytics-ben. Azonban a GA4-nek még vannak további hiányosságai is. Az Explore fülön például nem tudunk létrehozni olyan kimutatásokat, amelyek oldalakra lebontva mutatnák meg az átlagos betöltési időket. Ehhez már külső szoftverre lesz szükségünk. Ilyen például a Looker Studio.
Looker Studio Dashboard létrehozása
Amikor a Looker Studio-t összekötjük a Google Analytics-szel, a mezők között megjelennek a Custom Metrics adatok is, valamint ezek átlagai:
Így ezeket felhasználva már létrehozhatunk egyedi Dashboardokat a felületen:
Az átlagos szerveridőnél és a betöltési időnél is már másodpercben mutatjuk az adatokat. Ezek alapján akár ugyanolyan nézet is létrehozható, mint ami megtalálható a GA3-ban.
Forrás:
