Training or workshop or whatever you want to call it, deep dive, just some really practical tips and exercises to really learn Google Tag Manager or GTM. September 2020 in Amsterdam for The Talent Institute.

1. Deep Dive

2. @MikevHoenselaar
mike@onlineboswachters.nl

3. Directeur / Growth Hacker
10 jaar
Directeur
5 jaar
Growth Coach / Growth Hacker
2 jaar
Auteur
5 jaar
Organisator
2,5 jaar
@MikevHoenselaar
Mentor
1,5 jaar
Docent
4 jaar
Growth Marketeer
9 maanden

4. Deep Dive GTM |@MikevHoenselaar

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

6. 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

7. 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

8. 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

9. Deep Dive GTM |@MikevHoenselaar

12. 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

13. 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

14. Deep Dive GTM |@MikevHoenselaar

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

16. Deep Dive GTM |@MikevHoenselaar

17. Basisstructuur
Google Tag Manager

18. Deep Dive Analytics |

19. Deep Dive Analytics |

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

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

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

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

24. Triggers
vertellen tags
wanneer ze dingen
moeten doen
@MikevHoenselaar

25. 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.

26. Tour GTM
Variabelen, Triggers, Tags

27. Deep Dive GTM |@MikevHoenselaar

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

29. <script>
dataLayer = [];
</script>
@MikevHoenselaar

30. <script>
dataLayer = [{
'pageCategory': 'signup',
'visitorType': 'high-value'
}];
</script>
@MikevHoenselaar

31. Plaats de dataLayer VOOR de
GTM container in je code!

32. Debugging
@MikevHoenselaar

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

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

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

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

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

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

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

41. 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 als je
inlogt bij Analytics onder je eigen studentnummer.
7. Klik op
@MikevHoenselaar
Voorbeeld!

42. 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.
2

43. 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
4. Kies bij Invoervariabele {{Page Hostname}}
5. Klik op
6. Vul bij Invoer de URL van je website in. Dit is in dit geval de URL op
onlineboswachters.nl waar de opdrachten staan.
7. Vul bij Uitvoer {{GAID}}
(je kunt ook op klikken) , herhaal dit voor elk domein waar jouw Google
Analytics ingeladen wordt.
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

44. Deep Dive GTM |
Et voila!
@MikevHoenselaar
Voeg een rij toe
voor elk domein
dat je hebt waar
dezelfde Google
Analytics property
ingeladen wordt.

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

46. 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. Vink ‘Overschrijven…’ aan.
8. Vul bij Tracking-ID {{GAID}} in klik op en kies dan voor GAID.
9. Klik op bij Triggers
10. Kies hier voor All Pages.
11. Klik dan op
12. Done, GA zal nu op elke pagina ingeladen worden en een Pageview afvuren.
Het standaard GA event.
Stappen om GA toe te voegen
@MikevHoenselaar

47. Deep Dive GTM |
Je zag net ook een optie:
Je hebt net voor overschrijven gekozen. Dit is niet altijd even handig. GTM biedt
nu een Google Analytics Settings Variabele.
Ga maar eens bij Variabelen kijken om te zien wat je dan in moet stellen.
Vooral erg handig als je op 1 plek Google Analytics instellingen wilt beheren.

48. Deep Dive GTM |
Je kunt er voor kiezen om altijd een {{GAID}} in te vullen als je iets met een
Google Analytics tag wilt, of de Google Analytics Settings Variabele gebruiken.
Mijn voorkeur heeft het op de Settings Variabele te gebruiken in
productieomgevingen.
In alle opdrachten hierna gebruik ik toch de {{GAID}} variabele en dus zul je zien
dat je iets moet Overschrijven.
Als je de Google Analytics Settings variabele gebruikt hoef je dus dat niet te doen
en alleen die variabele te selecteren.

49. 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

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

