Google Tag Manager: Preview en debuggen

Google Tag Manager is een tag-managementsysteem dat marketeers in staat stelt om zelf tracking code aan een website toe te voegen met minimale betrekking van development. Maar dat legt wel de verantwoordelijkheid van testing en debugging bij de online marketeer.

In deze blogpost bespreken we Google’s eigen Preview & Debug modus om zo een beter beeld te krijgen van de (foutieve) werking van onze Google Tag Manager tags.

 Google-Tag-Manager-1

Debuggen, wat is dat?

Debuggen is het verwijderen van fouten in de implementatie nadat we via een test hebben ontdekt dat er iets fout loopt tijdens de uitvoering van onze tags.

Dit kan het niet vuren van een noodzakelijke tag zijn op een bepaalde pagina of actie. Wanneer het hier over conversiecodes gaat, kan dit missing data veroorzaken bij het tracken van betaalde campagnes. Maar ook onze variabelen (dynamische waardes) kunnen foutief ingevuld worden, wat een vertekend beeld in de verzamelde data geeft. Daarbuiten kan een tag ook - in extreme gevallen - andere functionaliteiten van de website lam leggen.

Alle bovenstaande bugs hebben een serieuze impact op de werking en/of optimalisatie van onze website en campagnes. Dat maakt het previewen van de container en het debuggen van tags en variabelen noodzakelijk voor iedere marketeer/developer die met Google Tag Manager werkt.

Preview & Debug activeren

In Google Tag Manager kunnen we naast het publishen van onze container (= een omschrijving voor de portfolio van tags en variabelen voor één website) ook de preview & debug functie inschakelen.

Dit doe je door rechtsboven op de pijl naast Publish te klikken en in de dropdown Preview te selecteren:

gtm_debuggen_6 

Wanneer je de volgende keer je website/pagina opent, zal je onderaan het scherm een overlay te zien krijgen.

 gtm_debuggen_3

  

Overlay

In dit overzicht zie je in het grote veld rechtsonder Tags Fired On This Page staan. Dit is het overzicht van alle tags die op deze pagina via Google Tag Manager werden ingeladen.

Zie je hier een tag staan die niet ingeladen had mogen worden? Controleer dan zeker de triggers (= de regels die de tag lanceren) voor deze tag. Daar zal je het probleem vinden. Hetzelfde geldt voor een tag die gevuurd had moeten worden, maar niet tevoorschijn komt.

Tags not fired on this page zijn alle resterende tags die in je container aanwezig zijn, maar niet gevuurd werden.

Summary

In de linkerkolom van de overlay vind je de summary terug. Dit zijn alle eventacties die op dezelfde pagina hebben plaatsgevonden tijdens je eigen previewsessie. Hierin kan je volgende events terugvinden:

  • Pageview: Het allereerste moment waarin je een tag kan vuren. gtm.js werd ingeladen (javascript ingeladen)
  • DOM Ready: Het tweede moment waarop je een tag kan vuren. Het ‘document object model’ is klaar met laden, oftewel de structurele opbouw van de pagina
  • Page Load: Het derde moment waarop je een tag kan vuren bij het inladen van een pagina. De volledige window werd ingeladen (design, afbeelding, video’s, …)
  • gtm.click: Een klik in de pagina op eender welk element dat geen link naar een andere pagina bevat en geen ‘submit’ button voor een formulier inhoudt
  • gtm.linkClick: Een klik in de pagina op een element met een link naar een andere pagina
  • gtm.formSubmit: Een klik op een ‘submit’ button voor een ingevuld formulier

 Wanneer je een tag vuurt na een click, link click of form submit, dan moet je eerst de actie ondernemen op de pagina voordat je de tag in de overlay ziet tevoorschijn komen.

 Wanneer je nadien in de summary op de click, link click of form submit klikt, zie je ook welke tags Google Tag Manager in deze acties afvuurde.

 gtm_debuggen_5 

Let op! Een link click brengt je naar een andere pagina, wat betekent dat je overlay opnieuw zal ingeladen worden en je dus geen gtm.linkClick meer in de summary zal zien staan voor die nieuwe pagina.

 TIP: Een goede tip is hier om je middelste muisknop (of Cmd + klik in OSX en Ctrl + klik in Windows) te gebruiken zodat de nieuwe pagina opent in een nieuwe tab. Zo behoud je de info van je overlay in de vorige pagina.

Variables

Maak je gebruik van variabelen om bepaalde data uit de webpagina in te vullen in de events/hits die je naar Google Analytics stuurt? Dan kan je de invulling van deze variabelen controleren in de tab Variables.

gtm_debuggen_1

Vergeet niet dat hier bij het inladen van de pagina enkel variabelen staan die op dat moment opgehaald moeten worden. Zoek je echter naar de invulling van een variabele na het ondernemen van een click, link click of form submit, voor dan eerst de actie uit. Daarna wordt je variabele in deze lijst ingevuld.

Onthoud hier ook weer de middelste muisknop (of Cmd+klik / Ctrl+klik) tip!

Wordt de variabele die je onderzoekt niet correct ingevuld? Controleer dan in je container de opmaak van deze variabele. Pas deze aan, refresh je preview en controleer opnieuw in de overlay op de webpagina.

Data Layer

Haal je data op uit een unified data layer? Dan kan je in deze tab de status en invulling van je data layer nakijken voor iedere stap van het inladen van de pagina.

Kies in de summary de stap die je wilt onderzoeken. Dit kan gaan van de pageview tot een latere link click. En klik daarna op de tab Data Layer.

gtm_debuggen_2

Hierin krijg je een volledig overzicht van de Data Layer invulling op het moment dat je gekozen hebt uit de summary.

Wordt de data layer incorrect ingevuld? Dan zijn er twee opties. Ofwel wordt deze data layer door development aangemaakt en neem je contact op met hen om dit na te kijken. In het andere geval vul je deze data layer zelf in via een variabele die je in je Google Tag Manager container hebt opgebouwd. Controleer dan de variabele, pas deze aan, refresh je preview en controleer de webpagina en overlay opnieuw.

Preview refreshen

Heb je een bug in je setup gevonden en deze aangepast? Dan moet je deze aanpassing niet publiceren alvorens deze te testen.

gtm_debuggen_4

Binnen je Google Tag Manager container zie je bovenaan een melding dat de previewmodus actief is en de versie ervan.

Links onderaan in deze melding kan je ofwel kiezen om de preview te verlaten (waardoor de overlay zal verdwijnen wanneer je de pagina refreshed), ofwel kan je de preview refreshen waardoor aanpassingen die je tijdens het previewen uitvoert onmiddellijk in de overlay kan gaan testen.

Conclusie

Google Tag Manager versnelt en vereenvoudigt tracking efforts voor een organisatie, maar er komt extra verantwoordelijkheid bij kijken. Het is noodzakelijk voor iedere marketeer/developer die werkt met GTM om de principes van de preview en debugging overlay te leren kennen.

Voldoet deze blogpost niet aan je verwachtingen? Heb je verdere vragen over een Google Tag Manager implementatie? Aarzel dan niet om ons een vraag te stellen via Twitter of neem rechtstreeks contact op met onze digitale analyst via joost.thijsen@intracto.com.

 

Geregeld organiseren we ook een opleiding Google Tag Manager, dus neem zeker contact op indien je hiervoor interesse hebt.

New Call-to-action

Meer weten? Contacteer ons!