Kennis - Het online marketing blog van Tribal

Online marketing is een vak apart en een wereld die snel verandert. Wij laten ons dagelijks inspireren door de nieuwste ontwikkelingen, tips & tools en allerlei nuttige toepassingen. Hieronder lees je welke kennis wij in huis hebben.

Geplaatst door

15 oktober 2012

Samen met mijn collega's en klanten streef ik graag naar het bereiken en overtreffen van gestelde doelen want, zoals Johan Cruijff al zei: "Zonder doel kun je niet scoren".

Lees meer over mij >>

Google Tag Manager

Door: Paula Heesbeen

Geschatte leestijd: 7 minuten

Ik vind nieuwe dingen altijd leuk, zeker als deze technisch van aard zijn. Toen ik voor het eerst over Google Tag Manager (GTM) hoorde was ik dan ook gelijk enthousiast. Gratis Tag Management software om de implementatie van diverse scripts gemakkelijker te maken. Ik kon mijn geluk niet op! Echter, ik heb geen technische achtergrond en begrijp de basis van JavaScript en PHP. Maar daarmee is het mij wel gelukt om GTM te implementeren op een WordPress test-site. Ik zeg niet dat wat ik hier schrijf de juiste methode is, maar het is wél een methode die werkt.

Ik gebruik op al mijn WordPress websites standaard twee plugins: SEO voor WordPress en Analytics voor WordPress, beiden van Yoast. Geweldige plugins maar de Analytics implementatie op mijn website wilde ik nu gaan vervangen met een Google Tag Manager implementatie. Hoe ging dat?

De basis is echt heel gemakkelijk

Ik was verrast hoe gemakkelijk (en snel) ik de standaard Google Analytics implementatie had vervangen door een GTM implementatie. Deze video legt het ook goed uit maar hieronder vind je de stappen die je moet doorlopen (met meteen een beetje uitleg per stap).

1. Aanmelden & code plaatsen

  • Ga naar https://www.google.com/tagmanager/ en log in met een reeds bestaande Google account (bijvoorbeeld de account die je gebruikt om je Google Analytics data te bekijken).
  • Maak een account
    • Wanneer je nog nooit eerder hebt ingelogd op GTM zul je gelijk in het scherm komen om een account te maken. Anders tref je de knop linksbovenin het scherm.
    • Het account is het hoogste niveau in Google Analytics. Een account kan meerdere containers (zie onder) bevatten.
    • Het beste is om één account per bedrijf te hebben. Maar als je, net als Easy bijvoorbeeld, meerdere cliënten met meerdere bedrijven hebt, is het verstandig om een account per client op te zetten.
  • Maak een container
    • Maak één container per website. In een container zet je straks de tags (bijvoorbeeld Google Analytics, AdWords conversie tracking, etc.) die voor die éne website belangrijk zijn.
    • Het beste is om de container daarom ook de naam van de website te geven. In ons geval bijvoorbeeld eentweetest.nl/tribal/httpdocs.
  • De code
    • Wanneer je het account en de container hebt gemaakt, krijg je de code die op alle pagina’s van je website moet worden gezet. Deze moet direct na de openende <body> tag worden gezet (meer info van Google).

Op dit punt heb ik de Google Analytics plugin (in WordPress) uitgezet maar in andere gevallen zul je deze misschien handmatig moeten verwijderen uit je <head>. Ik ben in mijn WordPress installatie naar /wp-content/themes/themanaam/header.php gegaan en heb daar net na de openende <body> tag het stuk code van GTM gezet.

    • In de code zie je, net als je dat bij een Google Analytics code zou zien, de identifactie voor GTM in de vorm van een accountnummer.
  • Kies een tag om je container te vullen
    • In de volgende stap heb je direct de mogelijkheid om een aantal standaard scripts toe te voegen. De eerste die iedereen zal kiezen (in mijn verwachting) is de Google Analytics code. Je klikt deze aan en hoeft alleen een formulier in te vullen.

2. De Google Analytics code in GTM

De drie voorgaande stappen waren al heel gemakkelijk (en snel klaar) maar wanneer je bij de laatste optie op Google Analytics klikt, krijg je ook een erg gemakkelijke één-na-laatste stap.

  • Geef de tag een naam
    • Hiermee identificeer je de Tag later. Ik vind het fijn om deze beschrijvend te maken, dus bijvoorbeeld ‘standaard GA code’.
  • Tag Type
    • Er zijn een aantal standaard Tag Types. Ik kom hier later nog op terug, maar in dit geval staat Google Analytics al aangevinkt.
  • Web Property ID
    • Je Web Property ID is je UA-code. Je vindt deze door in Google Analytics naar beheer te gaan. Deze staat dan onder je Web Property naam. Kopieer deze in zijn geheel.
  • Track Type
    • Standaard kun je voor Google Analytics in GTM twee track types kiezen. Pageviews en Events. In eerste instantie (voor de standaard installatie) moet je dit op ‘Page Tracking’ laten staan.
  • Firing Rules:
    • Rules in GTM bepalen wanneer een Tag wordt verzonden. De Google Analytics Tag wil je in eerste instantie op alle pagina’s (basis instelling). Deze staat vooraf ingesteld. Klik op ‘Add Rule to Fire Tag’ en klik ‘All Pages’ aan.
  • Onderaan klik je op save

3. Publiceren

‘Klaar!’ dacht ik. Maar er is nog één kleine stap nodig om Google Tag Manager live te zetten. Rechtsbovenin vinden we de knop ‘Create version’. Hiermee maken we een versie van de Tags, Regels en Macros zoals ze op dit moment bestaan en publiceren we deze. We hebben hier ook de mogelijkheid voor een preview, hiermee kun je testen of alles goed werkt en eventueel debuggen. Maar voor de standaard implementatie kun je gerust op ‘Save and Publish’ drukken.

That’s it. Het werkt! Bezoekers naar je site worden gemeten via GTM in GA.

Maar wat nu als je specifieke dingen wilt meten?

Met bovenstaande was ik letterlijk in minder dan 10 minuten klaar. Maar al snel had ik zelf vragen over meer geavanceerde metingen. Standaard kun je in GTM al de volgende scripts als tags toevoegen:

  • Google Analytics
  • AdWords Remarketing
  • AdWords Conversie
  • DoubleClick Floodlight (counter & sales)

Dat betekent dus dat voor implementaties waarin doelen gemeten kunnen worden met unieke url’s en waar eventueel AdWords Remarketing & Conversie codes opstaan redelijk eenvoudig gemigreerd kunnen worden naar GTM.

In Google Analytics bestaan echter ook aangepaste implementaties. E-commerce websites zullen de e-commerce code geïmplementeerd hebben, anderen zullen bezoekersgedrag meten via event tracking, virtual pageviews of custom variables. Deze aangepaste implementaties vinden we nog niet terug in Google Tag Manager, maar zijn zeker wel mogelijk met een beetje code.

De GTM terminologie

Ik ben er mee aan de slag gegaan maar liep al snel tegen het feit aan dat ik zelf GTM nog niet goed genoeg begreep. Het is echt heel belangrijk om de verschillende niveaus en concepten te beheersen om een goede implementatie neer te zetten. Daarom, nog een keer, kort.

Account

Het hoogste niveau. Hieronder hangen verschillende containers en elke container heeft haar eigen GTM snippet die op de site moet.

Container

De container is simpelweg een stukje JavaScript code dat je op je site plaatst. Zoals al geschreven: aanbevolen wordt deze net na de openende <body> tag neer te zetten.

De codes (tags) binnen de container zullen asynchroon uitgevoerd worden. Dat betekent dat als één tag een beetje langzaam is de andere tags niet zullen hoeven te wachten. Dit kan de laadtijd van je website verbeteren.

Data Layer

De Data Layer is een manier om informatie tussen je website en de verschillende tags met elkaar te laten communiceren. Het is een data-format dat GTM begrijpt en waarmee het kan werken.

Voorbeeld: je kunt informatie over een pagina verwerken in de Data Layer. Zo kun je bijvoorbeeld de pagina-titel, pagina-categorie, transactie-waarde, auteur, of andere waarde in de Data Layer stoppen zodat GTM deze informatie weer kan gebruiken.

Om een Data Layer te maken, moet je (voor je GTM JavaScript snippet) een JavaScript Object maken en dataLayer noemen:

<script>
dataLayer = [{
}];
</script>

Let op: dit stukje moet dus bóven je GTM JavaScript snippet staan. Ik plaats dit daarom in de <head>.

Tags

De codes die verzonden moeten worden. Bijvoorbeeld Google Analytics, Google AdWords conversie code of remarketing code.

Macro’s

Dus, hierboven legde ik uit dat je informatie op kan slaan in de Data Layer. Hoe kun je dit dan gebruiken in GTM? Via Macro’s! In heel simpele woorden: Macro’s slaan informatie op. Dat is alles!

Een Macro heeft maar één functie en dat is informatie opslaan zodat dit later in ‘rules’ en ‘tags’ gebruikt kan worden.

Er is heel veel informatie op een webpagina. Al die informatie kan in een Macro opgeslagen worden. Maar informatie komt in vele varianten en staat op vele plaatsen. Zo kan data in de DOM staan, in JavaScript en ontstaan wanneer een gebruiker een handeling doet op je website. Macro’s leggen aan GTM uit waar de informatie is.

GTM heeft een aantal voorgedefinieerde Macro’s:

  • URL
    • Dit is de huidige url voor een pagina
  • HTTP Referrer
    • Dit is de verwijzende url voor de huidige pagina
  • JavaScript Variable
    • Dit is de naam van een JavaScript variabele op een webpagina. GTM doorzoekt de pagina, vindt de variabele op basis van de naam die je opgeeft en slaat de inhoud van de variabele op in de Macro.
  • DOM Text
    • Dit is de naam van een DOM element ID op je webpagina. GTM doorzoekt de pagina en vindt de ID en slaat de variabele op in een Macro.
  • DOM Attribute
    • Dit is de naam van een DOM element ID:attribute. GTM doorzoekt de pagina en vindt de ID:attribute en slaat de variabele op in een Macro.
  • Data Layer Variable
    • Dit is de naam van een Data Layer variabele die je zelf defineert. GTM doorzoekt de pagina, vindt de variabele en de waarde die je daarbij hebt gedefineerd en slaat de waarde op in de Macro.
  • Constant String
    • De constant string komt niet van de pagina. Dit is een (constante) waarde die je zelf kunt configureren in GTM en daarna kunt gebruiken.
  • Custom Event
    • Dit is een manier om informatie in een Macro op te slaan op basis van website interactie. Ik kom hier in het volgende gedeelte op terug.

In het vervolg op dit artikel maak ik gebruik van voorbeelden die bovenstaande meer verklaren.

GTM Events

Het is belangrijk om je te realiseren dat er een verschil is tussen Google Analytics Events en Google Tag Manager Events. In de tekst maak ik daarom onderscheid tussen GA events en GTM events. Twee dingen die je niet door elkaar moet halen!

Een veelgebruikte methode om interactie te meten, is te kijken wanneer een gebruiker op een bepaalde link klikt. GTM maakt daarvoor gebruik van de voorgedefinieerde GTM Macro ‘event’. Je moet hiervoor nog steeds een stukje code toevoegen aan je website. Hoe je dit precies doet, laat ik zien in het voorbeeld GA Event tracking (hieronder).

Rules

Regels zijn het ‘brein’ van GTM. Zij bepalen wanneer een Tag wel of niet moet worden verzonden. Regels worden opgeslagen binnen een container en je kunt ze gebruiken voor meerdere Tags.

Je wilt bijvoorbeeld dat de Google AdWords conversie code alleen op de bedankpagina staat. Dit kan gemakkelijk door een regel te maken die specificeert dat de AdWords conversie tag alleen wordt verzonden op het moment dat de url overeenkomt met bedankt.

Een regel bestaat uit drie onderdelen:

  • De Macro – De informatie die beschikbaar is in GTM
  • De Conditie – Dit is een logische conditie, bijvoorbeeld ‘gelijk aan’ of ‘bevat’
  • De Waarde – Dit is de waarde waaraan de Macro volgens de Conditie moet voldoen

Regels kunnen meerdere condities hebben. In een simpel voorbeeld wat ik voor de uitleg ook gaf: je wilt een regel die je kunt gebruiken om bepaalde tags (bijvoorbeeld AdWords conversie codes) alleen te laten verzenden op het moment dat de bedankpagina is bereikt. Een regel zou je dan als volgt opzetten:

Voor meer informatie verwijs ik graag naar de volgende bronnen, ze hebben mij ook ontzettend geholpen om de terminologie te begrijpen:

Morgen kun je het vervolg op dit artikel lezen!

Discussie- 5 reacties

Britt

16 oktober 2013, 08:25

Moet je je Google Analytics plugin uitzetten/code verwijderen?

Reageer hier op

    Paula

    16 oktober 2013, 08:28

    Wanneer je Google Analytics implementeert via de Tag Manager moet je inderdaad de Google Analytics code/plugin verwijderen/uitzetten.

Dennis

3 april 2015, 13:11

Dankjewel voor deze heldere en begrijpelijk post. Super!

Reageer hier op

Johan

12 augustus 2016, 21:22

Hallo Paula, Mooie informatie. Het aanmaken van een tag is erg eenvoudig, ik maak dan wel gebruik van kant en klare scripts van internet maar het werkt erg leuk. De pop up komt echter keer op keer terug als je de pagina ververst of even terug gaat naar een vorige stap. Ik krijg het niet werkend om een macro en rule te maken met het scriptje om dit te stoppen. Eigenlijk zou het zo moeten zijn dat je een popup eenmalig kan laten zien aan iemand en daarna nooit meer, of pas een volgende dag weer… heb je hier nog tips voor?

Reageer hier op

    Paula

    16 augustus 2016, 09:48

    Hallo Johan. De meest eenvoudige oplossing zou zijn om een javascript te maken die controleert of er een cookie aanwezig is. Als die er niet is dan plaatst het script een cookie en geeft een returnwaarde die je gebruikt als trigger waardoor de tag wel uitgevoerd kan worden. Als er wel een cookie aanwezig is dan geeft het script niet die returnwaarde waardoor de tag niet uitgevoerd zal worden (de trigger ontbreekt dan).

Blijf op de hoogte van handige kennis en het laatste nieuws van je favoriete online marketing bureau:

INSCHRIJVEN VOOR ONZE NIEUWSBRIEF