51. Deep Dive GTM |
Kun je jezelf niet in Real Time rapportage
terugvinden?
Controleer dan:
● De URL van de test URL (https://tti.onlineboswachters.nl/gtmob/9/)
● Geen [] in de URL, dus niet tti.onlineboswachters.nl/gtmob/[9]
● Of Debug scherm ingeladen wordt inclusief oranje Preview balk in GTM
● Of je in de juiste Dataweergave in Google Analytics kijkt, let op je
studentnummer
● Of je in GTM in de juiste container
hebt gewerkt
Was het een van deze 5 dingen?

52. Hotjar inladen
Het gaat hier om een stukje custom HTML
4

53. Deep Dive GTM |
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘CU - Hotjar’ in.
4. Klik op bij Tagconfiguratie
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

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

55. 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.

56. Externe links
Heel handig om te zien waar mensen naartoe gaan vanuit jouw website
5

57. 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
4. Vink hier Click URL aan (misschien moet je beetje scrollen om hem te zien)
5. Hij wordt automatisch toegevoegd. Je kunt nu op het kruisje klikken naast
Configure Built-in Variables
6. Waarom is dit belangrijk? Kijk eens goed welke standaard variabelen Google
voor jou kan vullen. Dit scheelt dus zelf variabele maken.
Stappen om externe link kliks te meten
@MikevHoenselaar

58. Pas op!
met alle ingebouwde variabelen aanvinken. Elke
aangevinkte variabele wordt bij elke actie van de
bezoeker geprobeerd te vullen of updaten, oftewel
kost extra tijd.
TOP
TIP

59. 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.
4. Klik op bij Tagconfiguratie
5. Kies voor Universal Analytics
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
10. Vul bij Tracking-ID {{GAID}} in klik op en kies dan voor GAID.
11. Klik op bij Triggers
12. Kies hier het plusje + rechtsboven
13. Zie volgende slide

60. Deep Dive GTM |
1. Trigger type kies je voor Clicks - Just 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 Wait for Tags. Als je hier 2000
milliseconden in zet dan wacht GTM maximaal 2s met echt op de link klikken
totdat deze tag uitgevoerd is. Voor externe links meetbaar maken kan dit dus
erg handig zijn.
3. Wanneer willen we deze Trigger activeren? Niet op alle kliks. Hiervoor
moeten we iets slimmers maken.
4. Je kiest hier voor Some Clicks. Hiervoor zetten we de eerste dropdown op
Click URL. Dan kiezen we bij ‘This trigger fires on’: Some Link Clicks, want we
willen het alleen bij externe links clicks.
Stappen om externe link kliks te meten (vervolg)
@MikevHoenselaar

61. Deep Dive GTM |
1. Zie hierboven wat je in moet vullen. We willen alle links die niet naar
onlineboswachters.nl gaan meten. Zie je ook de staan, dat is omdat we
gebruik maken van een RegEx, oftewel reguliere expressie. Een ‘escapet’
het volgende karakter, wat nodig is omdat de punt een speciale betekenis
heeft als reguliere expressie. Maar je had ook ‘bevat’ in de middelste kolom
kunnen kiezen en dan heb je geen RegEx nodig.
2. Klik daarna op Opslaan.
Stappen om externe link kliks te meten (vervolg)
@MikevHoenselaar
daarom heb ik
je de RegEx
cursus
laten doen :)

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

63. Deep Dive GTM |
Stappen om mailadressen te meten
@MikevHoenselaar
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - email address click’ in.
4. Klik op bij Tagconfiguratie
5. Kies voor Universal Analytics
6. Track type zet je op Event
7. Je kunt nu de parameters instellen. Zet deze als volgt:
(Category: Link Click Action: Mailadres Label: {{Click URL}})
8. Check dat Non-Interaction op False staat
9. Selecteer de gemaakte Google Analytics Settings variabele
10. Vul bij Tracking-ID {{GAID}} in klik op en kies dan voor GAID.
11. Klik op bij Triggers
12. Kies hier het plusje + rechtsboven
13. Zie volgende slide

64. Deep Dive GTM |
1. Trigger type kies je voor Clicks - Just Links
We hoeven niet alle kliks te meten om mailadressen te meten, alleen
<a></a>, dus echte links.
2. Vink Wait for Tags aan en zet hier 2000 milliseconden in.
3. Vink ook ‘Check Validation’ aan. Dit is zodat GTM checkt of het een valide link
click was.
4. Wanneer willen we deze Trigger activeren?
5. We starten met alle pagina’s. Hiervoor zetten we de eerste dropdown op
Page URL. De tweede dropdown selecteren we op ‘matches RegEx’ en het
laatste invulveld er rechts naast wordt dan (.*).
6. heb je geen Page URL er bij staan, kijk dan bij stappenplan ‘Externe Links’
7. Dan kiezen we bij ‘This trigger fires on’: Some Link Clicks, want we willen het
alleen bij e-mailadressen.
Stappen om mailadressen te meten (vervolg)
@MikevHoenselaar

65. Deep Dive GTM |
1. Zie hierboven wat je in moet vullen. We willen alle links met een mailto: er in
2. Klik daarna op Opslaan.
Stappen om mailadressen te meten (vervolg)
Zoals je ziet heb je bijna
allemaal dezelfde stappen
uitgevoerd. Als je voelt dat
je dat vaker doet, GTM
heeft een kopieerfunctie
van een Tag of Trigger.
@MikevHoenselaar

66. Deep Dive GTM |
Zou je nu ook telefoonnummers meetbaar kunnen
maken?
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.
@MikevHoenselaar

