Handleiding Google Tagmanager (GTM) Inhoudsopgave Basisbeginselen... 2 Google Tagmanager in de praktijk... 4 Meerdere domeinen doormeten...10 E-commerce tracking met Google Tagmanager...13 De geoptimaliseerde E-commerce module...15 Event tracking via Google Tagmanager...33 Aanvullende mogelijkheden event tracking via Google Tagmanager...39 Instellen van een aangepaste bounceberekening...39 Instellen van de interactie binnen je winkelwagen of aanvraagformulier...42 Meten van de interactie met je YouTube video s...48 Scrolldiepte meten in Google Analytics...54 Implementatie via Google Tagmanager...54 Sociale interactie op de site...63 Reacties op artikelen via het Disqus-systeem...69 De voordelen van Google Tagmanager...75
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, dien je te 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 trigger (activatie) koppelen. In de vorige versie was de technische benaming hiervoor rule (regel). 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 variabelen te gebruiken. In de vorige versie was de technische benaming hiervoor macro. Met variabelen kun je specifieke informatie aan de tag toevoegen. Je hebt de beschikking over ingebouwde variabelen, zoals de url s van je pagina s (page url) en de kliks op een knop of uitgaande link (click url). Daarnaast kun je eigen variabelen toevoegen. Voorbeelden hiervan zijn de url s van je pdf-brochure of whitepaper, of het id van een button of invulveld binnen een formulier.
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 plaats je tussen de <body>- en </body>-tag. Deze container-tag kun je ophalen via admin install Google Tagmanager: Tags aanmaken Vervolgens kun je je tags gaan aanmaken. Bijvoorbeeld de standaard Google Analyticscode. Maak eerst een tag aan: Kies als tag voor Google Analytics; Vervolgens kies je als tagtype voor Universal Analytics; Vervolgens dien je aan te geven op welke trigger jouw meetcode dient te activeren. Je klikt in dit geval op all pages, zodat je de standaard meetcode op alle pagina s activeert. Nu dien je de tracking-id in te vullen. Mijn advies is om hiervoor een variabele aan te maken, zodat je spelfouten kunt voorkomen:
Bovenstaande variabele kun je invullen binnen je standaard meetcode:
Je geeft je standaard meetcode een beschrijvende naam en je kiest voor de aangemaakte variabele UA-code. Daarnaast vink je enable display advertising features aan om de demografische rapporten in Google Analytics te activeren. Ten slotte kies je voor de tracktype pageview. Onder Fields to set kun je de meting van je sitespeed meting aanpassen. Standaard gebruikt Google Analytics voor je sitespeed meting een relatief kleine
steekproef. Om deze steekproef te verhogen dien je onderstaande variabelen aan te maken: In bovenstaand voorbeeld maak ik allereerst de variabele debug (fouten oplossen) aan.
Vervolgens stel ik een lookup-table (opzoek tabel) in. Ik gebruik hierbij de zojuist ingestelde variabele debug. Ten slotte stel ik twee regels in, zodat ik de steekproef kan verhogen naar 100%. Disclaimer: voor sites met veel bezoekvolume adviseer ik om spaarzaam om te gaan met deze variabele. Je wilt namelijk met deze aanvullende meting je site performance niet teveel aantasten. Je kunt er bijvoorbeeld voor kiezen om binnen de output niet te kiezen voor 100, maar bijvoorbeeld 30-40%. Ten slotte wil je natuurlijk weten of Google Tagmanager je tag heeft geactiveerd. Dit kun je nagaan via de functionaliteit fouten opsporen. Klik hiervoor achtereenvolgens op create version en preview. Nu kun je de geactiveerde meetcodes via Google Tagmanager bekijken en je tag definitief publiceren. Stap 3 Stap 2 Stap 1 Remarketing of AdWords conversiecode 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 AdWords-account dient te achterhalen en in te vullen:
Tip: installeer de Chrome-extensie Tag assistant om je meetcodes te kunnen testen.
Meerdere domeinen doormeten De doormeting voor meerdere domeinen met Google Tagmanager is eenvoudiger dan hard-coded door de webbouwer. Je kunt namelijk met één tag dit voor elkaar krijgen. Dat gaat als volgt: Je kiest als tagtype voor Universal Analytics; Vervolgens kies je als trigger wederom voor alles pagina s van de site; Nu dien je de cookieconfiguratie voor het cookiedomein in te vullen. 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 variabele om typfouten te voorkomen! Nu kun je de domeinen aan elkaar koppelen;
Tip: ook hierbij adviseer ik om voor de koppeling van de domeinen een variabele in te stellen om typfouten te voorkomen.
E-commerce tracking met Google Tagmanager Naast het doormeten van meerdere domeinen, kun je ook de reguliere E-commerce module activeren via Google Tagmanager. Hiervoor dien je onderstaande zaken in te stellen: Bepaal eerst de trigger voor je E-commerce transactie. Kies voor pageview en some pageviews en vul de bedankpagina van de bestelling in. Ten slotte dien je bij trigger type te kiezen voor DOM Ready. Je wilt namelijk alleen de E-commerce meetcode op deze pagina activeren:
Ten slotte dien je een data-layer aan te laten maken door de webbouwer, 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': '[Server Variable]', // Transaction ID - Type:String - Required 'transactionaffiliation': '[Server Variable]', // store name - Type:String - Optional to use 'transactiontotal': [Server Variable], //total revenue - Type:Numeric - Required 'transactiontax': [Server Variable], // Tax amount for transaction - Type:Numeric - Optional to use 'transactionshipping': [Server Variable], // Shipping cost - Type:Numeric - Optional to use 'transactionproducts': [{ 'sku': '[Server Variable]', // Product SKU - Type:String - Required 'name': '[Server Variable]', // Product Name - Type:String - Required
'category': '[Server Variable]', // Product Category - Type:String - Optional to use Required Required,{ Required 'price': [Server Variable], // Product Price - Type:Numeric - 'quantity': [Server Variable] // Product Quantity - Type:Numeric - 'sku': '[Server Variable]', // Product SKU - Type:String - Required 'name': '[Server Variable]', // Product Name - Type:String - 'category': '[Server Variable]', // Product Category - Type:String - Optional to use Required Required ]; ] </script> 'price': [Server Variable], // Product Price - Type:Numeric - 'quantity': [Server Variable] // Product Quantity - Type:Numeric - Tip: plaats een testbestelling op je eigen site, zodat je kunt nagaan of je implementatie succesvol is geweest. De geoptimaliseerde E-commerce module In Universal Analytics is het mogelijk om de geoptimaliseerde E-commerce module te activeren. Hiermee kun je het gehele winkelgedrag in de webshop gaan monitoren. Deze implementatie is een stuk ingewikkelder dan de reguliere E-commerce-module. Daarom adviseer ik om deze implementatie in 2 fasen te doorlopen: 1. De meettags voor de winkelwagen en check-out; Allereerst dien je de reguliere meetcode aan te passen, zodat je gebruik kunt gaan maken van de geoptimaliseerde E-commerce module:
Je dient 2 zaken aan te passen binnen je reguliere Google Analytics tag: Je dient te kiezen voor url path onder het documentpad;
Daarnaast dien je de geoptimaliseerde E-commerce functies in te schakelen; Vervolgens dien je onderstaand script op de bedankpagina te laten plaatsen boven de container-tag: datalayer.push({ "event": "transaction", "ecommerce": { "purchase": { "actionfield": { "id": "6a52e328-24f7-42fe-aca1-ff8409a3dfd0", "affiliation": "Online Store", "revenue": 10, "tax": 5, "shipping": 5, "products": [] ); Producttoevoegingen aan winkelwagen Vervolgens wil je de producttoevoegingen aan de winkelwagen gaan bepalen. Maak hiervoor onderstaande trigger aan. Je kiest hierbij voor custom event all custom events. Vervolgens vul je addtocart in voor event name to match. AddToCart is namelijk het event binnen het meetscript voor de producttoevoegingen aan de winkelwagen:
Vervolgens ga je de daadwerkelijke tag hiervoor instellen. Vul onderstaande gebeurteniscategorie en actie in. Ten slotte dien je de E-commerce functies aan te vinken: Om bovenstaande meettag te kunnen activeren, laat je onderstaand meetscript door de webbouwer op de productdetailpagina s plaatsen boven de container-tag:
datalayer.push({ "event": "addtocart", "ecommerce": { "currencycode": "USD", "add": { "products": [{ "id": "f6be8", "name": "Comverges T-Shirt", "price": "33.00", "brand": "Comverges", "category": "T-Shirts", "variant": "red", "dimension1": "M", "position": 0, "quantity": 1 ] ); Productverwijderingen uit de winkelwagen Daarnaast kun je ook de productverwijderingen uit de winkelwagen meten met deze vernieuwde E-commerce module. Volg onderstaande stappen om dit in te stellen binnen Google Tagmanager: Maak een trigger aan voor de productverwijderingen uit de winkelwagen. Kies hierbij voor custom events all custom events. Vervolgens dien je removefromcart in te vullen binnen het filter event name to match:
Nu gaan we de daadwerkelijke tag voor deze gebeurtenis instellen. Je vult hierbij onderstaande gebeurteniscategorie en actie in. Ten slotte vink je de E- commerce functies aan: Onderstaand meetscript dien je door de webbouwer te laten plaatsen in de winkelwagen boven de container-tag om deze tag te kunnen activeren:
datalayer.push({ "event": "removefromcart", "ecommerce": { "currencycode": "USD", "remove": { "products": [{ "id": "f6be8", "name": "Comverges T-Shirt", "price": "33.00", "brand": "Comverges", "category": "T-Shirts", "variant": "red", "dimension1": "M", "position": 0, "quantity": 1 ] ); Doorkliks naar de check-out Allereerst stel je een trigger in voor de doorkliks naar de check-out pagina. Je kiest hierbij voor custom event all custom events. Vervolgens vul je onder event name to match checkout in: Nu stel je de daadwerkelijke tag in. Je kiest voor onderstaande gebeurteniscategorie en actie. Ten slotte vink je de E-commerce functies aan:
Om deze tag te kunnen activeren dien je onderstaand meetscript door de webbouwer in de winkelwagen met check-out knop te laten plaatsen boven de container-tag: datalayer.push({ "event": "checkout", "ecommerce": { "checkout": { "actionfield": { "step": 1, "products": [], "promoview": { "promotions": [{ "id": "bts", "name": "Back To School", "creative": "CHECKOUT right", "position": "right sidebar" ] ); Keuzemogelijkheden check-out Daarnaast kun je ook de keuzemogelijkheden binnen de check-out, bijvoorbeeld de keuze voor de betaal-provider of verzending meten met de geoptimaliseerde E- commerce module. Volg onderstaande stappen om deze meting in te stellen: Maak een trigger aan voor de keuze mogelijkheden binnen de check-out. Je kiest hierbij voor custom event all custom events. Vervolgens vul je onder event name to match checkoutoption in:
Vervolgens stel je de daadwerkelijke tag in. Je kiest hierbij voor onderstaande gebeurteniscategorie- en actie. Daarnaast vink je de E-commerce functies aan:
Nu kun je onderstaand meetscript door de webbouwer laten plaatsen op de check-out pagina boven de container-tag om deze tag te activeren:
datalayer.push({ "event": "checkoutoption", "ecommerce": { "checkout_option": { "actionfield": { "step": 3, "option": "Visa" ); 2. De meettags buiten de winkelwagen en checkout Ook de interacties buiten de winkelwagen kun je meten met de geoptimaliseerde E- commerce module. Volg onderstaande stappen om deze stappen te implementeren, zodat je een compleet beeld krijgt van het shopgedrag van je bezoekers: Impressies productcategorie en merken pagina s Voor het meten van de impressies op je productcategorie en merken pagina s dien je 2 zaken in te stellen: De reguliere Universal Analytics meetcode waarbij je de E-commerce functies hebt ingeschakeld; Onderstaand meetscript dien je te plaatsen op de productcategorie en merken pagina s boven de container-tag: <script> // Product impressions are sent by pushing an impressions object // containing one or more impressionfieldobjects. datalayer.push({ 'ecommerce': { 'currencycode': 'EUR', // Local currency is optional. 'impressions': [ { 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'list': 'Search Results', 'position': 1, { 'name': 'Donut Friday Scented T-Shirt',
'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'list': 'Search Results', 'position': 2 ] ); </script> Doorkliks naar productdetail pagina s Naast de bekeken producten, kun je ook de kliks op deze pagina gaan meten. Volg onderstaande stappen om deze meting in te stellen: Maak eerst een trigger aan voor de doorkliks naar de productdetailpagina s. Kies hierbij voor custom event all custom events. Vul vervolgens productclick in onder event name to match: Nu kun je de daadwerkelijke tag gaan instellen. Je vult hierbij onderstaande gebeurteniscategorie en actie in en vinkt de geoptimaliseerde E-commerce functies aan:
Ten slotte dien je onderstaand meetscript door de webbouwer te laten plaatsen op de productcategorie en merkenpagina s om deze tag te kunnen activeren:
datalayer.push({ "event": "productclick", "ecommerce": { "click": { "actionfield": { "list": "homepage", "products": [{ "id": "bc823", "name": "Fuelworks T-Shirt", "price": "92.00", "brand": "Fuelworks", "category": "T-Shirts", "position": "4" ] ); Bekeken productdetailpagina s Naast het meten van de producttoevoegingen op de productdetailpagina s, kun je ook de bekeken producten op deze pagina s gaan meten. Je dient hiervoor onderstaande zaken in te stellen: De reguliere Universal Analytics meetcode waarbij je de geoptimaliseerde E- commerce functies hebt aangevinkt. Onderstaand meetscript dien je op alle productdetailpagina s te laten plaatsen door de webbouwer boven de container-tag. <script> // Measure a view of product details. This example assumes the detail view occurs on pageload, // and also tracks a standard pageview of the details page. datalayer.push({ 'ecommerce': { 'detail': { 'actionfield': {'list': 'Apparel Gallery', // 'detail' actions have an optional list property. 'products': [{ 'name': 'Triblend Android T-Shirt', 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray' ] ); </script> // Name or ID is required.
Interne promotie We hebben nu de meting van de productcategorie/merken en productdetail pagina s ingesteld. Nu rest nog de interne promotie op de homepage. Onderstaand is een voorbeeld van een interne promotie op de homepage: Allereerst gaan we de meting instellen voor de bekeken vertoningen van deze interne promotie. Hiervoor dienen we onderstaande zaken in te stellen: De reguliere Universal Analytics meetcode waarbij de geoptimaliseerde E- commerce functies zijn aangevinkt. Daarnaast dien je onderstaand script laten plaatsen op de homepage boven de container-tag. <script> // An example of measuring promotion views. This example assumes that // information about the promotions displayed is available when the page loads. datalayer.push({ 'ecommerce': { 'promoview': { 'promotions': [ // Array of promofieldobjects.
{ 'id': 'JUNE_PROMO13', // ID or Name is required. 'name': 'June Sale', 'creative': 'banner1', 'position': 'slot1', { 'id': 'FREE_SHIP13', 'name': 'Free Shipping Promo', 'creative': 'skyscraper1', 'position': 'slot2' ] ); </script> Kliks op de interne promotie Vervolgens dien je de meting in te stellen voor de kliks op de interne promotie. Volg onderstaande stappen om deze meting in te stellen: Maak een trigger aan voor deze tag. Je kiest hierbij voor custom event all custom events. Vervolgens vul je promotionclick in onder event name to match: Vervolgens stel je de daadwerkelijke tag in. Je kiest hierbij voor onderstaande gebeurteniscategorie en actie. Daarnaast dien je de geoptimaliseerde E- commerce functies aan te vinken:
Ten slotte laat je onderstaand script op de homepage plaatsen door de webbouwer boven de container-tag: datalayer.push({ "event": "promotionclick", "ecommerce": { "promoclick": { "promotions": [{ "id": "bts",
"name": "Back To School", "creative": "HOME banner", "position": "right sidebar" ] ); 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. Hoe stel je deze gebeurtenissen in? Kies voor een Google Analytics tag met als tag-type Universal Analytics; Vervolgens maak je de volgende trigger aan. Je kiest voor click als type: Nu maak je een nieuwe trigger aan, waarbij je alleen de kliks op je eigen site meet: Je klikt op new some clicks. Nu kun je onderstaande filter invoeren voor jouw trigger:
Bovenstaand filter registreert alleen de button kliks op mijn site. Vervolgens geef je aan op welke pagina s je deze gebeurtenis wilt activeren: Met bovenstaand filter meet je de button kliks op alle pagina s. Dit is hetzelfde filter als de gtm.linkclick tag uit de vorige versie van Google Tagmanager. Nu gaan we de daadwerkelijke tag voor de button kliks instellen:
In bovenstaand voorbeeld heb ik handmatig de gebeurteniscategorie en actie ingevuld. Voor de gebeurtenislabel heb ik gekozen voor de ingebouwde variabele Click URL. Hiermee kun je namelijk de bestemmings-url van de klik achterhalen:
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 uitgaande links van je site doormeten. Je dient een aparte Google Analytics-tag in te stellen voor deze gebeurtenis. Daarnaast dien je de trigger voor deze gebeurtenissen hiervoor aan te passen:
In bovenstaand voorbeeld stel je in dat je alleen de kliks op png afbeeldingen wilt meten. Vervolgens stel je jouw Google Analytics tag voor deze gebeurtenis in:
In bovenstaand voorbeeld heb ik het volgende geprogrammeerd: 1. Ik wil alleen PNG-afbeeldingen doormeten. 2. De gebeurtenislabel geeft de URL weer van de kliks op de afbeeldingen. 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 uitgaande links, PDF-brochures 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 30 seconden 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 trigger voor deze aangepaste bounceberekening. Je kiest voor timer all timers:
In bovenstaande trigger heb ik gekozen voor een aangepaste bouncerate meting van 30 seconden (30.000 ms). Ik kies voor een limiet van 1, want ik wil deze gebeurtenis slechts eenmaal laten activeren. Ten slotte laat ik deze gebeurtenis op alle pagina s plaatsvinden.
Nu gaan we de daadwerkelijke tag instellen voor de aangepaste bounceberekening: De parameters categorie en actie kun je handmatig invullen. Het is heel belangrijk om onder niet-interactietreffer niet waar in te vullen. De aangepaste bounceberekening wil je namelijk juist wel laten meewegen binnen je bounceberekening.
De resultaten van deze implementatie kun je terugvinden onder topgebeurtenissen. Nu weet je dus, hoeveel bezoekers meer of minder dan 30 seconden actief zijn geweest op je site. Wat kun je met deze aangepaste bounceberekening? Door het instellen van deze aangepaste gebeurtenis, 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: Instellen van de interactie binnen je winkelwagen of aanvraagformulier Iedere stap binnen de winkelwagen kun je standaard meten met Google Analytics. De interactie met de invulvelden binnen je winkelwagen of aanvraagformulier meet Google Analytics niet standaard. Je kunt de interactie met de invulvelden binnen je winkelwagen met event tracking meten. Wat zijn de voordelen om dit te meten? Je kunt bepalen hoeveel bezoekers starten met het invullen van je formulier; Je kunt bepalen welke invulvelden de bezoekers overslaan; En last but not least: je kunt bepalen op welke invulveld(en) de meeste bezoekers afhaken. Met onderstaande stappen kun je deze meting via Google Tagmanager instellen:
1. Kies binnen de trigger voor pages some pages. Vervolgens kun je aangeven op welke pagina s je deze gebeurtenis wilt laten activeren. In dit geval kies ik voor de check-out pagina s: 2. Maak vervolgens een aangepaste html-tag om de invulvelden te herkennen binnen je formulier(en) Onderstaande code kun je hiervoor gebruiken:
<script> (function($) { $(document).ready(function() { $('form :input').blur(function () { if($(this).val().length > 0 &&!($(this).hasclass('completed'))) { // The if statement above checks to see if there is a value in the form field and if that field does NOT have the class "completed". // If those conditions are met, we push information to the datalayer that tells GTM the form field was completed, along with the // event category (form name), event action (field name), and event label (completed). datalayer.push({'eventcategory': 'Form - ' + $(this).closest('form').attr('id'), 'eventaction': 'completed', 'eventlabel': $(this).attr('id'), 'event': 'gaevent'); // Once we fire an event for this form field that is completed, we need to add the class "completed" to this form field to prevent it from firing again // if the user mouses in and out of this field more than once. $(this).addclass('completed'); else if(!($(this).hasclass('completed')) &&!($(this).hasclass('skipped'))) { // If the first if statement didn't match, it means that either the form field was empty or it had the class of "completed." Here, the else if statement checks // to see if it doesn't have the class "completed" AND doesn't have the class "skipped." In other words, if the form field is empty and we haven't already fired // an event to GA to indicate that the field was skipped. If this is the case, we will push information to the datalayer that tells GTM the form field was // skipped, along with the event category (form name), event action (field name), and event label (skipped). datalayer.push({'eventcategory': 'Form - ' + $(this).closest('form').attr('id'), 'eventaction': 'skipped', 'eventlabel': $(this).attr('id'), 'event': 'gaevent'); // Once we fire an event for this form field that is skipped, we need to add the class "skipped" to this form field to prevent it from firing again // if the user mouses in and out of this field more than once. $(this).addclass('skipped'); ); ); )(jquery); </script> 3. Nu dien je de daadwerkelijke tag te activeren, zodat je de interactie met de invulvelden binnen de winkelwagen kunt bepalen. Allereerst dien je jouw trigger aan te maken. Kies voor more custom event. Vervolgens vul je gaevent in onder event name to match:
In bovenstaand voorbeeld heb ik het volgende filter ingesteld: Ten slotte kun je een beschrijvende naam koppelen aan jouw trigger. Vervolgens ga je de daadwerkelijke tag maken:
De Niet-interactietreffer dien je op waar te zetten. Anders telt Google Analytics namelijk de interactie van de bezoeker binnen je winkelwagen mee binnen de bounceberekening. Bovenstaande variabelen maak je als volgt aan. Kies voor de variabele Data Layer Variable:
De Data Layer Variable Name dient exact overeen te komen met de naamgeving in de aangepaste html-tag. Soortgelijke variabelen dien je ook voor de categorie actie en label aan te maken. Tip: test via Google Tagmanager en de real-time rapporten van Google Analytics of je implementatie succesvol is geweest.
Indien je de naamgeving van de gebeurteniscategorie (formulier naam) en label (naam invulveld) wil aanpassen, dien je de webbouwer dit te laten doen. 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 meten. Je kunt alleen niet de interactie van de gebruiker met je YouTube video meten. Hiervoor dien je een aparte meting in te stellen. Door het instellen van deze aangepaste gebeurtenis kun je de interactie met je YouTube video in 4 blokken onder verdelen: Volg onderstaande stappen in Google Tagmanager om deze aangepaste gebeurtenis te kunnen instellen: Maak een variabele aan om de YouTube video( s) te signaleren op je site. Kies hierbij voor de variabele custom javascript en plaats de plug-in voor de YouTube meting binnen onderstaand veld:
Bovenstaande code kun je via dit artikel ophalen en plaatsen in bovenstaand Custom javascript veld. Nu maak je een trigger aan voor deze aangepaste gebeurtenis. Je kiest voor pageview en voegt onderstaand filter toe:
In bovenstaand filter activeer je de meting, wanneer er een YouTube video aanwezig is op de pagina. Daarom kies je voor het trigger-type Dom-Ready. 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:
Nu gaan we de tag aanmaken om de meting te activeren. Onderstaande trigger dien je in te stellen om de interactie met de YouTube video s te kunnen meten:
Je dient hierbij te kiezen voor de trigger custom event. Vervolgens koppel je onderstaand filter aan dit custom event: Ten slotte dien je een tag aan te maken met de tracktype event om de meting van de YouTube video( s) te activeren. Nu gebruik je de eerder aangemaakte variabelen voor het invullen van de gebeurtenis categorie/actie en label. De niet-interactie treffer dient waar te zijn. Zo kun je de interactie van de gebruiker met je YouTube video s uitsluiten van je bouncerate berekening.
Bovenstaande gebeurteniscategorie/label en actie kun je via onderstaande variabele instellen. De Data Layer Variable naam dient exact overeen te komen met de benaming in de aangepaste html tag.
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: Je kiest voor een aangepaste html-tag en stelt een trigger in voor alle pagina s; Vervolgens maak je een aangepaste html-tag aan voor scrolldiepte. Hierin plaats je onderstaande plug-in. <script> /*! * @preserve * jquery.scrolldepth.js v0.4.1 * Copyright (c) 2014 Rob Flaherty (@robflaherty) * Licensed under the MIT and GPL licenses. */ ;(function ( $, window, document, undefined ) { "use strict"; var defaults = { elements: [], minheight: 0, percentage: true, testing: false, $window = $(window), cache = []; /* * Plugin */ $.scrolldepth = function(options) { var starttime = +new Date; options = $.extend({, defaults, options); // Return early if document height is too small if ( $(document).height() < options.minheight ) { return; // Get some information about the current page var pagetitle = document.title;
// Establish baseline (0% scroll) sendevent(pagetitle,'baseline'); /* * Functions */ function sendevent(action, label, timing) { if (!options.testing) { if (typeof(datalayer)!== "undefined") { datalayer.push({'event':'scrolldistance', 'eventcategory':'reading', 'eventaction': action, 'eventlabel': label, 'eventvalue': 1, 'eventnoninteraction': true); if (arguments.length > 2) { datalayer.push({'event':'scrolltiming', 'eventcategory':'reading', 'eventaction': action, 'eventlabel': label, 'eventtiming': timing); else { if (typeof(ga)!== "undefined") { ga('send', 'event', 'Reading', action, label, 1, {'noninteraction': 1); if (arguments.length > 2) { ga('send', 'timing', 'Reading', action, timing, label); if (typeof(_gaq)!== "undefined") { _gaq.push(['_trackevent', 'Reading', action, label, 1, true]); if (arguments.length > 2) { _gaq.push(['_tracktiming', 'Reading', action, timing, label, 100]); else { $('#console').html(action + ': ' + label); function calculatemarks(docheight) { return { '25%' : parseint(docheight * 0.25, 10), '50%' : parseint(docheight * 0.50, 10), '75%' : parseint(docheight * 0.75, 10), // 1px cushion to trigger 100% event in ios '100%': docheight - 1
; function checkmarks(marks, scrolldistance, timing) { // Check each active mark $.each(marks, function(key, val) { if ( $.inarray(key, cache) === -1 && scrolldistance >= val ) { sendevent(pagetitle, key, timing); cache.push(key); ); function checkelements(elements, scrolldistance, timing) { $.each(elements, function(index, elem) { if ( $.inarray(elem, cache) === -1 && $(elem).length ) { if ( scrolldistance >= $(elem).offset().top ) { sendevent('elements', elem, timing); cache.push(elem); ); /* * Throttle function borrowed from: * Underscore.js 1.5.2 * http://underscorejs.org * (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors * Underscore may be freely distributed under the MIT license. */ function throttle(func, wait) { var context, args, result; var timeout = null; var previous = 0; var later = function() { previous = new Date; timeout = null; result = func.apply(context, args); ; return function() { var now = new Date; if (!previous) previous = now; var remaining = wait - (now - previous); context = this; args = arguments; if (remaining <= 0) {
cleartimeout(timeout); timeout = null; previous = now; result = func.apply(context, args); else if (!timeout) { timeout = settimeout(later, remaining); return result; ; /* * Scroll Event */ $window.on('scroll.scrolldepth', throttle(function() { /* * We calculate document and window height on each scroll event to * account for dynamic DOM changes. */ var docheight = $(document).height(), winheight = window.innerheight? window.innerheight : $window.height(), scrolldistance = $window.scrolltop() + winheight, // Recalculate percentage marks marks = calculatemarks(docheight), // Timing timing = +new Date - starttime; // If all marks already hit, unbind scroll event if (cache.length >= 4 + options.elements.length) { $window.off('scroll.scrolldepth'); return; // Check specified DOM elements if (options.elements) { checkelements(options.elements, scrolldistance, timing); // Check standard marks if (options.percentage) { checkmarks(marks, scrolldistance, timing);, 500)); ;
)( jquery, window, document ); jquery.scrolldepth(); </script> Vervolgens dien je een tag aan te maken om de scrolldiepte meting te activeren. Je stelt hiervoor de volgende trigger in: Je kiest voor een custom event en vult ScrollDistance in onder event name to match en klikt op all custom events:
Ten slotte geef je de trigger een beschrijvende naam. Nu gaan we de daadwerkelijk tag instellen om de scrolldiepte meting te activeren.
Hierbij dien je voor de gebeurtenis categorie/actie/label en waarde afzonderlijke variabelen aan te maken. De gebeurtenis categorie/actie en label zijn verplicht. De gebeurteniswaarde is optioneel. Deze variabele stuurt de informatie over de scrolldiepte van de site door aan Google Analytics. Daarnaast is het belangrijk om binnen de Non-Interaction Hit te kiezen voor true. Deze aangepaste gebeurtenis wil je namelijk niet laten meewegen binnen je bouncerate berekening.
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 en op welke artikelen reageren ze? Vervolgens kun je via een segment de impact hiervan 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: Je dient te kiezen voor een aangepaste html-tag en onderstaande trigger in te stellen: Ik heb hierbij gekozen voor Page View en onderstaand filter ingesteld:
Bovenstaand filter activeert alleen deze tag, wanneer er een social media knop op de pagina aanwezig is. Daarom kies je voor de trigger-type DOM Ready. Om dit filter te kunnen aanmaken dien je onderstaande AddThis variabele in te stellen:
Vervolgens kun je de plug-in binnen onderstaand html-veld plaatsen: De plug-in kun je kopiëren en plakken 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> Nu dien je de meting voor de kliks op de social media knoppen te activeren. Allereerst dien je een trigger in te stellen:
Je dient hierbij te kiezen voor custom event en onderstaand filter in te stellen: Vervolgens stel je de tag in voor deze sociale gebeurtenis. Kies voor de tracktype social en kies voor onderstaande variabelen:
Bovenstaande variabelen voor Network/Action en Action Target kun je aanmaken met een Data Layer Variable:
Een soortgelijke variabele dien je ook aan te maken voor de sociale actie (gasocialaction) en het actiedoel (gasocialtarget). 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 Naast de gedeelde berichten via social media, wil je ook de reacties op je artikelen kunnen meten. Hoeveel bezoekers geven een reactie op je artikelen? Vervolgens kun je de achtergelaten reacties als segment instellen, zodat je de impact van de achtergelaten reacties op de site conversie kunt gaan bepalen. Via onderstaande stappen kun je de reacties via het Disqus-systeem als gebeurtenis instellen: Kies voor de aangepaste html tag. Vervolgens stel je onderstaande trigger in. Je kiest hierbij voor de trigger-type Window Loaded. In de vorige versie van Google Tagmanager was de benaming voor deze variabele gtm.load. Binnen het filter kies je voor de variabele Disqus is gelijk aan true: Om deze variabele in te stellen kies je voor Custom Javascript
Bovenstaande JavaScript functie kun je via onderstaande code kopiëren en plakken om deze zelf in te stellen: 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; Vervolgens plaats je de plug-in voor de Disqus meting binnen het aangepaste html veld:
Bovenstaande plug-in kun je via de onderstaande code kopiëren en plakken binnen je eigen aangepaste html-tag: <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> Nu maak je een tag om het meten van de reacties via het Disqus-systeem te activeren. Je kiest hierbij voor de tag-type Universal Analytics. Vervolgens stel je onderstaande trigger in. Je kiest hierbij voor custom event all custom events. Vervolgens vul je gaevent in onder event name to match: Nu ga je de daadwerkelijke tag instellen. Je kiest hierbij voor onderstaande variabelen om de gebeurteniscategorie/actie en label in te vullen. Daarnaast zet je de Non-Interaction Hit op true. Je wilt deze gebeurtenis namelijk niet laten meewegen binnen je bounceberekening:
Onderstaand heb ik een voorbeeld weergegeven hoe je bovenstaande variabelen kunt instellen. Je kiest hierbij voor de variabele Data layer Variable. Vervolgens dien je de naam van de Data Layer Variable in te vullen voor de gebeurteniscategorie/actie en label:
Soortgelijke variabelen dien je ook in te stellen voor de gebeurtenisactie (gaeventaction) en label (gaeventlabel). Ten slotte kun je met de test versie van Google Tagmanager en de real-time rapporten nagaan of Google Analytics de achtergelaten reacties via het Disqus-systeem meet: