MENU

How to: Beginnen met Google Tag Manager


Als ondernemer wil je weten wat er op je website gebeurt. Hoeveel bezoekers heb ik? Waar komen ze vandaan? Wat doen ze op mijn website? Een veelgebruikte tool hiervoor is Google Analytics. Analytics geeft niet alleen antwoord op deze vragen, de gratis tool van Google geeft veel data over het gedrag van je bezoekers.

Krijgen bezoekers een bedankpagina te zien na het invullen van een contactformulier? Dan wil je dit als doel meten in Analytics, zodat je o.a. kan zien waar deze bezoekers vandaan komen. Maar vaak zijn er meerdere manieren waarop bezoekers contact kunnen opnemen. Je wilt bijvoorbeeld ook klikken op telefoonnummers en mailadressen meten. Zonder Google Tag Manager moet je steeds weer stukjes code toevoegen zodat een klik als event wordt gemeten in Analytics. Zeker als je niet vaak in de code van je website werkt, kun je het overzicht verliezen.

Gelukkig hebben we Google Tag Manager. Google lanceerde deze manager in 2012 en na lang genegeerd te hebben, probeerde ik de tool eerder dit jaar uit. Inmiddels ben ik fan.

Wat is Google Tag Manager?

Zoals de naam al zegt gebruik je Google Tag Manager om tags te managen. Tags zijn stukjes code die geladen worden bij het openen van de webpagina. Dit kan zijn: een trackingscode voor statistieken zoals Google Analytics. De tags worden door Google Tag Manager ingeladen. Hierdoor hoeft niet ieder stukje code in templates of pagina’s geplaatst te worden.

Om aan te geven wanneer een tag geactiveerd moet worden, gebruik je triggers. De tag voor Google Analytics trackingcode moet geladen worden bij iedere paginaweergave. Deze trigger heet All Pages. Een klik wil je alleen meten als de gebruiker op een e-mailadres of telefoonnummer klikt. Hiervoor maak je nieuwe triggers aan.

Daarnaast heb je nog variabelen. Variabelen bevatten informatie die gebruikt kan worden voor triggers en tags. De inhoud van een variabel kan dynamisch of constant zijn. Je kunt bijvoorbeeld een variabel maken van je GA ID, zodat je deze niet steeds opnieuw moet intypen. Wanneer je Page URL als variabel gebruikt, is de inhoud van de variabel per pagina verschillend.

Aan de slag met Google Tag Manager

Google Tag Manager kent veel mogelijkheden. Zo kun je onder andere meten hoever bezoekers naar beneden scrollen, bijhouden welke tekst bezoekers kopiëren, schema.org implementeren, een aangepaste Google Analytics bounce rate creëren, CSS aanpassen, etc. In dit artikel beperk ik mij slechts tot de basis. Te beginnen met de voor- en nadelen, dan de implementatie en daarna een aantal handige tags van Google Tag Manager.

De voor- en nadelen van Google Tag Manager

Voordelen:

  • Google Tag Manager is gratis;
  • Gebruiksvriendelijk, o.a. door de vele ingebouwde tags;
  • Tags veilig aanmaken, testen en publiceren zonder de code van de site aan te passen;
  • Versiebeheer: eenvoudig switchen tussen eerdere versies;
  • Snel, ook mensen zonder verstand van code kunnen tags toevoegen.

Nadelen:

  • Geen support van Google zelf, betaalde tag manager systemen bieden dit wel;
  • Privacy van bezoekers neemt af.

Implementatie van de Tag Manager

De implementatie van Google Tag Manager doet denken aan die van Google Analytics. Je begint met het aanmaken van een account op tagmanager.google.com. De stappen hiervan zijn eenvoudig te volgen. Geef je account een naam, bijvoorbeeld de bedrijfsnaam. Daarna geef je de container een naam, zoals de URL van je website.

1-account-toevoegen

Je geeft aan dat het om een website gaat en accepteert de algemene voorwaarden. Daarna krijg je de code die geplaatst moet worden. Indien je een WordPress site hebt, dan kun je de DuracellTomi’s plugin gebruiken.

Om te testen of de code goed werkt, kun je de Preview mode openen. De Preview mode open je door rechtsboven op het pijltje te klikken en daarna op Voorbeeld. Ga vervolgens naar je website, hier krijg je onderin een scherm van de Google Tag Manager. Hier is nu nog weinig te zien, maar je weet nu dat het werkt (of niet).

preview-mode

 

Als de code is geplaatst en werkt begint het leuke deel, namelijk: tags, triggers en variabelen instellen. Hieronder geef ik drie veelgebruikte voorbeelden.

Analytics trackingcode plaatsen

Google Analytics implementeren wordt bijzonder eenvoudig met Google Tag Manager. Eerst maken we een variabel voor het GA ID. Klik op Variabelen en klik op Nieuw. Geef de variabel een naam en kies Constant als variabel type. Als waarde geef je de Analytics ID.

ga-code-variabel

Nu gaan we de tag aanmaken. Ga naar Tags en klik op de rode Nieuw knop. Gebruik Universal Analytics als tagtype en gebruik je nieuwe variabele. Je kunt alle variabelen zien door rechts op het legoblokje te klikken. Hier vind je je variabel. Als trigger gebruik je All pages.

ga-code-tag

Dat was het. De GA code in nu gecomplementeerd op je website.

Klik op e-mail meten

Op veel contactpagina’s is een klikbaar e-mailadres te vinden. Een klik op het e-mailadres kan gezien worden als een contactopname. Daarom wil ik dit meten als event in Google Analytics. Hiervoor hebben we een tag en een trigger nodig.

We beginnen met een trigger: ga naar Triggers en klik op Nieuw. Geef de trigger een naam, kies Alle elementen als triggertype en geef aan dat de trigger bij Sommige klikken geactiveerd moet worden. Hier stel je in dat de trigger geactiveerd moet worden bij klikken waarbij ‘mailto’ voorkomt in de Click URL.

klik-op-mail-meten

Nu de tag. Maak eerst weer een Universal Analytics tag aan. Geef hem een omschrijvende naam. Gebruik de GA-variabel en kies Gebeurtenis als trackingtype. Geef de categorie en actie een naam, bijvoorbeeld ‘Contactopname’ en ‘Klik op email’. Als label kun je de ‘{{PageURL}}’ variabel gebruiken. Zo kun je bij label in Google Analytics zien op welke pagina de klik heeft plaatsgevonden. Gebruik je nieuwe trigger voor deze tag.

klik-op-mail-tag

Klik op telefoonnummer meten

Ook telefoonnummers kunnen klikbaar zijn. Telefoonnummers zijn echter iets ingewikkelder dan e-mailadressen. Ook wanneer niet duidelijk in de code wordt aangegeven dat een nummer klikbaar is (ahref=”tel) kan deze evengoed klikbaar worden voor mobiel gebruikt. Het mobiele apparaat herkent dat het een telefoonnummer is, waardoor hij klikbaar wordt. In dit geval wordt een klik op dit nummer niet geregistreerd door Google Tag Manager.

Daarom is het van belang dat je in de code aangeeft dat het om een telefoonnummer gaat. Bij Stramark ziet die code er zo uit:

<a href="tel:020 716 54 11">020 716 54 11</a>

Nu het telefoonnummer klikbaar is, kun je dit gaan meten. Dit doe je met een trigger met Click URL bevat ‘020’. Klikken vanaf desktops worden nu ook gemeten; niet de bedoeling. Desktops kunnen in theorie bellen via skype, maar dit gebeurt zelden (althans bij mij). Het merendeel van de klikken op het telefoonnummer zouden hierdoor niet leiden tot een daadwerkelijke call, waardoor de data in GA niet overeenkomst met de werkelijkheid.

Gelukkig kun je een trigger alleen op mobiel laten activeren in GTM met een eigen variabel. We beginnen met een variabel die bepaalt of een gebruiker op een mobiel apparaat gebruikt (met dank aan Simo Ahava).

Maak een nieuwe variabele en geef deze een naam. Selecteer Aangepaste JavaScript-macro als type. Het script dat nodig is kun je hier vinden. Plak het script in het veld. Het script controleert de browser user agent string. Het geeft een waarde van ‘True’ wanneer dit overeenkomt met een mobile device user agent.

mobiele-gebruiker-variabel

Nu de trigger. Maak weer een trigger met type Alle elementen en meet Sommige klikken. De eerste voorwaarde van deze trigger is dat ‘020’ (past dit aan aan jouw telefoonnummer) voorkomt in de Click URL. De tweede voorwaarde is dat Mobiele gebruiker ‘True’ bevat.

klik-op-tel-trigger

De trigger komt grotendeels overeen met de trigger die klikken op e-mailadressen registreert.

klik-op-tel-tag

Testen

Nu de tags, triggers en variabelen zijn aangemaakt, is het tijd om te testen. Open in Google Tag Manager de Preview mode opnieuw als je die hebt afgesloten of klik op Vernieuwen.

preview-mode-vernieuwen

Nu de Preview mode geactiveerd is, ga je naar de site. Je ziet dat de Google Analytics trackingcode-tag al geactiveerd wordt. Klik op een telefoonnummer en een e-mailadres. Ook de Klik op E-mailadres tag werkt.

gtm-preview-tags

Zoals verwacht wordt de Klik op tel tag niet geactiveerd. Deze test heb ik uitgevoerd op een desktop. Om deze tag te testen kunnen we Google Tag Manager openen op een mobiel. Een andere manier is door te kijken in Google Analytics > Realtime > Gebeurtenissen. Klik nu met een mobiel op het telefoonnummer. Ook als de tags en trigger nog niet gepubliceerd zijn, worden ze getoond in GA.

12-test-tel-tag-in-ga

Hier zie ik de Klik op tel event terug. Alles lijkt te werken. Nu kan alles gepubliceerd worden in Google Tag Manager. Dit doe je door rechtsboven op de rode Publiceren knop te klikken in Google Tag Manager. Als je wilt kun je deze events als doel meten in Google Analytics, waarna je ze als conversie kan meten in AdWords.

Dit artikel is geschreven door Kevin Brinkman. Hij is AdWords Consultant bij Stramark en heeft zich o.a. gespecialiseerd in Google Tag Manager.