67. PDF Downloads
Links naar PDF bestanden op je website meetbaar maken, ontzettend
handig!
7

68. Deep Dive GTM |
Stappen om downloads te meten
@MikevHoenselaar
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - File Download click’ in.
4. Klik op bij Tagconfiguratie
5. Kies voor Universal Analytics
6. Track type zet je op Event
7. Je kunt nu de parameters instellen. Zet deze als volgt:
(Category: Link Click Action: Download Label: {{Click URL}})
8. Check dat Non-Interaction op False staat
9. Selecteer de gemaakte Google Analytics Settings variabele
10. Vul bij Tracking-ID {{GAID}} in klik op en kies dan voor GAID.
11. Klik op bij Triggers
12. Kies hier het plusje + rechtsboven
13. Zie volgende slide

69. Deep Dive GTM |
1. Trigger type kies je voor Clicks - Just Links
We hoeven niet alle kliks te meten om downloads te meten, alleen <a></a>,
dus echte links.
2. Vink Wait for Tags aan en zet hier 2000 milliseconden in.
3. Vink ook ‘Check Validation’ aan. Dit is zodat GTM checkt of het een valide link
click was.
4. Wanneer willen we deze Trigger activeren?
5. We starten met alle pagina’s. Hiervoor zetten we de eerste dropdown op
Page URL. De tweede dropdown selecteren we op ‘matches RegEx’ en het
laatste invulveld er rechts naast wordt dan (.*).
6. heb je geen Page URL er bij staan, kijk dan bij stappenplan ‘Externe Links’
7. Dan kiezen we bij ‘This trigger fires on’: Some Link Clicks, want we willen het
alleen bij e-mailadressen.
Stappen om downloads te meten (vervolg)
@MikevHoenselaar

70. Deep Dive GTM |
1. Zie hierboven wat je in moet vullen. We willen alle links met een de extensie
pdf, doc, docx, xls. (Het is tegenwoordig Click URL)
2. Klik daarna op Opslaan.
Stappen om downloads te meten (vervolg)
@MikevHoenselaar

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

72. Deep Dive GTM |
Stap 1: Maak meetbaar in Google Analytics dát de accordeon aangeklikt is.
Gelukt?
Stap 2: Maak meetbaar in Google Analytics wélke stap aangeklikt is
(Click Text)
Gelukt?
In 2 stappen
@MikevHoenselaar

73. Deep Dive GTM |
Hier gebeurd iets interessants bij deze opdracht.
https://monosnap.com/file/HsaJSNcnc4xVlm3rxNmAdGJJq1Cg0N
Ik laat in de video zien wat het verschil is.
De Just Links is dus een event dat ALLEEN geactiveerd wordt als je op links klikt,
dus <a></a>.
All Elements activeert bij ALLE kliks. Dus ook als je in het witte of titels klikt. Dat
heb je nodig bij de accordeon namelijk :). Dit is een <div>.

74. Deep Dive GTM |
Stappen om accordeon te meten
@MikevHoenselaar
1. Klik op Tags
2. Klik op
3. Vul ipv ‘Naamloze tag’ er ‘UA - Event - Accordion click’ in.
4. Klik op bij Tagconfiguratie
5. Kies voor Universal Analytics
6. Track type zet je op Event
7. Je kunt nu de parameters instellen. Zet deze als volgt:
(Category: Click Accordion Action: ?? Label: ??)
8. Check dat Non-Interaction op False staat
9. Selecteer de gemaakte Google Analytics Settings variabele
10. Vul bij Tracking-ID {{GAID}} in klik op en kies dan voor GAID.
11. Klik op bij Triggers
12. Kies hier het plusje + rechtsboven
13. Zie volgende slide

75. Deep Dive GTM |
1. Trigger type kies je dus nu niet voor Clicks - Just Links maar voor All
Elements. 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 elementen.
4. Zorg dat Click Classes standaard bijgehouden worden door GTM, je kunt dan
de variabele {{Click Classes}} gebruiken. Elke keer als er geklikt wordt zal
GTM de classes van dat element opslaan.
5. Zie hierboven wat je in moet vullen. We willen alleen als je op een stap klikt
dat het Event naar GA gaat.
6. Klik daarna op Opslaan.
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

76. Scroll tracking
Hoe ver scrollt iemand op een pagina naar beneden in Google Analytics
krijgen
9

77. 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.

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

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

80. 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

81. Deep Dive GTM |
Visualiseren van je GTM
www.gtmtools.com

82. Deep Dive GTM |
Further reading
MF’ing vette blog
https://www.simoahava.com/
MF’ing vet bureau
http://www.lunametrics.com/labs/recipes/

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

84. Deep Dive GTM |
Nu jullie!