Debuggování GTMka usnadní správné nástroje

Otestování funkčnosti a správnosti GTM workspace může být v ideálním případě formalita. V tom neideálním třeba i hodina (nebo dvě) neočekávané práce navíc. Znáte to – nastavíte si pečlivě tagy, triggery, proměnné, spustíte GTM preview mode … a nic. Tagy se nespouští, triggery nefungují, proměnné neobsahují to, co jste očekávali. A vy netušíte proč, když jste si to všechno tak pěkně připravili. Zato víte, že vás čeká debuggování.

Hledání a odstraňování chyb někteří milují, jiní ho nenávidí. Naštěstí na debuggování GTMka nejste sami. V současné době existuje na trhu celá řada nástrojů. Každý má svůj ověřený postup, jak GTMko testovat, asi jako každá rodina má svůj jedinečný recept na bábovku. A já vám v tomhle článku prozradím ten svůj. Ten, který mi zatím vždycky pomohl najít, proč mi GTMko nefunguje, a navedl mě na to, co s tím.

Najděte, v čem vařit

Základem pro úspěch receptu je správná nádoba na vaření. Pokud jde o GTMko, vařím vždycky v Chromu. Tady míchám ingredience a dělám veškerou magii. Může za to fakt, že Google jakožto majitel produktu Google Tag Manager nabízí v prohlížeči Chrome Google Developer Console, která ve spojení se spoustou užitečných rozšíření jednoznačně vítězí nad ostatními nástroji. Takový WASP (Web Annotation & Sharing Platform) nebo dataslayer jsou pro mě jako nůž nebo vařečka – bez nich prostě nic neuvařím.

Testování nastaveného GTM workspace začínám vždycky Preview/Debug modem v GTM. Vidím tam na první pohled, které tagy se (ne)spouští. To všechno přehledně pro různé eventy – defaultně Container Loaded, DOM Ready a Window Loaded, případně pro další custom eventy. V záložce Tags sleduju, které tagy se odpálily a které ne. Po otevření konkrétního jednoho pak vidím i proč.

V záložce Variables zase zjišťuji, jaké hodnoty mají jednotlivé proměnné. Tohle opravdu oceňuji především v následujících třech případech:

1. Když debugguji Custom Javascript proměnné, abych si ušetřila práci jejich vypisováním do konzole.
2. Při zjišťování toho, v jakou chvíli (na jaký event) se mi proměnné plní hodnotami. Pomohlo mi to konkrétně u klienta, kterému jsem překlápěla tagy ze zdrojového kódu do GTM s tím, že kromě GTM měl na webu ještě gtag pro trackování do Google Ads. V datalayeru se zdálo, že push hodnot do proměnných proběhne před načtením GTM, ale Preview mode viděl hodnoty proměnných až na DOM Ready. Nakonec se ukázalo, že gtag spouštěl gtm pageview, s čímž už jsem si uměla poradit.
3. Když mi nefungují nastavené „klikací” triggery (Form submission, Just Links a All Clicks). Třeba ve chvíli, kdy ze zdrojáku usoudím, že pro odeslaný formulář využiju Auto-event trigger Form Submission, ale pro GTM jde přitom o kliknutí.

Nový GTM Debug Mode

Zhruba od poloviny října si zvykám na nový GTM Debug/Preview Mode. Chvíli mi to sice trvalo, ale oproti starší verzi na něm vidím několik pozitiv. Dokonce i to, že mi mezi okny přibude další (debuggovací) záložka, vnímám jako plus. Přijde mi takto mnohem přehlednější. Asi nejvíc oceňuji, že oproti starší verzi, se můžu při debuggování vracet na předchozí stránky a už nemusím využívat magický skriptík „window.onbeforeunload = function() { return true; };” v konzoli. Podrobněji o novém Debug Modu ale třeba jindy…

GTM debuggovací záložka přehledně zobrazí jednotlivé eventy, tagy i proměnné.

GTM Preview mode mě navíc nedávno mile překvapil při debuggování nefungujícího eventu, který nám vývojář implementoval do zdrojáku. Tag se nespouštěl, všechno se zdálo být nastavené správně, ale GTMko pořád ukazovalo před a za názvem eventu červená kolečka. Tyhle semaforky se nakonec ukázaly jako neviditelné mezery, které bych bez pomoci Preview modu hledala ještě teď.

Použijte správné nástroje

Že mi GTM Preview mode ukazuje spuštěné tagy ještě pořád neznamená, že data odcházejí, kam mají. Proto všechno kontroluju ještě ve WASPu, kde přehledně vidím, do jakých systémů data odešla a v jakém byla případně vzájemném vztahu. Ideální pomocník ve chvíli, kdy potřebuju zkontrolovat všechny tagy a jimi odesílaná data pro konkrétní reklamní systém, což běžně dělám třeba u klientů, kteří posílají data do dvou FB účtů nebo jim překlápím remarketingové snippety ze zdrojového kódu do GTM.

Pro zkoumání datalayeru doporučuju dataslayer. Přehledný a přesný pomocník, který mi ukáže kompletní datalayer na dané stránce. Plní se postupně s každým dalším eventem (levá sekce), zobrazuje ty nejčerstvější hodnoty proměnných (prostřední sekce) a dají se v něm snadno najít informace pro jednotlivé podporované tagy (Google Analytics, Adobe Analytics a Floodlight) v pravé části. Navíc nezapomíná (do jeho zavření), takže si pamatuje historii na předchozích navštívených stránkách.

Takto může vypadat už poměrně složitý dataLayer.

Především pro zkoumání funkčnosti Custom JS proměnných se mi občas hodí konzole (Console), kam si třeba nechávám vypsat hlášky, abych zjistila, kam až skript doběhl a kde už se nespouští. Oceňuju, že si pamatuje historii, a to dokonce i po opětovném otevření. To se mi velmi hodilo, když jsem testovala funkčnost řešení odchozích duplicitních transakcí po tzv. Tab Discardu v některých prohlížečích.

A co vy? Jaký je váš ověřený postup na debug GTMka? Jaké vychytávky využíváte? Podělte se v komentáři!

Bonus (až vás přestane bavit péct cukroví): Náš rodinný recept na bábovku
Suroviny:

• ¾ hrnku cukru
• ½ hrnku oleje
• 1 vanilkový cukr
• 2 vejce
• 1 prášek do pečiva
• 1+¾ hrnku polohrubé mouky
• 2 hrsti rozinek spařených horkou vodou s rumem (jen aby byly rozinky ponořené)
• 200 ml mléka
• kakao, kokos, ořechy…

Postup:

Vyšlehám vejce s cukry, přidám olej a šlehám dál, pak přisypu mouku s práškem do pečiva, přileju mléko s rozinkami včetně tekutiny a dál přidám dle chuti, co mám doma (kokos, ořechy nebo třeba kakao do část těsta). Těsto pak vleju do vymazané formy – když se to hodí, vysypu ji místo mouky kokosem a strčím do trouby vyhřáté na 175 stupňů na cca 40 minut. Dobrou chuť! 🙂