Google Tag Manager

Google Tag Manager

Zie ook Google Analytics

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.

Tags

Hieronder een overzicht van de tags die je aan kan maken. Meestal wordt GTM gebruikt om:
– Een GA4 measeurement id op iedere pagina van je website te zetten
– Een GA4 gebeurtenis aan te maken met een specifieke trigger
– Specifieke code weer te geven op een of alle pagina’s
– Google Ads metingen te activeren op alle pagina’s of een specifiek conversiedoel.

  • Google Analytics
  • Google Ads
  • Aangepaste HTML
    • Facebook pixel
    • Linkedin
    • Microsoft Ads
    • Pinterest
    • etc…
  • Aangepaste Afbeelding
    • Om een trackingpixel te laden voor een marketingtool zoals Google Analytics of Facebook Pixel.
    • Om een beeld te laden van een externe bron, zoals een afbeeldingsbibliotheek of een social media-netwerk.
    • Om een interactieve afbeelding te laden, zoals een banner of pop-up.

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 IDVerwijst 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 ClassesVerwijzen 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 ElementVerwijst naar het specifieke element op een webpagina waarop geklikt wordt. Dit kan bijvoorbeeld een knop, koppeling of ander interactief element zijnHet gehele css waarden-pad. Notatie met # en .
Maar ook met , of >
Zelfs mogelijk om een wildcard * toe te voegen.
Click TargetVerwijst naar het doel of het specifieke gebied op een webpagina waarop wordt geklikt. Dit kan bijvoorbeeld een knop, koppeling of ander interactief element zijnBijvoorbeeld “_blank”
<a target=”_blank|_self|_parent|_top|framename“>
Click TextVerwijst 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 URLVerwijst 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 HostnameURL vb. ziemo.nl
Page PathURL vb. /over-ons/
Page URLURL vb. https://ziemo.nl/over-ons/
ReferrerHTTP-verwijzingsbronVoorgaande pagina
   
EventAangepaste gebeurtenis 
HTML IDVerschillende 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 ClassesVariabele voor gegevenslaag 
Form ElementVariabele voor gegevenslaag 
Form IDVariabele voor gegevenslaag 
Form TargetVariabele voor gegevenslaag 
Form TextVariabele voor auto-gebeurtenis 
Form URLVariabele 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 Classesis gelijk aanparagraaf-test
Page URLis gelijk aanhttps://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

  1. Via een bedankpagina met paginaweergave
  2. Via “formulierverzending” op bijvoorbeeld een specifieke pagina
  3. 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
Scroll naar boven