Deep dive google tag manager (mike van hoenselaar, maart 2022)

@MikevHoenselaar
mike@onlineboswachters.nl

Vind alles terug op
http://vruc.ht/gtmob20
@MikevHoenselaar

Deep Dive GTM |
Heel kort de theorie nog even
1. Waarom een Tag manager
2. Tour GTM
3. Variabelen, Triggers en Tags
4. dataLayer
@MikevHoenselaar

Deep Dive GTM |
Praktijk
1. Debugging
2. Toevoegen variabelen Constante {{GAID}} (opdracht 1)
3. Toevoegen variabelen Lookup-tabel (opdracht 2)
4. Google Analytics implementeren (opdracht 3)
5. HTML tag Hotjar implementatie (opdracht 4)
6. Externe links meten (opdracht 5)
7. E-mailadressen meten (opdracht 6)
8. PDF’s download meten (opdracht 7)
9. Event tracking (opdracht 8)
10. Scroll tracking (opdracht 9)
11. Video tracking (opdracht 10)
Wat staat er vandaag op het programma
@MikevHoenselaar

Deep Dive GTM |
Na afloop van de training Google Tag Manager:
● Weet je hoe Google Tag Manager werkt.
● Kun je Google Analytics via Google Tag Manager op je site installeren.
● Kun je Google Tag Manager debuggen
● Kun je zelf button clicks, PDF-downloads, e-mailadressen en externe links
doormeten in Google Analytics via Google Tag Manager.
● Kun je zelf meetpixels voor AdWords- en Facebookcampagnes via Google Tag
Manager op je site zetten.
● Weet je hoe je via Google Tag Manager aanpassingen kunt doorvoeren in de
trackingcodes van Google Analytics.
● Kun je de datalaag uitlezen en als trigger gebruiken om een tag te activeren
@MikevHoenselaar

Deep Dive GTM |
@MikevHoenselaar

Voordelen tag management
● In veel gevallen geen sitecode bewerken
● Minder een webdeveloper nodig
● Toekomstbestendig
● Als marketeer nieuwe dingen testen
● Snelheidswinst (vanwege ansynchrone tags)
● Meer flexibiliteit
● Debugging!
● Versiebeheer
● Ingebouwde tags en variabelen beschikbaar
● Ingebouwde syntax en code controle
● Veel nieuwe features
● GTM: Gratis
@MikevHoenselaar

Nadelen tag management
● Datalaag is iets dat ontwikkelaar moet blijven vullen
● Website is van buitenaf te beïnvloeden
● Marketing heeft te veel invloed op website
● Geen support van Google
● Makkelijk te leren, maar steile leercurve
@MikevHoenselaar

Deep Dive GTM |
@MikevHoenselaar
BuiltWith heeft nu 2.811.665 websites geïndexeerd.

Basisstructuur
Google Tag Manager

Deep Dive GTM |
Code kwijt?
Klik op Container ID in
Workspace.

Zorg dat je container ID
overeenkomt met
account dat je bekijkt
TOP
TIP

Vergeet je container niet
te publiceren na het
testen :)
TOP
TIP

Tags
“Doen dingen,
bepalen wat er
gebeurd”
@MikevHoenselaar

Triggers
vertellen tags
wanneer ze dingen
moeten doen
@MikevHoenselaar

Variabelen
Dynamische waarde.
Triggers kan op
basis van deze
waarde aan gaan.
@MikevHoenselaar
x = 1, x is de naam van de variabele hier
die de waarde 1 bevat.

Tour GTM
Variabelen, Triggers, Tags

Credit: https://tealium.com/what-is-a-data-layer/
@MikevHoenselaar

Plaats de dataLayer VOOR de
GTM container in je code!

@MikevHoenselaar
Geen oranje balk?
Zet adblocker uit. Voor
tagmanager én website
OUD

Iets aangepast bij
debuggen? Vergeet niet
te refreshen, zowel in
GTM als in browser.
TOP
TIP

Maak naamafspraken
Zie http://vruc.ht/gtmnc

Let’s GO!
@MikevHoenselaar
https://tagmanager.google.com

