Google Tag Manager

Belangrijke Gebeurtenissen die je vrijwel altijd wilt meten zijn bijvoorbeeld:

Succesvol ingevulde formulieren (per formulier)
(Offerte, contact, informatieaanvraag, brochureaanvraag, belmeterug, opendag, demo, etc)
- Met bedanktpagina
- Zonder bedanktpagina
Registratie nieuwe gebruiker
Klikken op elementen
(e-mailadressen, telefoonnummers, route, social kanalen)
Toevoegen van producten aan het winkelmandje (E-commerce tracking)
Verwijderen van producten uit het winkelmandje (E-commerce tracking)
Plaatsen van een bestelling (E-commerce tracking)

Ik moet ook nog alle tags van mijn verschillende websites nalopen en documenteren a la GA pagina met uitgewerkte voorbeelden.

Triggers

Activerende triggers

Welke van de meest gebruikte zijn er en hoe kan je ze gebruiken inclusief voorbeelden.

Klik

Alle elementen / Sommige elementen
Bijvoorbeeld: link klik om een nieuwe pagina te openen, een knop klik om een actie uit te voeren of een afbeelding klik om een pop-up te openen.
Alleen links / Sommige links
Wordt voornamelijk gebruikt bij externe links.

Paginaweergave

Paginaweergave / Sommige paginaweergaven
Meest gebruikt om een bepaalde pagina te meten zoals een bedanktpagina.
DOM klaar
De DOM is een objectstructuur die alle elementen van een webpagina bevat, zoals teksten, afbeeldingen, links en formulieren. Het is de weergave inspect functie. Dit is anders dan de broncode, want hierin kan je zaken aanpassen en dat is de dom. De dom is later dan de pageview en hier kan je dus elementen lezen die samengesteld worden uit css, html en javascript.
Dom ready zou dus kunnen werken bij CF7 waarbij de bedanktmelding op dezelfde pagina pas later getoond wordt. Maar dat is niet zo, want er wordt bij het versturen van het formulier niet weer een nieuwe dom gestart… Er wordt dmv ajax een nieuw element getoond, geen reload van de pagina gedaan.
Meer info over de pagina structuur: https://youtu.be/BU0tg3ohDGk?si=pxvesRHymq4F-L9Z
Meer info over de Dom ready en het dom element (Duidelijke uitleg over hoe te gebruiken)

Betrokkenheid van gebruikers

Formulierverzending
Wordt geactiveerd wanneer een gebruiker een formulier op een webpagina verzendt. Deze trigger kan worden gebruikt om tags te activeren die informatie uit het formulier verzamelen, zoals de naam, het e-mailadres of het telefoonnummer van de gebruiker.
Zichtbaarheid van element
Wordt geactiveerd wanneer een element op een webpagina zichtbaar wordt in het kijkvenster van de webbrowser. Deze trigger kan worden gebruikt om tags te activeren wanneer een gebruiker een bepaalde sectie van een pagina bekijkt.
Meer van measureschool

N.B. Bovenstaande werken ongeveer hetzelfde. Voor CF7 werkt de eerste gelijk, de tweede krijg ik vooralsnog niet werkend. Wellicht komt dit door een nieuwe methode van CF7.
Wanneer ik een element op een lange pagina maak, komt hij wel gewoon erbij.

Variabelen

Variabelen worden gebruikt in zowel triggers als tags:

In triggers wordt een variabele gebruikt om filters te definiëren die aangeven wanneer een bepaalde tag moet worden geactiveerd (voorbeeld: activeer een trigger wanneer de url-variabele ‘example.com/index.html‘ bevat).
In tags worden variabelen gebruikt om dynamische waarden vast te leggen (voorbeeld: geef een transactiewaarde en product-ID door aan een tag voor het bijhouden van conversies).

Hoe sla je je Metings-ID op in een variabele?

Ingebouwde variabelen:

Klik trigger variabelen
Click ID	Verwijst naar de unieke identificatie van het element waarop geklikt wordt op een webpagina. Dit wordt gebruikt voor het bijhouden van klikgebeurtenissen wanneer een element een specifieke ID heeft.	De # css-waarde, notatie zonder #
Click Classes	Verwijzen naar specifieke klassen van elementen op een webpagina waarop geklikt wordt. Ze worden gebruikt om klikgebeurtenissen te volgen wanneer er geen unieke ID’s beschikbaar zijn.	De . css-waarde, notatie zonder .
Click Element	Verwijst naar het specifieke element op een webpagina waarop geklikt wordt. Dit kan bijvoorbeeld een knop, koppeling of ander interactief element zijn	Het gehele css waarden-pad. Notatie met # en . Maar ook met , of > Zelfs mogelijk om een wildcard * toe te voegen.
Click Target	Verwijst naar het doel of het specifieke gebied op een webpagina waarop wordt geklikt. Dit kan bijvoorbeeld een knop, koppeling of ander interactief element zijn	Bijvoorbeeld “_blank” <a target=”_blank\|_self\|_parent\|_top\|framename“>
Click Text	Verwijst naar de tekst van het specifieke element waarop wordt geklikt op een webpagina. Dit wordt vaak gebruikt om klikgebeurtenissen te volgen op basis van de tekst die op een knop, link of ander interactief element staat.	De daadwerkelijke tekst in het element.
Click URL	Verwijst naar de URL van de webpagina waarnaar wordt verwezen wanneer erop wordt geklikt. Dit wordt gebruikt om klikgebeurtenissen te volgen op basis van de bestemming van de link of knop op de webpagina.”	De doelpagina url.
Pagina weergave variabelen
Page Hostname	URL	vb. ziemo.nl
Page Path	URL	vb. /over-ons/
Page URL	URL	vb. http://ziemo.local/over-ons/
Referrer	HTTP-verwijzingsbron	Voorgaande pagina

Event	Aangepaste gebeurtenis
HTML ID	Verschillende dingen geprobeerd, nog niet werkend De variabele HTML ID haalt het ID-attribuut van een element op, terwijl de click ID variabele het ID van het element ophaalt dat een gebruiker heeft aangeklikt. Het kan worden gebruikt om een element te selecteren op basis van het ID-attribuut, ongeacht of het element is aangeklikt of niet. De click ID variabele kan alleen worden gebruikt om een element te selecteren dat is aangeklikt. (Vaak gebruikt bij javascript)	Je kan de variabele HTML ID gebruiken om de inhoud van een pagina aan te passen, zoals wanneer je de tekst van een knop wilt wijzigen of een formulierveld wilt toevoegen.
Form variabelen Dit zijn precies hetzelfde als de Click-variabelen. Ik ben niet zeker waarom deze bestaan. Afgezien dat deze logischer lijken bij een formulier.
Form Classes	Variabele voor gegevenslaag
Form Element	Variabele voor gegevenslaag
Form ID	Variabele voor gegevenslaag
Form Target	Variabele voor gegevenslaag
Form Text	Variabele voor auto-gebeurtenis
Form URL	Variabele voor gegevenslaag

Use cases

Hieronder een test die ik aan het uitvoeren geweest ben om te komen tot de juiste click class.

Klik trigger variabelen
Click Classes	is gelijk aan	paragraaf-test

Wat niet werkt is: span.paragraaf-test .paragraaf-test Hiermee kan ik dus ook geen class opbouwen… Hoe het wel werkt is: Eerst wordt de “click” gemeten en daarna de “link click”. De click gaat dus af op het laagste element. Je kan geen hogere selecteren. N.B. Dit komt duidelijk naar voren in de “variables”-tab in GTM voorbeeld overzicht. Dan de volgende stap! Click element Het meest gebruikte scenario is “samen met CSS-selectors”. Als je bijvoorbeeld klikken op specifieke elementen van een website wilt volgen, maar geen van deze elementen heeft unieke ID’s, kunnen CSS-selectors een oplossing zijn.

Klik trigger variabelen
Click Element	matches css selector	span.paragraaf-test

Wat werkt wel: .paragraaf-test span.paragraaf-test div.panel-test > div.panel-content-test > div.panel-knop-test > a.panel-link-test > span.paragraaf-test div.panel-test, span.paragraaf-test (de komma betekent of) .panel-knop-test * (de * zorgt ervoor dat alles binnen het element ook gepakt wordt) Wat werkt niet: paragraaf-test (Er staat geen . voor) div.panel-test > .paragraaf-test (Dit is niet het hele pad en de shortcut werkt zo niet) div.panel-test > span.paragraaf-test (Toevoegen van span maakt niet uit….) Maar werkt “matches css selector” dan niet ook met de Click Class? Nee! Werkt alleen met “Click Element”. Meer info op: https://www.analyticsmania.com/post/click-element-variable-in-google-tag-manager/#what-is-click-element-variable Meer over de wildcard css selector: https://www.simoahava.com/analytics/use-wildcard-css-selectors-with-all-elements-triggers/

				
					<style>
    div.panel-test {background:#ff0000;padding:10px;width:180px;}
    div.panel-content-test {background:#faf;padding:10px;}
    div.panel-knop-test {background:#000;text-align:center;}
    
    .panel-test .panel-content-test .panel-knop-test a.panel-link-test {color:#fff;}
    .panel-test .panel-content-test .panel-knop-test a.panel-link-test:hover {color:#ff0000;}
    div.panel-test span.paragraaf-test {border:solid 1px #fff;}
</style>

<div class="panel-test">
    <div class="panel-content-test">
        <div class="panel-knop-test">
            <a class="panel-link-test" href="https://richarddegraaf.nl/overzicht/" target="_blank">
                <span class="paragraaf-test">Mijn knop</span></a>
        </div>
    </div>
</div>

Hieronder een voorbeeld van de datalaag en de variabelen die hierin naar boven komen. Het spreekt eigenlijk voor zich. Als je wilt weten of je het juiste css element selecteer dan geef je onderstaande in. Vervolgens krijg je wel een output, dan gaat het goed en zonder doe je iets verkeerd.

				
					document.querySelector("your_css_selector")

Nog meer tests

Een element selecteren op een bepaalde pagina, andere pagina’s werkt deze dus niet.

Klik trigger variabelen
Click Classes	is gelijk aan	paragraaf-test
Page URL	is gelijk aan	https://mijnmedia.online/website/sitemap/

Een element selecteren met alleen maar classes. Hierbij selecteer ik 1 bepaalde pagina obv de css selctor (dit kan ook een bepaald element zijn). Vervolgens pak ik een waarde die op meerdere pagina’s terug komt.

Klik trigger variabelen
Click Element	matches css selector	.page-id-714 *
Click Element	matches css selector	.panel-knop-test *

Formulier tracking

Via een bedankpagina met paginaweergave
Via “formulierverzending” op bijvoorbeeld een specifieke pagina
Via “zichtbaarheid van element”, dan vul je de css selector in en kan je vervolgens ook nog de trigger op een specifieke pagina activeren.

Meer informatie via measureschoool, 3 technieken, of cf7 meten.

Enkele Uitgewerkte voorbeelden

Kliks
Naam	Gebeurtenisnaam	Type trigger	Variabele	Match type	Waarde
Click – Facebook	facebook_click	klik – sommige klikken	Click Classes	bevat	fa-facebook-f
Click – Instagram	instagram_click	klik – sommige klikken	Click Classes	bevat	fab fa-instagram
Click – Linkedin	linkedin_click	klik – sommige klikken	Click Classes	bevat	fab fa-linkedin
Click – Youtube	youtube_click	klik – sommige klikken	Click Classes	bevat	fab fa-youtube
Click – Emailadres	emailadres_click	klik – sommige klikken	Click Classes	bevat	email-addres
Click – Mail	mailto_click	klik – sommige klikken	Click Text	bevat	info@…..nl
Click – Telefoonnr	telefoonnr_click	klik – sommige klikken	Click Text	bevat	06-123456789
Click – Route	route_click	klik – sommige klikken	Click Text	bevat	Routebeschrijving
Click – Tarieven	tarieven_click	klik – sommige klikken	Click Text	bevat	Tarieven

Pageviews
Naam	Gebeurtenisnaam	Type trigger	Variabele	Match type	Waarde
GA4 – Contact – Bedankt	contact_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/contact-bedankt/
GA4 – Informatie aanvraag – Bedankt	informatie_aanvraag_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/informatie-aanvragen-bedankt/
GA4 Event – Brochure aanvragen – Bedankt	brochure_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/landingspaginas/bedanktpagina-brochure/
GA4 Event – Open dagen – Bedankt	opendag_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/landingspaginas/bedanktpagina-open-dag/
GA4 Event – Rondleiding aanvragen – Bedankt	rondleiding_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/landingspaginas/bedanktpagina-rondleiding/
GA4 Event – Terugbelafspraak – Bedankt	terugbelafspraak_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/landingspaginas/bedanktpagina-bel-mij-terug/
GA4 Event – Demo – Bedankt	demo_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/bedankt-afspraak/
GA4 Event – Offerte – Bedankt	offerte_bedankt	paginaweergave – sommige paginaweergaven	Page Path	is gelijk aan	/bedankt-offerte/

Zichtbaarheid van element
Naam	Gebeurtenisnaam	Type trigger	Variabele	Match type	Waarde
GA4 Event – Offerte – (Stap 1)	stap1_offerte	zichtbaarheid van element (1% – css kiezer – DOM-wijzigingen waarnemen	Page URL	bevat	offerte-aanvragen
GA4 Event – Offerte – (Stap 2)	stap2_offerte	zichtbaarheid van element (1% – css kiezer – DOM-wijzigingen waarnemen	Page URL	bevat	offerte-aanvragen
GA4 Event – Offerte – (Stap 3)	stap3_offerte	zichtbaarheid van element (1% – css kiezer – DOM-wijzigingen waarnemen	Page URL	bevat	offerte-aanvragen
GA4 Event – Offerte – (Stap 4)	stap4_offerte	zichtbaarheid van element (1% – css kiezer – DOM-wijzigingen waarnemen	Page URL	bevat	offerte-aanvragen

Google Tag Manager

Google Tag Manager

Tags

Triggers

Variabelen

Use cases

Nog meer tests

Formulier tracking

Enkele Uitgewerkte voorbeelden