Handleiding Google Tagmanager (GTM) Inhoudsopgave Basisbeginselen... 2 Google Tagmanager in de praktijk... 3 Meerdere domeinen doormeten... 8 E-commerce tracking met Google Tagmanager...11 Event tracking via Google Tagmanager...13 Aanvullende mogelijkheden event tracking via Google Tagmanager...20 Instellen van een aangepaste bounceberekening...20 Meten van de interactie met je YouTube video s...24 Scrolldiepte meten in Google Analytics...29 Implementatie via Google Tagmanager...29 Sociale interactie op de site...32 Reacties op artikelen via het Disqus-systeem...36 De voordelen van Google Tagmanager...42
Met Google Tagmanager kun je alle meetcodes vanuit één programma op je site plaatsen. Je kunt het vergelijken met een cms zoals WordPress of Drupal, maar dan voor je meetcodes. Met een tagmanagementsysteem hoef je een webbouwer geen opdrachten meer te geven om meetcodes te plaatsen. Je kunt deze meetcodes namelijk zelf plaatsen. Dit tagmanagementsysteem zet ze dan op je site. Hoe gaat dat in zijn werk? In een vorige handleiding heb ik de te nemen stappen voor een Google Analyticsimplementatie besproken. Ik ging hierbij uit van een implementatie waarbij je de meetcodes zelf op de website moet (laat) plaatsen. Je kunt er ook voor kiezen om Google Analytics te implementeren via Google Tagmanager. Misschien denk je nu: wat is Google Tagmanager? Basisbeginselen Voordat je met Google Tagmanager gaat werken, moet je weten hoe dit tagmanagementsysteem werkt. Binnen Google Tagmanager heb je de beschikking over de volgende tools: De container. Dit is de enige code die je op je site plaatst. De container activeert jouw meetcodes. Daardoor hoef je de Google Analytics- en conversie-code voor AdWords niet meer in de live-omgeving van je site te plaatsen. In Google Tagmanager noemen ze dit het firen van de meetcode. Tag. Dit is jouw meetcode. Bijvoorbeeld jouw Google Analytics- of conversie-code voor AdWords. Maar je kunt bijvoorbeeld ook een tag aanmaken voor een externe tool als ClickTale. Aan deze tag moet je een regel koppelen. Je wilt bijvoorbeeld jouw meetcode op een bepaalde pagina of op alle pagina s activeren. Ik kan me voorstellen dat je de Google Analytics-code op iedere pagina wilt plaatsen, maar je conversiecode voor AdWords alleen op de bedankpagina, nadat een bezoeker jouw product besteld heeft. Ten slotte heb je ook de mogelijkheid om macro s te gebruiken. Met macro s kun je specifieke informatie aan de tag toevoegen. Je hebt de beschikking over standaardmacro s, zoals de url s van je pagina s en de domeinnamen. Daarnaast kun je eigen macro s toevoegen. Voorbeelden hiervan zijn de url s van je pdf-brochure of whitepaper, of het id van een button of afbeelding.
Google Tagmanager in de praktijk Vervolgens wil je natuurlijk met Google Tagmanager aan de slag. Hoe kun je dit het beste aanpakken? Laat eerst de container tag op iedere pagina van jouw site plaatsen. Deze zet je tussen de <body>- en </body>-tag: Tags aanmaken Vervolgens kun je je tags gaan aanmaken. Bijvoorbeeld de Google Analyticscode. Maak eerst een tag aan en geef deze een herkenbare naam. Bijvoorbeeld GA-code. Vervolgens vul je het volgende in: Tagtype (in dit geval Google Analytics) Je webproperty-id is je UA-code. Deze kun je vinden onder tracking-info en dan Tracking ID in je Google Analytics-account. Daarnaast kun je functies voor adverteerders in het Display Netwerk aanvinken. Hiermee kun je onder andere doelgroepsgegevens, zoals geslacht, leeftijd en interesses doormeten. Daarnaast kun je met deze aangepaste code Remarketing-lijsten aanmaken in Google Analytics voor je remarketing campagnes. Tip: maak een macro van je UA-code, zodat je typfouten voorkomt.
Kies bij tracking type voor paginaweergaven. Je wilt tenslotte met de Google Analytics-code je paginabezoeken doormeten.
Ten slotte activeer je de regel van de tag. Ik kies er in onderstaand voorbeeld voor om de Google Analytics-code op iedere pagina te activeren: Op dezelfde manier kun je ook je Remarketing- of AdWords-conversiecode activeren. Het enige verschil is dat je voor deze meetcodes het conversie-id uit je AdWordsaccount invult.
Tip: installeer de Chrome-extensie Tag assistant om je meetcodes te kunnen testen.
Meerdere domeinen doormeten De doormeting voor meerdere domeinen binnen Universal Analytics is een stuk eenvoudiger dan in de klassieke Google Analytics. Je kunt namelijk met één tag dit voor elkaar krijgen. Dat gaat als volgt: Je kiest als tagtype voor Universal Analytics; Tip: maak van je tracking-id een macro om typfouten tegen te gaan!
Vervolgens kies je onder cookieconfiguratie voor cookiedomein auto. Zo blijft de cookiewaarde behouden voor alle domeinen. Indien je dit niet invult, geeft Universal Analytics de hoofddomeinen weer als verwijzende site in je statistieken. Tip: maak van de benaming van je cookiedomein een macro om typfouten tegen te gaan!
Nu kun je de domeinen aan elkaar koppelen; Tip: ook hierbij adviseer ik om voor de koppeling van de domeinen een macro te gebruiken om typfouten te voorkomen. Ten slotte dien je een regel aan te maken voor alle paginabezoeken op je hoofddomeinen.
E-commerce tracking met Google Tagmanager Naast het doormeten van meerdere domeinen, kun je ook de E-commerce module activeren via Google Tagmanager. Hiervoor dien je onderstaande zaken in te stellen: Maak een tag aan voor E-commerce transacties
Vervolgens dien je een regel aan te maken, zodat Google Tagmanager het E- commerce script alleen op de bedankpagina plaatst. Ten slotte dien je een data-layer aan te maken, waarin je het daadwerkelijke script laat plaatsen. Deze dien je boven de container tag te plaatsen. Zo kan Google Tagmanager jouw E-commerce script activeren. <script> datalayer = [{
}]; 'transactionid': '1234', 'transactionaffiliation': 'Acme Kleding', 'transactiontotal': '11.99', 'transactiontax': '1.29', 'transactionshipping': '5', 'transactionproducts': [{ 'sku': 'DD44', 'name': 'T-shirt', 'category': 'Kleding', 'price': '11.99', 'quantity': '1' },{ 'sku': 'AA1243544', 'name': 'Sokken', 'category': 'Kleding', 'price': '9.99', 'quantity': '2' }] </script> Tip: plaats een testbestelling op je eigen site, zodat je kunt nagaan of je implementatie succesvol is geweest. Event tracking via Google Tagmanager Om de gebeurtenissen op je site door te meten, moest je voorheen altijd javascriptcodes op je site plaatsen om deze te activeren. Hiervoor was je in de meeste gevallen afhankelijk van je webbouwer. Gelukkig biedt Google Tagmanager hiervoor een alternatieve oplossing. Je kunt nu namelijk je gebeurtenissen doormeten zonder een code-aanpassing op je site. Welke gebeurtenissen kun je met Google Tagmanager doormeten? 1. Kliks op afbeeldingen en buttons; 2. Uitgaande links; 3. PDF-downloads voor brochures of whitepapers; 4. Kliks op de verzendbutton van je formulieren.
Eerst selecteer je de event listener tag. Bijvoorbeeld om de kliks voor je uitgaande links door te meten. Deze tag signaleert of er kliks op uitgaande links plaatsvinden. Hier koppel je vervolgens een regel aan. Ik kies er in onderstaand voorbeeld voor om de uitgaande links op alle pagina s door te meten. Maar je kunt natuurlijk ook alleen uitgaande links op een bepaalde pagina, bijvoorbeeld de homepage, doormeten. Vervolgens activeer je de gebeurtenis. Hiervoor maak je een Google Analytics-tag aan voor je gebeurtenis.
Parameters Je kunt kiezen uit enkele parameters, zodat je deze kunt herkennen in Google Analytics. In bovenstaand voorbeeld heb ik gekozen voor de categorie uitgaande link en de actie klik. Dit heb ik handmatig gedaan. Je kunt er ook voor kiezen om een macro te gebruiken. Met een macro kun je specifieke informatie in de tag verwerken. In bovenstaand voorbeeld heb ik de volgende macro aangemaakt om deze gebeurtenis een label mee te geven.
Een regel aan de tag koppelen Ik maak vervolgende een macro aan voor de element-url van de gebeurtenis. Google Analytics zal nu de URL van deze uitgaande link als label meegeven, bijvoorbeeld www.starttest.com. Maar Google Analytics meet nu ook kliks op links met de URL Ganalytics.nl. En dat willen we natuurlijk niet, want Ganalytics.nl is mijn eigen website. Daarom koppelen we een regel aan deze tag met twee condities: 1. We geven aan dat Google Analytics kliks op links moet doorgeven als gebeurtenis. 2. We willen de URL s met Ganalytics.nl niet doormeten als uitgaande link.
Ten slotte maak je een versie aan om de meetcode te testen en te laten publiceren. Tip: gebruik de real-time rapporten van je Google Analytics-profiel zonder filters, om te testen of het allemaal werkt: Kliks op afbeeldingen en buttons doormeten Vervolgens kun je ook de kliks op de afbeeldingen en buttons van je site doormeten. De event listener voor klikken op links heb je al aangemaakt. Je hoeft nu alleen nog maar jouw Google Analytics-tag voor deze gebeurtenis aan te maken. Ik kies ervoor om aparte tags aan te maken voor het doormeten van afbeeldingen en call-to-action-buttons.
Daarna koppel je een regel aan deze gebeurtenis:
In bovenstaand voorbeeld heb ik het volgende geprogrammeerd: 1. Ik wil alleen de button-kliks doormeten op mijn eigen site; 2. Ik wil geen kliks op PDF-brochures of whitepapers doormeten; 3. Ik wil geen jpg-afbeeldingen doormeten. Je kunt deze gebeurtenis na publicatie het beste weer testen via de real-time rapporten binnen een Google Analytics-profiel zonder filters. Deze procedure kun je ook gebruiken om de kliks op de afbeeldingen op je site, PDFbrochures en de kliks op de verzendbuttons van je formulieren via Google Tagmanager in te stellen. Misschien vraag je je nu af waarom je de verzendbutton op de formulieren dient te meten. Dit is van belang als je geen bedankpagina hebt voor je bestel- of
aanvraagformulieren. Je kunt je formulieren zo altijd nog als gebeurtenis doormeten. Hiervoor hoef je dus niet meer de hulp in te roepen van je webbouwer. Aanvullende mogelijkheden event tracking via Google Tagmanager Instellen van een aangepaste bounceberekening In Google Analytics kun je de standaard statistieken paginaweergaven en waarde per pagina bekijken. Daarnaast kun je het bouncepercentage per pagina bekijken. Het bouncepercentage is een statistiek, die lastig te interpreteren is. Dit zijn de bezoekers, die na 1 pagina lezen de site weer verlaten hebben. De bezoekers die > 3 minuten op de site actief zijn en slechts 1 pagina bekijken, telt Google Analytics ook als bounce. Via Google Tagmanager kun je deze bezoekers uitsluiten van de bouncerate berekening: Maak een tag aan voor de bezoekers, die > 3 minuten op je site actief zijn:
Je kiest hierbij als tagtype listener voor timer. In dit geval heb ik gekozen voor 180.000 milliseconden (3 minuten), maar je kunt hierbij natuurlijk ook voor 1 of 2 minuten kiezen. Daarnaast kies ik een limiet van één. Deze gebeurtenis wil je namelijk niet meerdere keren achter elkaar laten plaatsvinden. Vervolgens laat ik deze tag op alle pagina's activeren: Vervolgens maak je een tag aan, waarbij je deze bezoekers als gebeurtenis registreert en niet als bounce:
De parameters categorie en actie kun je handmatig invullen. Het is heel belangrijk om onder niet-interactietreffer niet waar in te vullen. Zo zorg je er namelijk voor, dat deze bezoekers niet meetellen binnen de bounceberekening. Ten slotte dien je een regel aan te maken om deze tag te activeren:
De resultaten van deze implementatie kun je terugvinden onder topgebeurtenissen. Nu weet je dus, hoeveel bezoeken > 3 minuten op de site actief zijn geweest en slechts 1 pagina bekeken hebben:
Wat kun je met deze aangepaste bounceberekening? Nu krijg je een meer realistische weergave van het bouncepercentage op de site. Tip: vergelijk 1 maand na het instellen van deze aangepaste bounceberekening met de vorige periode. Dan weet je ook, of er significante verschillen zijn via deze aangepaste berekening: Meten van de interactie met je YouTube video s Met auto-event tracking kun je de kliks op de button van je YouTube video s. Je kunt alleen niet de interactie van de gebruiker met je YouTube video meten. Hiervoor dien je een aparte meting in te stellen. Zo kun je de interactie met je YouTube video in 4 blokken onder verdelen: Volg onderstaande stappen in Google Tagmanager om dit te kunnen meten: Maak een macro aan om de YouTube video( s) te signaleren op je site;
Bovenstaande code kun je via dit artikel ophalen en plaatsen in bovenstaand aangepast JavaScript-macro veld. Vervolgens dien je macro s aan te maken om de YouTube video s te kunnen meten. Dit dien je te doen voor de gebeurtenis categorie/actie en label.
Nu dien je een aangepaste html tag aan te maken om de YouTube video( s) te achterhalen. Deze plug-in kun je ophalen en plaatsen in onderstaand html veld:
Vervolgens dien je hieraan een regel te koppelen om de YouTube video( s) daadwerkelijk te achterhalen: Ten slotte dien je een tag aan te maken om de meting van de YouTube video( s) te activeren. Nu gebruik je de eerder aangemaakte macro s voor het invullen van de gebeurtenis categorie/actie en label. De niet-interactie treffer dient niet-waar te zijn. Zo kun je de interactie van de gebruiker met je YouTube video s uitsluiten van je bouncerate berekeningen. Hieraan dien je een regel te koppelen, zodat je de meting daadwerkelijk kunt activeren:
Tip: test binnen de real-time rapporten of de implementatie succesvol is geweest!
Scrolldiepte meten in Google Analytics Met de gebeurtenis scrolldiepte kun je bepalen welke percentage van de content de bezoeker daadwerkelijk bekijkt op de pagina. Google Analytics verdeelt de pagina zo in 4 aparte blokken, zoals in onderstaande overzicht is weergegeven: Baseline = het startpunt van de pagina; 25% = het einde van de 1ste alinea; 50% = de vouw van de pagina; 75% = het einde van de laatste alinea; 100% = de footer (eindpunt) van de pagina. Implementatie via Google Tagmanager Je kunt scrolldiepte via event tracking laten implementeren door de webbouwer. Hiervoor dien je deze plug-in van Rob Flaherty te gebruiken: Je kunt er ook voor kiezen om scrolldiepte via Google Tagmanager te implementeren. Volg hiervoor onderstaand stappenplan: 1. Maak een aangepaste html-tag aan voor scrolldiepte. Hierin plaats je bovenstaande plug-in. Vervolgens koppel je hieraan een regel, zodat je deze plug-in kunt activeren:
2. Vervolgens dien je de daadwerkelijke tag voor de gebeurtenis scrolldiepte aan te maken: Hierbij dien je voor de gebeurtenis categorie/actie/label en waarde afzonderlijke macro s aan te maken. De gebeurtenis categorie/actie en label zijn verplicht. De gebeurteniswaarde is optioneel. Deze macro stuurt de informatie over de scrolldiepte van de site door aan Google Analytics.
3. Tot slot dien je een regel aan te maken om deze tag te activeren:
Ten slotte dien je in de real-time rapporten na te gaan of je implementatie succesvol is geweest: Sociale interactie op de site Voor media/content sites is het praktisch om naast scrolldiepte, ook de sociale interactie op de site te meten. Hoeveel berichten delen de lezers via de sociale media knoppen op de site? Vervolgens kun je via een segment de impact van de gedeelde berichten op de site conversie gaan bepalen.
Voorbeeld: hoeveel gedeelde berichten hebben bijgedragen tot een registratie of afgesloten abonnement? Via onderstaande stappen kun je deze sociale gebeurtenis instellen in Google Analytics: Maak een aangepaste hmtl-tag met de plug-in om de interactie met de sociale media knoppen te kunnen signaleren: De plug-in kun je gebruiken via onderstaande code: <script>// <![CDATA[ // This function is going to handle the events sent by AddThis function addthiseventhandler(evt) { switch (evt.type) { case "addthis.menu.share": console.log(["_trackevent","social Share", evt.data.service,evt.data.url]); datalayer.push({ 'event' : 'gasocial', 'gasocialnetwork' : evt.data.service, 'gasocialaction' : 'Share', 'gasocialtarget' : evt.data.url }); break; } } // Let's set the events listener for addthis API addthis.addeventlistener('addthis.menu.share', addthiseventhandler); // ]]></script> Vervolgens koppel je hier een regel aan, zodat Google Analytics deze sociale media knoppen daadwerkelijk signaleert:
Nu dien je de meting op de social media knoppen te activeren met onderstaande tag. Kies als tracking-type voor sociaal. Vervolgens dien je te kiezen voor onderstaande macro s: Bovenstaande sociale media macro s voor netwerk/actie en actiedoel kun je aanmaken met een macro variabele voor gegevenslaag:
Een soortgelijk macro dien je ook aan te maken voor de sociale actie (gasocialaction) en sociale actiedoel (gasocialtarget). Ten slotte dien je hieraan een regel te koppelen, zodat je de meting voor de gedeelde berichten kunt activeren:
De gedeelde berichten kun je helaas niet testen via de real-time rapporten. Je kunt wel via een testversie in Google Tagmanager nagaan of de tags zijn geactiveerd. Vervolgens vind je deze resultaten terug onder het rapport acquisitie-sociaal-plug-ins: Reacties op artikelen via het Disqus-systeem Scrolldiepte en gedeelte berichten zijn praktische stappen om de interactie op je site of blog te meten. Maar uiteindelijk wil je natuurlijk weten hoeveel bezoekers een reactie geven op de gepubliceerde artikelen. Vervolgens kun je de achtergelaten reacties als segment instellen, zodat je de impact van de achtergelaten reacties op de site conversie kunt bepalen. Via onderstaande stappen kun je deze achtergelaten reacties gaan meten in Google Analytics: Maak een html-tag met de plug-in om de Disqus berichten te kunnen signaleren op je site:
Bovenstaande plug-in kun je via onderstaande code gebruiken: <script> if(window.disqus){ DISQUS.reset({ reload: true, config: function () { this.callbacks.onnewcomment = [function(){ datalayer.push({ 'event' : 'gaevent', 'gaeventcategory' : 'Disqus', 'gaeventaction' : 'New Comment', 'gaeventlabel' : window.location.pathname }); }]; this.callbacks.onpaginate = [function(e){ datalayer.push({ 'event' : 'gaevent', 'gaeventcategory' : 'Disqus', 'gaeventaction' : 'Pagination', 'gaeventlabel' : window.location.pathname }); }]; this.callbacks.onidentify = [function(e){ datalayer.push({ 'event' : 'gaevent', 'gaeventcategory' : 'Disqus', 'gaeventaction' : 'User Logged', 'gaeventlabel' : window.location.pathname }); }]; }
}); } </script> Vervolgens dien je hier een regel aan te koppelen, zodat je het Disqus systeem kan signaleren op jouw site of blog: Je kiest voor gtm.load, zodat je alleen de pagina s meet waar het Disqus reactie-systeem geplaatst is op de site. Daarnaast maak je een macro om het Disqus reactie-systeem te kunnen signaleren:
Onderstaande JavaScript-macro voor Disqus kun je via onderstaande code gebruiken: function() { // Let's see if disqus embed iframe is available on the DOM, We don't want // to fire it in pages where it is not available var iframes = document.getelementsbytagname('iframe'); for (var i = 0; i < iframes.length; i++) { if(iframes[i].src.indexof('//disqus.com/embed/comments/')>-1) return true; } }
Nu maak je een tag om het meten van de reacties via het Disqus-systeem te activeren. Je kiest als tracking-type voor gebeurtenis. Vervolgens gebruik je onderstaande macro s voor de gebeurteniscategorie/actie en label: Onderstaand zie je een voorbeeld van een macro voor bovenstaande gebeurteniscategorie:
Soortgelijke macro s dien je ook aan te maken voor de gebeurtenisactie (gaeventaction) en label (gaeventlabel). Nu dien je hieraan een regel te koppelen om de meting van de Disqus-reacties te activeren:
Ten slotte kun je in de test versie van Google Tagmanager en de real-time rapporten nagaan of Google Analytics de achtergelaten reacties via het Disqus-systeem meet: De voordelen van Google Tagmanager Google Tagmanager is een handige tool, die je kunt gebruiken bij de implementatie van Google Analytics. Het bied je de volgende voordelen: 1. Je hoeft geen meetcodes meer op de site te laten plaatsen. Dit heeft een positieve uitwerking op de snelheid en algehele performance van je site. 2. Je hoeft minder vaak je webbouwer te raadplegen voor het plaatsen van je meetcodes. Zo kun je kosten besparen. Reken maar uit hoe vaak je nu je webbouwer vraagt om een meetcode op je site te laten plaatsen. 3. Je krijgt meer overzicht over je meetcodes. In Google Tagmanager kun je precies zien welke meetcodes je op dit moment gebruikt. Nog een laatste tip tot slot: gebruik Google Tagmanager om periodiek je Google Analytics-implementatie te evalueren. Mijn advies is om dit halfjaarlijks te doen. Deze twee tutorials kun je raadplegen om bovenstaande te installeren met Google Tagmanager.