Deep Dive GTM |
https://tti.onlineboswachters.nl/gtmob/[studentnummer]/
bijv: https://tti.onlineboswachters.nl/gtmob/1
https://tagmanager.google.com
voor de opdrachten en testen
@MikevHoenselaar
https://analytics.google.com
voor je eigen UA code en testing
[studentnummer]
vervang je door je
eigen nummer die
je krijgt

Controleer na elke
opdracht in de Preview
en eventueel ook in
Google Analytics.
TOP
TIP

Toevoegen van een variabele
Krachtige manier om zelf nieuwe dingen bij te houden
1

Deep Dive GTM |
Stappen om een variabele toe te voegen
1. Klik op Variabelen
2. Klik op (De knop Configure is voor standaard variabelen)
3. Vul ipv ‘Naamloze variabele’ er ‘GAID’ in. Dit is de naam van de variabele.
4. Klik op (mouse over grote witte vlak)
5. Kies als variabele type Constant (onder Hulpprogramma’s)
6. Vul bij Waarde de UA code in (zoek hem op in je eigen Google Analytics
7. Klik op
@MikevHoenselaar
Voorbeeld!

Toevoegen van een variabele 2
Dit keer maken we een lookup-tabel, waarom?
Omdat dit veel tijd scheelt bij bijvoorbeeld meerdere websites zoals
ontwikkeling, staging en productie. De variabele krijgt een dynamisch
karakter op basis van een andere variabele.
2

Deep Dive GTM |
1. Klik op Variabelen en klik op
2. Vul ipv ‘Naamloze variabele’ en vul ‘GAIDLU’ in.
3. Klik op en kies voor type Lookup Table / Lookup tabel
4. Kies bij Invoervariabele {{Page Hostname}}, op de website vult GTM deze
variabele met de URL, bijv www.domein.nl.
5. Klik op
6. Vul bij Invoer het domein van je website in. Dit is in dit geval het domein
https://tti.onlineboswachters.nl waar de opdrachten staan.
7. Vul bij Uitvoer {{GAID}}
(je kunt ook op klikken en dan selecteren) , dit zou je normaliter
herhalen voor elk domein waar jouw Google Analytics ingeladen wordt (bijv
dev.onlineboswachters.nl)
8. Je kunt gebruik maken van een standaardwaarde. Dit betekent dat als de
variabele geen match kan vinden met de rijen die je net aangemaakt hebt,
de standaardwaarde teruggestuurd wordt.
9. Klik op
Stappen om een lookup-tabel te maken
@MikevHoenselaar

Deep Dive GTM |
Et voila!
@MikevHoenselaar

Google Analytics toevoegen
De kern van veel meetbaar maken, as you all know by now.
3

Deep Dive GTM |
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Pageview’ in.
4. Klik op bij Tagconfiguratie
5. Kies voor Universal Analytics
6. Trackingtype hoort op Paginaweergave te staan
7. We missen nu een variabele, van het type Google Analytics instellingen.
8. Beschrijving zie volgende slide.
9. Klik daarna op bij Triggers
10. Kies hier voor All Pages, je wilt GA immers op alle pagina’s activeren.
11. Klik dan op
12. Done, GA zal nu op elke pagina ingeladen worden en een Pageview afvuren.
Stappen om GA toe te voegen
@MikevHoenselaar

Deep Dive GTM |
Je ziet een optie:
Ga maar eens bij Variabelen kijken om te zien wat je dan in moet stellen. Vergeet
daar ook niet jouw eerder gemaakt {{GAID}} of {{GAILU}} te gebruiken.

Controleer dat je ook de Google
Analytics uit je bestaande code
haalt als je GTM gaat
implementeren.
Anders hele lage bounce ratio’s
en onbetrouwbare data!
TIP

Test nu eens of je jezelf in de Real
Time rapportage kunt
terugvinden in Google Analytics
TIP

Deep Dive GTM |
Kun je jezelf niet in Real Time rapportage
terugvinden?
Controleer dan:
1. De URL van de test URL (http://tti.onlineboswachters.nl/gtmob/9/)
2. Geen [] in de URL, dus niet tti.onlineboswachters.nl/gtmob/[9]
3. Of Debug scherm juist werkt. Kan zijn dat je cookies moet legen.
4. Of je in de juiste Dataweergave in Google Analytics kijkt
5. Of je in GTM in de juiste container
hebt gewerkt
Was het een van deze 5 dingen?

Hotjar inladen
Het gaat hier om een stukje custom HTML
4

Deep Dive GTM |
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘CU - Hotjar’ in.
5. Kies voor Aangepaste HTML
6. Plak nu de code die bij deze opdracht op jouw eigen pagina staat
7. Let op dat er < script > staat, je moet de spaties nog verwijderen!
8. Klik op bij Triggers
9. Kies hier voor All Pages.
10. Klik dan op
11. Done, Hotjar zal nu op elke pagina ingeladen worden. Dit kun je ook met
elke ander script.
Stappen om custom HTML te plaatsen
@MikevHoenselaar

Hotjar heeft inmiddels
een eigen tag :). Kun je
hem vinden?
Dit is natuurlijk veel handiger dan de custom HTML
kopiëren en plakken.
TIP

Deep Dive GTM |
Je vindt deze onder Tags. Dan hoef je geen custom HTML te gebruiken, maar
alleen je account ID in te vullen. Veel handiger!
En minder foutgevoelig.
En Hotjar kan, in dit geval, makkelijker
nieuwe versies van het script lanceren.

Externe links
Heel handig om te zien waar mensen naartoe gaan vanuit jouw website.
Standaard is dit niet zichtbaar in Google Analytics.
5

Deep Dive GTM |
1. Klik op Variabelen
2. Als je ‘Click URL’ al in deze lijst hebt staan, dan hoef je de volgende stappen
niet te doen en kun je naar de volgende slide
3. Anders, klik op of Configureren
4. Vink hier Click URL aan (onder kopje Klikken)
5. Hij wordt automatisch opgeslagen. Je kunt nu bovenaan op het kruisje
klikken, naast Ingebouwde variabelen configureren
6. Waarom zou GTM standaard variabelen hebben? Kijk eens goed welke
standaard variabelen GTM voor jou kan vullen. Zijn er nog meer die erg
handig kunnen zijn al?
Stappen om externe link kliks te meten
@MikevHoenselaar

Let op
met alle ingebouwde variabelen aanvinken. Elke
aangevinkte variabele wordt bij elke actie van de
bezoeker geprobeerd te vullen of updaten, oftewel
kost extra (laad)tijd. Dus gebruik alleen die je echt
nodig hebt.
TOP
TIP

Deep Dive GTM |
Stappen om externe link kliks te meten (vervolg)
@MikevHoenselaar
Dus alles tussen de quotes :)
Heeft het {{ }} dan is het een variabele,
anders is het statische tekst
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - Outbound link click’ in.
6. Track type zet je op Event of Gebeurtenis
7. Je kunt nu de parameters instellen. Zet deze als volgt:
(Category: Link Click Action: Outbound Label: {{Click URL}})
8. Check dat Non-Interaction op False staat
(https://www.lunametrics.com/blog/2014/05/06/noninteraction-events-google-analytics/)
9. Selecteer de gemaakte Google Analytics Settings variabele
11. Kies hier het plusje + rechtsboven
12. Zie volgende slide

Deep Dive GTM |
1. Trigger type kies je voor Klik - Alleen links
We hoeven niet alle kliks te meten om externe links te meten, alleen
<a></a>, dus echte links.
2. Dit werkt standaard alleen bij links die in nieuw venster openen. Daarom
kunnen we gebruik maken van de Wachten op tags. Als je hier 2000
milliseconden in zet dan wacht GTM maximaal 2s met echt op de link klikken
totdat de gekoppelde tags zijn uitgevoerd. Voor externe links meetbaar
maken kan dit dus erg handig zijn.
3. Omdat je Wachten op tags aanzet dien je ook nog aan te geven wanneer
deze trigger aangezet mag worden. In praktijk is dit vaak op alle pagina’s.
Maar kan in ander geval alleen blogberichten zijn bijvoorbeeld.
(Met de ene geef je aan wanneer de stroom er op mag en bij de andere
wanneer deze groen mag worden)
@MikevHoenselaar

Deep Dive GTM |
1. Wanneer willen we deze Trigger activeren? Niet op alle kliks op een link.
Hiervoor moeten we iets slimmers maken.
2. We willen alle links die NIET naar jouw domein gaan meten als externe link,
in dit geval is dat onlineboswachters.nl.
3. Je kiest hier voor Sommige klikken op links. Hierna mag je 3 waarden
invullen. De eerste dropdown wordt Click URL. De middelste bevat geen en
de laatste onlineboswachters.nl.
4. Klik daarna op Opslaan.
@MikevHoenselaar

Mailadressen
Handig als je wilt weten hoeveel bezoekers op jouw info@domein.nl
e-mailadres geklikt hebben.
6

Deep Dive GTM |
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - email address click’ in.
6. Track type zet je op Event/Gebeurtenis
(Category: Link Click Action: Mailadres Label: {{Click URL}})
Stappen om e-mailadressen te meten
@MikevHoenselaar

Deep Dive GTM |
Kijk op de testsite naar de bron van de pagina (RMK en dan ‘Inspecteren’ op
de link). Kijk wat er bij href=”” staat in de <a></a>.
2. Wanneer willen we deze Trigger activeren? Als er wat in de href=”” staat?
3. Dan kiezen we bij ‘Deze trigger wordt geactiveerd voor’ (activatie): Sommige
klikken op links, want we willen het alleen bij e-mailadressen.
Stappen om mailadressen te meten (vervolg)
@MikevHoenselaar

Deep Dive GTM |
“Zoals je wellicht gemerkt
hebt, zijn veel stappen
hetzelfde. Als je voelt dat je
dat vaker doet, GTM heeft
een kopieerfunctie van een
Tag of Trigger.”
@MikevHoenselaar

Deep Dive GTM |
Zou je nu klikken op telefoonnummers op een
pagina meetbaar kunnen maken?
Op je eigen testpagina staat een telefoonnummer. Hoe krijg je in GA een
gebeurtenis waaraan je kunt zien dat op dat telefoonnummer geklikt is? Het lijkt
op de stappen zoals bij e-mailadressen.
Hint: Wat is de HTML code van een link van een telefoonnummer?
Hint 2: De HTML hiervoor is op jouw tti.onlineboswachters.nl terug te vinden
(CTRL+U of CMD+U om die snel te bekijken, of Rechter muisknop Inspecteren op
de link van het telefoonnummer).
@MikevHoenselaar

PDF/DOC/XLS Downloads
Links naar PDF bestanden op je website meetbaar maken, ontzettend
handig!
7

Deep Dive GTM |
Stappen om downloads te meten
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - File Download click’ in.
6. Track type zet je op Event
(Category: Link Click Action: Download Label: {{Click URL}})
@MikevHoenselaar

Deep Dive GTM |
We hoeven niet alle kliks te meten om downloads te meten, alleen <a></a>
met een href waar .pdf in staat (of bijv xls, docx of andere download
extensie).
2. Wanneer willen we deze Trigger activeren?
3. We willen alle links meetbaar waar in de HTML bij de waarde href een link
staat die eindigt met de extensie pdf.
Stappen om downloads te meten (vervolg)
@MikevHoenselaar

Deep Dive GTM |
1. Maar nu wil je ook .doc en .docx bestanden meetbaar maken. Je denkt
wellicht “ik kies er voor om op het plusje te klikken om een rij extra te
krijgen.”
2. Alleen als je goed leest staat er ‘aan AL deze voorwaarden is voldaan.’ Dus
dat wordt hem niet dan. Een link heeft niet EN .pdf EN .doc.
@MikevHoenselaar

Deep Dive GTM |
Je hebt dan iets slimmers nodig. De uitkomst is hier reguliere expressies. Een
soort codetaal waarmee je trucjes kunt uithalen in tools zoals bijvoorbeeld GA of
GTM.
$ = kijk vanaf het eind
= eerstvolgende teken als geen speciaal karakter beschouwen, oftewel ‘escapen’
| = pipe teken en betekent OF
() = een serie
Meer daarover: https://support.google.com/analytics/answer/1034324?hl=nl

Event tracking
Non changing URL gedrag meetbaar maken, zoals sliders en accordeons.
8

Deep Dive GTM |
Stap 1: Maak meetbaar in Google Analytics dát de accordeon aangeklikt is. Op
basis van wat je al gehad hebt zou dit kunnen lukken.
Hint: Begin bij te bekijken hoe de HTML structuur in elkaar zit.
Stap 2: Maak meetbaar in Google Analytics wélke stap aangeklikt is.
Je wil nu weten of de eerste, tweede, derde aangeklikt wordt.
Hint: Maak een Trigger van All Clicks en kijk eens in de debug mode wat de
variabele worden als je op een specifiek item van de accordeon klikt.
In 2 stappen
@MikevHoenselaar

Deep Dive GTM |
Bekijk de HTML van de accordeon op de pagina. Zie je een <a> zoals bij
e-mailadressen, externe links of downloads?
https://monosnap.com/file/HsaJSNcnc4xVlm3rxNmAdGJJq1Cg0N
Ik laat in de video zien wat het verschil is tussen de andere opdrachten en deze.
De Alleen links is dus een event dat ALLEEN geactiveerd wordt als je op links klikt,
dus <a></a> in de HTML.
Alle elementen activeert bij ALLE kliks. Dus ook als je in het witte gedeelte of
titels klikt.
Dat heb je nodig bij deze accordeon :). Deze heeft namelijk een <button> als
HTML.

