Een training van een middag voor studenten van The Talent Institute om up to speed te raken met Google Tag Manager. Gegeven door Mike van Hoenselaar.

1. Deep Dive

2. @MikevHoenselaar
mike@onlineboswachters.nl

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

4. Deep Dive GTM |@MikevHoenselaar

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

6. Deep Dive GTM |
Wat staat er vandaag op het programma
09:00 - 10:00 Theorie
1. Waarom een Tag manager
2. Tour GTM
3. Variabelen, Triggers en Tags
4. dataLayer
@MikevHoenselaar

7. Deep Dive GTM |
10:30 - 12:30 Practical
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. We gaan er vanuit dat je al klein
beetje basiskennis van Google Tag
Manager hebt
Basis Course?
Zie http://vruc.ht/gtmcourse

10. Deep Dive GTM |
TAG MANAGEMENT?

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

14. 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 stijle leercurve
@MikevHoenselaar

15. Deep Dive GTM |@MikevHoenselaar

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

17. Deep Dive GTM |
1 oktober 2012 aangekondigd
@MikevHoenselaar

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. Basisstructuur
Google Tag Manager

24. Tags
“Doen dingen”
@MikevHoenselaar

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

26. Variabelen
sturen waardes
terug aan Triggers
en Tags.
@MikevHoenselaar

27. Tour GTM
Variabelen, Trigger, Tag

28. Deep Dive GTM |@MikevHoenselaar

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

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

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

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

33. Debugging
@MikevHoenselaar

34. @MikevHoenselaar

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

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

38. Einde deel 1
Tot over 15 minuten!

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

40. Deep Dive GTM |
Put it into
practice!
@MikevHoenselaar

41. Deep Dive GTM |
http://tti.onlineboswachters.nl/ss17gtmjuli/[studentnummer]/
inlog: workshopstti@gmail.com
ww: [secret]W0rkSh0ps2017
https://tagmanager.google.com
@MikevHoenselaar

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

43. Deep Dive GTM |
Stappen om een variabele toe te voegen
1. Klik op Variabelen
2. Klik op
3. Vul ipv ‘Naamloze variabele’ er ‘GAID’ in.
4. Klik op
5. Kies als type Constant (onder Hulpprogramma’s)
6. Vul bij waarde ‘UA-102560011-[studentnummer]’ in
7. Klik op
@MikevHoenselaar

44. Toevoegen van een variabele 2
Dit keer maken we een lookup-tabel
2

45. Deep Dive GTM |@MikevHoenselaar

46. 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
5. Kies bij Invoervariabele {{Page Hostname}}
6. Klik op
7. Vul bij Invoer je URL van je website in:
http://tti.onlineboswachters.nl/ss17gtmjuli/[studentnummer]/
8. Vul bij Uitvoer {{GAID}} of UA-102560011-[studentnummer]
(je kunt ook op klikken)
9. Je kunt gebruik maken van een standaardwaarde, zodat de variabele altijd
gevuld wordt.
10. Klik op
@MikevHoenselaar

47. Deep Dive GTM |
Et voila!
@MikevHoenselaar

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

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

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

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

52. 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. Klik op bij Triggers
7. Kies hier voor All Pages.
8. Klik dan op
9. Done, Hotjar zal nu op elke pagina ingeladen worden.
Stappen om custom HTML te plaatsen
@MikevHoenselaar

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
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
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 (.*).
7. heb je geen Page URL er bij staan, kijk dan bij stappenplan 2 slides eerder.
8. 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.
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?
Wat is de HTML code van een link van een telefoonnummer?
@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.
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 |
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 Action: Accordion Opdracht 8 Label: {{open_dicht}})
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

69. 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’: Some Link Clicks, want we willen het
alleen bij de accordeon.
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

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

71. 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?
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?
Stappen om accordeon te meten (vervolg)
@MikevHoenselaar

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

73. Deep Dive GTM |
Scroll Tracking
http://www.lunametrics.com/labs/recipes/scroll-tracking/

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

75. Deep Dive GTM |
Video Tracking
http://www.lunametrics.com/labs/recipes/youtube-tracking/

76. 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
● Form tracking
● Pre-populate formulieren
● Verrijk zoekmachineresultaten (met oa rich snippets en SERO zoekbalk)
● 404’s makkelijk meetbaar maken
● etc, etc, etc

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

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

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

80. Deep Dive GTM |
Nu jullie!