Embed Size (px)
Citation preview
Handleiding Google Tagmanager (GTM)
Inhoudsopgave Basisbeginselen .................................................................................................... 2 Google Tagmanager in de praktijk .............................................................................. 4 Meerdere domeinen doormeten ................................................................................12 E-commerce tracking met Google Tagmanager .............................................................14
De geoptimaliseerde E-commerce module ................................................................17 Event tracking via Google Tagmanager .......................................................................42
Kliks op call-to-action knoppen ..............................................................................42 Uitgaande links .................................................................................................45 Pop-ups/ins bijvoorbeeld voor je nieuwsbrief-inschrijving ....................................52
Aanvullende mogelijkheden event tracking via Google Tagmanager ....................................55 Instellen van een aangepaste bounceberekening ........................................................55 Afhakers binnen je formulieren achterhalen ...............................................................59 Meten van de interactie met je YouTube video’s .........................................................66 Scrolldiepte meten in Google Analytics ....................................................................71 Geen weergegeven zoekresultaten ...................................................................76 De voordelen van Google Tagmanager ....................................................................82
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 Analytics-implementatie 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 externe systemen zoals bijvoorbeeld 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 of een offerte heeft aangevraagd. 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. Een voorbeeld hiervan is het signaleren van een Youtube video.
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 beheerder→ Google Tagmanager installeren:
Tags aanmaken
Vervolgens kun je je tags gaan aanmaken. Bijvoorbeeld de standaard Google Analytics-code. Maak eerst een ‘tag’ aan:
Kies als tag voor Google Analytics;
Vervolgens kies je als tagtype voor Universal Analytics;
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 functies voor display advertenties inschakelen aan om de demografische rapporten in Google Analytics te activeren. Ten slotte kies je voor de trackingtype paginaweergave.
Onder Veldnaam 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 stel ik allereerst de variabele debug_mode (fouten oplossen) in. Vervolgens stel ik een lookup-table (opzoek tabel) in. Ik gebruik hierbij de zojuist ingestelde variabele debug_mode. 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 uitgang niet te kiezen voor 100, maar bijvoorbeeld 50%. 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 versie maken en voorbeeld. Nu kun je de geactiveerde meetcodes via Google Tagmanager bekijken en je tag definitief publiceren.
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:
Stap 1
Stap 2
Stap 3
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 alle pagina’s van de site;
Nu dien je de allowLinker op true te zetten en 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.
Tot slot dien je te testen of de domeinen daadwerkelijk aan elkaar gekoppeld zijn. De toevoeging ga= wil zeggen dat de cross-domain tracking implementatie succesvol is geweest.
http://www.digitalanalisten.nl/category/google-analytics/#_ga=1.189664747.1742965705.1428487983
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:
Je dient allereerst 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 - Vereist
'transactionAffiliation': '[Server Variable]', // store name - Type:String – Optioneel
'transactionTotal': [Server Variable], //total revenue - Type:Numeric - Vereist
'transactionTax': [Server Variable], // Tax amount for transaction - Type:Numeric -
Optioneel
'transactionShipping': [Server Variable], // Shipping cost - Type:Numeric -
Optioneel
'transactionProducts': [{
'sku': '[Server Variable]', // Product SKU - Type:String - Vereist
'name': '[Server Variable]', // Product Name - Type:String - Vereist
'category': '[Server Variable]', // Product Category - Type:String - Optioneel
'price': [Server Variable], // Product Price - Type:Numeric - Vereist
'quantity': [Server Variable] // Product Quantity - Type:Numeric - Vereist
},{
'sku': '[Server Variable]', // Product SKU - Type:String - Vereist
'name': '[Server Variable]', // Product Name - Type:String - Vereist
'category': '[Server Variable]', // Product Category - Type:String - Optioneel
'price': [Server Variable], // Product Price - Type:Numeric - Vereist
'quantity': [Server Variable] // Product Quantity - Type:Numeric - Vereist
}]
}];
</script>
Vervolgens dien je de trigger voor je E-commerce tag te bepalen. Kies hierbij voor paginaweergave en vervolgens voor het triggertype dom gereed. Je wilt namelijk met deze trigger alleen het E-commerce script activeren op deze
pagina. Ten slotte vul je de bedankpagina van de bestelling in onder activeren ingeschakeld:
Nu maak je onderstaande E-commerce tag aan. Je kiest hierbij als trackingtype voor transactie:
Vervolgens kies je onder meer voor de zojuist ingestelde trigger:
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 page;
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:
<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({
'ecommerce': {
'purchase': {
'actionField': {
'id': 'T12345', // Transaction ID. Required for purchases and
refunds.
'affiliation': 'Online Store',
'revenue': '35.43', // Total transaction value (incl. tax and shipping)
'tax':'4.90',
'shipping': '5.99',
'coupon': 'SUMMER_SALE'
},
'products': [{ // List of productFieldObjects.
'name': 'Triblend Android T-Shirt', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray',
'quantity': 1,
'coupon': '' // Optional fields may be omitted or set to empty
string.
},
{
'name': 'Donut Friday Scented T-Shirt',
'id': '67890',
'price': '33.75',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Black',
'quantity': 1
}]
}
}
});
</script>
Producttoevoegingen aan winkelwagen Vervolgens wil je de producttoevoegingen aan de winkelwagen gaan bepalen. Maak hiervoor onderstaande trigger aan. Je kiest hierbij voor aangepaste gebeurtenis. Vervolgens vul je addToCart in voor naam van de gebeurtenis. AddToCart is
namelijk de 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": "EUR", "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 aangepaste gebeurtenis. Vervolgens dien je removeFromCart in te vullen binnen activeren ingeschakeld:
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": "EUR", "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 aangepaste gebeurtenis. Vervolgens vul je de naam van de gebeurtenis 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 aangepaste gebeurtenis. Nu vul je checkoutOption in onder de naam van de gebeurtenis:
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 de 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 aangepaste gebeurtenis. Vul vervolgens productClick in onder de naam van de gebeurtenis:
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 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', // Name or ID is required.
'id': '12345',
'price': '15.25',
'brand': 'Google',
'category': 'Apparel',
'variant': 'Gray'
}]
}
}
});
</script>
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 aangepaste gebeurtenis. Vervolgens vul je onder activeren ingeschakeld de naam van je gebeurtenis in:
Nu kun je de daadwerkelijke tag instellen. 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 javascript-codes 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 call-to-action knoppen; 2. Uitgaande verwijzingen; 3. PDF-downloads voor brochures of handleidingen; 4. Pop-ups/ins bijvoorbeeld voor je nieuwsbrief-inschrijving
Kliks op call-to-action knoppen
Hoe stel je deze gebeurtenis in?
Allereerst maak je een trigger aan, waarbij je alleen de kliks op een call-to-action binnen de homepage activeert:
Je kiest hierbij als triggertype voor klik op link. Onder inschakelen wanneer dien je te kiezen voor de pagina waar de gebeurtenis plaatsvindt. Dat is in dit geval de homepage. (/) Tot slot dien je activeren ingeschakeld in te vullen. Onder Click URL kies je voor de pagina waarop de bezoeker terechtkomt, nadat deze heeft geklikt op de call-to-action knop.
Nu dien je de daadwerkelijke tag in te stellen voor de call-to-action knop;
In bovenstaand voorbeeld heb ik handmatig de gebeurteniscategorie ingevuld. Voor de gebeurtenisactie heb ik gekozen voor het paginapad waar de klik plaatsvindt. Vervolgens heb ik hieraan een gebeurtenislabel gekoppeld met de click url waar de bezoeker op terechtkomt, wanneer deze klikt op de call-to-action knop.
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-weergave zonder filters, om te testen of het allemaal werkt:
Uitgaande links
Naast de call-to-action knoppen op de site, wil je ook graag de uitgaande links op je
site kunnen meten. Mijn advies is wel om alleen de uitgaande links te meten die ook
impact hebben op je website resultaten.
De uitgaande verwijzingen van een blog naar je commerciële website heeft impact op
je conversie. Daarom adviseer ik om een dergelijke uitgaande verwijzing als
gebeurtenis in te stellen:
Maak onderstaande trigger aan voor je uitgaande verwijzing;
Je kiest hierbij als triggertype voor klik op link. Daarnaast dien je onder inschakelen
wanneer te kiezen voor de pagina of pagina’s waar de uitgaande verwijzing
plaatsvindt. Ik heb hierbij gekozen voor alle pagina’s van de blog. (.*)
Ten slotte dien je onder activeren ingeschakeld te kiezen voor de click-url waar de
gebeurtenis naartoe verwijst. In dit geval kies ik hierbij voor de verwijzingen naar
ganalytics.nl.
Vervolgens stel je onderstaande tag in;
De gebeurteniscategorie kun je handmatig invullen. Vervolgens kies je onder de gebeurtenis actie en label respectievelijk voor page path en Click URL. Page path is
de pagina waar de gebeurtenis plaatsvindt. De Click URL is de verwijzing naar de externe site. (ganalytics.nl)
Tot slot voeg je de zojuist aangemaakte trigger toe aan deze tag;
PDF-downloads PDF-downloads meet je niet automatisch, omdat je de reguliere Analytics code niet op een PDF pagina kunt plaatsen. Daarom adviseer ik om de klik op de PDF download als gebeurtenis in te stellen:
Stel onderstaande trigger hiervoor in. Kies hierbij als triggertype voor klik op link. Onder inschakelen wanneer kies je voor alle pagina’s. Je wilt namelijk alle PDF-downloads kunnen meten. Ten slotte kies je onder activeren ingeschakeld voor de Click URL’s van de PDF’s op de site. (komt overeen met reguliere expressie)
Vervolgens stel je de daadwerkelijke tag in voor de PDF-downloads. Je kunt hierbij de gebeurtenis categorie handmatig invullen. Vervolgens kies je respectievelijk voor de gebeurtenis actie en label voor page path en Click URL. De page path is de pagina waar de klik op de PDF link of knop plaatsvindt. De Click-URL is de verwijzing naar jouw PDF document.
De Niet-interactietreffer dient op waar te staan, omdat je de PDF downloads niet wil laten meetellen binnen de bounceberekening.
Tot slot kies je voor de zojuist aangemaakte trigger;
Pop-ups/ins bijvoorbeeld voor je nieuwsbrief-inschrijving
Veel websites/webshops gebruiken pop-ups/ins voor het verkrijgen van nieuwsbrief-abonnees. Deze nieuwsbrief-inschrijvingen dien je als gebeurtenis in te stellen, omdat de URL ongewijzigd blijft na de interactie hiermee. Een voorbeeld hiervan is de volgende pop-up om bezoekers uit te nodigen zich in te schrijven voor een nieuwsbrief?
Deze gebeurtenis stel je als volgt in:
Voeg onderstaande trigger in voor de kliks op jouw pop-up/in. Je kiest hierbij voor de triggertype klik, omdat de URL van deze pop-up ongewijzigd blijft. Vervolgens kies je onder activeren ingeschakeld voor click classes. Deze kun je achterhalen door het element van de pop-up te bekijken in de broncode:
Nu kun je de gebeurtenis-tag voor jouw pop-up instellen. De gebeurteniscategorie dien je handmatig een beschrijvende naam te geven. Vervolgens stel je de gebeurtenisactie en label in. Page path is de pagina waar de bezoeker zich inschrijft voor de updates. De click classes is de call-to-action knop van deze pop-up.
De Niet-interactieftreffer dien je op waar te zetten, aangezien je deze gebeurtenis niet wil laten meetellen binnen de bounceberekening.
Tot slot voeg je de zojuist aangemaakte trigger toe.
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 langer dan 30 seconden op de site actief zijn en slechts 1 pagina bekijken, telt Google Analytics ook als bounce. Via Google Tagmanager kun je een bounceberekening instellen op basis van tijd. Bijvoorbeeld 30 seconden:
Maak een trigger voor deze aangepaste bounceberekening;
In bovenstaande trigger heb ik gekozen voor een aangepaste bounceberekening 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 gebeurtenis categorie en actie dien je een beschrijvende naam te geven. Het is heel belangrijk om onder niet-interactietreffer onwaar in te vullen. De aangepaste bounceberekening wil je namelijk juist wel laten meewegen binnen je bounceberekening. Tot slot selecteer je de zojuist aangemaakte trigger voor deze aangepaste 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:
Afhakers binnen je formulieren achterhalen
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 deze aangepaste gebeurtenis in te stellen?
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. Maak eerst een trigger aan voor de pagina of pagina’s waarop je deze aangepaste gebeurtenis wilt laten activeren. Bijvoorbeeld alle stappen binnen je winkelwagen:
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> Tot slot dien je de zojuist ingestelde trigger te selecteren:
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 hierbij voor aangepaste gebeurtenis. Vervolgens dien je onder activeren ingeschakeld gaEvent in te vullen.
Vervolgens ga je de daadwerkelijke tag instellen;
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. Vul onderstaande variabele voor gegevenslaag in:
De naam voor de variabele voor gegevenslaag dient exact overeen te komen met de naamgeving in de aangepaste html-tag. Soortgelijke variabelen dien je ook voor de gebeurtenis 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 in te stellen:
Maak een variabele aan om de YouTube video(‘s) te signaleren op je site. Kies hierbij voor de variabele aangepaste JavaScript macro en plaats de plug-in voor de YouTube meting binnen onderstaand veld:
Bovenstaande code kun je via dit artikel ophalen en plaatsen in bovenstaand aangepaste JavaScript macro veld.
Nu maak je een trigger aan voor deze aangepaste gebeurtenis. Je kiest als triggertype voor Dom gereed. Vervolgens kies je onder activeren ingeschakeld voor Youtube is aanwezig= true.
In bovenstaande trigger activeer je de meting, wanneer er een YouTube video aanwezig is op de pagina. Daarom kies je voor het trigger-type Dom gereed.
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:
Tot slot dien je de zojuist ingestelde trigger te selecteren:
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 aangepaste gebeurtenis. Onder activeren ingeschakeld vul je de naam van de gebeurtenis youtube in:
Ten slotte dien je een tag aan te maken met het trackingtype gebeurtenis 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 bounceberekening.
Bovenstaande gebeurteniscategorie/label en actie kun je via onderstaande variabele instellen. De Data-laag 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 scrolldiepte
Om scrolldiepte te activeren op je site dien je eerst een zogenaamde listener in te stellen.Mijn advies is om deze plug-in van Rob Flaherty hiervoor te gebruiken:
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 deze plug-in.
Vervolgens dien je een tag aan te maken om de scrolldiepte meting te activeren. Je kies hierbij voor aangepaste gebeurtenis en vult onder activeren ingeschakeld de naam van de gebeurtenis in:
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 waarden kun je via onderstaande variabele voor de gegevenslaag instellen:
Deze variabele stuurt de informatie over de scrolldiepte van de site door aan Google Analytics. Daarnaast is het belangrijk om voor Niet-interactietreffer is waar te kiezen. Je wilt deze scrolldiepte meting namelijk niet laten meetellen binnen je bounceberekening. Ten slotte dien je in de real-time rapporten na te gaan of je implementatie succesvol is geweest:
Geen weergegeven zoekresultaten In Google Analytics kun je de ingetypte zoekopdrachten activeren via de instellingen voor
rapportageweergave. Je wilt echter ook kunnen bepalen welke zoekopdrachten geen
zoekresultaten opleveren. Mijn advies is om dit via onderstaande stappen in te stellen:
Plaats onderstaand meetscript in een aangepast html veld en kies als trigger voor alle pagina’s;
Onderstaand meetscript kun je kopiëren en plaatsen in het aangepaste html veld: <script> var str = {{ResultsPageTitle}}; var patt = new RegExp("Nothing Found"); var res = patt.test(str); if (res) { dataLayer.push({ 'event': 'gaTriggerEvent', 'gaEventCategory': '0SearchResult', 'gaEventAction': '{{URLQueryText}}' }); } </script>
Vervolgens gaan we 2 variabelen instellen die we nodig hebben bij de activatie van deze meting.
De URL-query tekst is de parameter van je zoekmachine op de site. Voor mijn blog is dit ‘s’. Indien je een zoekopdracht intypt binnen je zoekmachine, achterhaal je deze parameter. De variabele ResultsPageTitle is een lastige. Deze variabele heb je nodig om de pagina met geen zoekresultaten te herkennen. Er dient een element (div) id op deze pagina te staan. Anders kun je deze meting namelijk niet instellen.
Nu gaan we de trigger instellen voor de activerings tag. Je kiest hierbij voor aangepaste gebeurtenis. Vervolgens vul je onder activeren ingeschakeld de naam van je gebeurtenis in:
Nu kunnen we de tag gaan instellen om de meting voor 0 zoekresultaten te activeren;
Bovenstaande gebeurteniscategorie – en actie dien je als variabele voor gegevenslaag in te stellen:
De naamgeving van je variabele voor gegevenslaag dient exact overeen te komen met de naamgeving binnen je aangepaste html tag. Daarnaast dient de Niet-interactietreffer op waar te staan. Deze meting wil je namelijk niet laten meetellen binnen de bounceberekening.
Tot slot selecteer je de zojuist ingestelde trigger om deze meting te activeren.
Tip: test binnen de real-time rapporten in een weergave zonder filters of Google Analytics deze gebeurtenis weergeeft.
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. Heb je vragen n.a.v. deze handleiding? Mail mij gerust!