Deep Dive GTM |
Stappen om accordeon te meten
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - Accordion click’ in.
6. Track type zet je op Event
(Category: Click Accordion Action: ?? Label: ??) -> bepaal dit nu zelf
@MikevHoenselaar

Deep Dive GTM |
1. Trigger type kies je dus nu niet voor Klik - Alleen links maar voor Alle
Elementen. We moeten GTM wakker maken door het klikken op een ander
element dan een link.
2. Wanneer willen we deze Trigger activeren?
3. Niet bij alles, maar bij Sommige klikken.
4. In de HTML heb je wellicht gezien dat er <button class=””> stond. De basis
blijft, “Hoe kan ik iets unieks bedenken waardoor ik zeker weet dat er op die
specifieke button geklikt is?”.
5. Dat is nu de class accordion.
6. Alleen je houdt in de variabelen nog niet de classes bij. Je kunt hiervoor de
ingebouwde variabele Click Classes gebruiken.
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

Deep Dive GTM |
Dit was stap 1, je weet nu DAT er op de accordeon geklikt wordt en hoe vaak.
Alleen nog niet op welk item. Heb je een idee hoe je dat mogelijk kunt maken?
TIP: {{Click Text}}

Scroll tracking
Hoe ver scrollt iemand op een pagina naar beneden meetbaar maken?
9

