Masterclass voor The Talent Institute met 20% theorie en 80% praktijk. Je leert hoe je Google Tag Manager efficient kan gebruiken, maar ook direct praktisch hoe je er waarde uit kunt halen. Je doet het voornamelijk allemaal zelf. Hoe krijg je bijvoorbeeld data in Google Analytics via Google Tag Manager? Of hoe zorg je dat e-mailadressen klikken gemeten worden? Of externe links? Heel handig te doen met GTM.

1. Deep Dive

2. @MikevHoenselaar
mike@onlineboswachters.nl

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

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 |
1 oktober 2012 aangekondigd
@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 |
Put it into
practice!
@MikevHoenselaar

39. Deep Dive GTM |
http://tti.onlineboswachters.nl/ssgtm/[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

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 |
Stappen om een lookup-tabel te maken
1. Klik op Variabelen
2. Klik op
3. Vul ipv ‘Naamloze variabele’ er ‘GAIDLU’ in.
4. Klik op en kies voor Type Lookup Table
5. Kies bij Invoervariabele {{Page Hostname}}
6. Klik op
7. Vul bij Invoer de URL van je website in. Dit is in dit geval de URL op
onlineboswachters.nl waar de opdrachten staan.
8. Vul bij Uitvoer {{GAID}}
(je kunt ook op klikken) , herhaal dit voor elk domein waar jouw Google
Analytics ingeladen wordt./
9. Je kunt gebruik maken van een standaardwaarde, zodat de variabele altijd
gevuld wordt.
10. Klik op
@MikevHoenselaar

44. Deep Dive GTM |
Et voila!
@MikevHoenselaar

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:
Ga maar eens bij Variabelen kijken om te zien wat je dan in moet stellen.
Welke optie ga jij in het vervolg gebruiken?

48. Controleer dat je ook GA
uit je code haalt als je
GTM en GA gaat doen
TIP

49. Hotjar inladen
Gaat hier om een stukje custom HTML
4

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

51. Hotjar heeft inmiddels
een eigen tag :). Kun je
hem vinden?
TIP

52. Deep Dive GTM |
Je vindt deze onder Tags. Dan hoef je geen custom HTML te gebruiken, maar
alleen je account ID in te vullen.

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

54. 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.
Stappen om externe link kliks te meten
@MikevHoenselaar

55. Deep Dive GTM |
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
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. Vink ‘Overschrijven…’ aan.
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
Stappen om externe link kliks te meten (vervolg)
@MikevHoenselaar

56. 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. Reminder: Dit werkt alleen bij links die in nieuw venster openen.
3. Vink Wait for Tags aan en zet hier 2000 milliseconden in.
4. Vink ook ‘Check Validation’ aan. Dit is zodat GTM checkt of het een valide link
click was.
5. Wanneer willen we deze Trigger activeren?
6. 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 ‘(.*)’. <- heb je de cursus
Reguliere expressies gedaan? ;-)
7. heb je geen Page URL er bij staan, kijk dan bij stappenplan 2 slides eerder
voor voorbeeld van 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

57. 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 regulier expressie. Een ‘escapet’ het
volgende karakter, wat nodig is omdat de punt een speciale betekenis heeft
als reguliere expressie.
2. Klik daarna op Opslaan.
Stappen om externe link kliks te meten (vervolg)
@MikevHoenselaar

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

59. Deep Dive GTM |
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. Vink ‘Overschrijven…’ aan.
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
Stappen om mailadressen te meten
@MikevHoenselaar

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

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

62. 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 code is op jouw tti.onlineboswachters.nl in de HTML terug te vinden.
@MikevHoenselaar

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

64. Deep Dive GTM |
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. Vink ‘Overschrijven…’ aan.
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
Stappen om downloads te meten
@MikevHoenselaar

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

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

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

68. 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?
Stap 3: Nu komt het moeilijkste stuk, doe dit alleen als je vertrouwder bent met
Javascript. Maak meetbaar in Google Analytics of de accordeon open of dicht is
geklapt in Google Analytics.
Hier komt variabele {{open_dicht}} pas bij kijken.
In 3 delen
@MikevHoenselaar

69. Deep Dive GTM |
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. Vink ‘Overschrijven…’ aan.
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
Stappen om accordeon te meten
@MikevHoenselaar

70. 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 activeerd bij ALLE kliks. Dus ook als je in het witte klikt. Dat heb je
nodig bij de accordeon namelijk :).

71. 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. 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’
hoe je zelf variabelen toevoegt
7. Dan kiezen we bij ‘This trigger fires on’: All Elements
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

72. Deep Dive GTM |
1. 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.
2. Zie hierboven wat je in moet vullen. We willen alleen als je op een stap klikt
dat het Event naar GA gaat.
3. Klik daarna op Opslaan.
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

73. Deep Dive GTM |
1. We weten nu in GA DAT er geklikt wordt, we weten nog niet of het geopend
wordt, of gesloten. Hoe zou je dat aanpakken? Dit is stap 3.
2. Als je dit opgelost hebt, dan heb je in GA duidelijk hoe vaak er op open en
hoe vaak er op sluiten geklikt is. Maar je weet nog niet welke. Hoe zou je nou
in GA kunnen krijgen welke stap er geklikt wordt? Doe dit alleen als je
opdracht 9 en 10 gedaan hebt.
Dit mag je zelf proberen op te lossen :).
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

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

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

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

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

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

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

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

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

82. Deep Dive GTM |
Nu jullie!