Átkattintás és form küldés megállítása GTM-ben

Csentes Zoltán    2020-04-22
elolvasom

Főoldal > ADOPS

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.

  1. Chrome böngészőben hívd elő a DevTools-t (F12).
  2. 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

  1. Nyissuk meg Chromeban a DevTools-t (F12).
  2. A Source fülön keresd meg az Event Listener Breakpoints ablakot
  3. 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

Hasznosnak találtad? Oszd meg mással is:

Ez is érdekelhet:



Kíváncsi vagyok a Te véleményedre is:

Kérjen Google Analytics Auditot

Ne hagyja elveszni az értékes adatokat! Ha nem jól működik az Analitika lehetőséget és pénzt veszít. Kérjen Google Analytics auditot és átnézem a teljes fiók beállítását.