Deep Dive GTM |
Scroll Tracking
https://www.simoahava.com/analytics/scroll-depth-trigger-google-tag-manager/
Inmiddels heeft GTM ook een eigen Scroll Variabele.
Weet jij hem te gebruiken? Deze kun je dan ook heel handig met een GA Tag als
custom event richting GA krijgen zodat je weet tot hoe ver bezoekers
doorscrollen.

Video tracking
Hoe ver kijkt iemand een bepaalde YouTube video op je website?
10

Deep Dive GTM |
Video Tracking
https://www.simoahava.com/analytics/the-youtube-video-trigger-in-google-tag-manager/

Deep Dive GTM |
Wat is er nog meer?
● GA niet inladen op specifieke pagina’s (op basis van class of ID)
● Tag Firing Priority, bepaal de prioriteit van de tags
● Custom Dimensions via GTM
● Form tracking via GTM
● Pre-populate formulieren
● Verrijk zoekmachineresultaten (met oa rich snippets en SERP zoekbalk)
● 404’s makkelijker meetbaar maken
● etc, etc, etc
Gebruik Google om het stappenplan te vinden hiervoor! :) #growthhacking

Vragen? Gebruik Slack of mail naar
mike@onlineboswachters.nl
?

Deep dive google tag manager (mike van hoenselaar, maart 2022)

Deep dive google tag manager (mike van hoenselaar, maart 2022)

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Deep dive google tag manager (mike van hoenselaar, maart 2022)

Similaire à Deep dive google tag manager (mike van hoenselaar, maart 2022) (20)

Plus de ➚ Mike van Hoenselaar

Plus de ➚ Mike van Hoenselaar (20)

Deep dive google tag manager (mike van hoenselaar, maart 2022)