Főoldal > SEO Blog
Csentes Zoltán, SEO szakértő
Az elmúlt 20 évben az online marketing minden területén megfordultam, minden hárombetűs területet kipróbáltam, végül a keresőoptimalizálás és webanalitika szakértője lettem.
A Google Tag Managert használata során már veled is biztos előfordult, hogy ellenőrizni szeretted volna, hogy form elküldés, vagy link kattintás után lefutott-e a tag, jól fut-e le, vagy éppen a dataLayer-be a megfelelő információk kerültek-e.
Link kattintáskor és form elküldéskor azonban az oldal rögtön átirányít, így GTM preview módban nem tudod ellenőrizni a lefutott tageket. Most mutatok három egyszerű megoldást arra, hogyan állítsd meg preview módban az átirányítást, hogy ellenőrizni tudd a lefutott tag-eket vagy a datalayert.
CTRL + kattintás
Átirányított linkek esetében a legegyszerűbb megoldás, ha a linket úgy kattintod le, hogy nyomva tartod közben a CTRL billentyűt. Ilyenkor új ablakban nyílik meg a linkelt oldal, viszont az eredeti ablak megmarad, amiben le tudod ellenőrizni a lefutott tag-et.
Vannak persze speciális esetek, amikor egyedi kóddal hívjuk meg az új oldalt, vagy pl. formok esetében ez a módszer nem fog működni. A legtöbb általános linknél azonban bőven elég ezt használni.
Beforeunload event figyelése
A beforeunload event figyelésére két megoldást is találtam:
Javascript Eventlistener
Ehhez a megoldáshoz egy javascript kódot kell a link kattintás előtt lefuttatnunk a böngésző console-ban:
See the Pen Beforeunload JS console-ba by Csentes Zoltán (@csenty) on CodePen.
- Chrome böngészőben hívd elő a DevTools-t (F12).
- Menj a Console fülre és másold be a kódot, majd ENTER
Ez a script annyit csinál, hogy eventlistener segítségével megállítja az oldal további futását, ha a beforeunlad event lefut.
Amikor egy formot elküldünk, vagy egy átirányított linkre kattintunk, akkor az átirányítás előtt mindig lefut a beforeunload esemény. Ezt érzékelve a script feldob egy figyelmeztetést, hogy el akarod-e hagyni az oldalt, vagy maradsz? Kattintsunk a Cancel gombra és maradhatunk az eredeti ablakunkban és már ellenőrizhetjük is a tageket és dataLayert.
beforeunload event listener beállítása chrome consoleban
Breakpoints használata DevTools-ban
- Nyissuk meg Chromeban a DevTools-t (F12).
- A Source fülön keresd meg az Event Listener Breakpoints ablakot
- A load eventeknél pipáld ki a beforeunload eseményt
Ezzel a beállítással azt érjük el, hogy minden átirányítás előtt (beforeunload esemény) megáll az oldal további futása. Hasonlóan a fenti példához, az oldal további betöltése megáll és ellenőrizni tudjuk a dataLayer tartalmát.
Breakpoints beállítása Chrome DevToolsban.
Chrome dataLayer plugin használata
Az analytics auditok során a dataLayer vizsgálatához a személyes kedvencem a datalayer böngésző kiegészítő. Segítségével az oldalakat végigkattintgatva meg tudjuk nézni minden egyes oldalnak visszamenően a dataLayer konténerét és hogy milyen eventek futottak le rajta.
Telepítés után a DevTools-ban (F12) megjelenik egy datalayer fül:
datalayer Chrome extension