Handig stappenplan: Google Analytics installeren met Google Tag Manager

Auteur

Glenn Kesteleyn

Geschatte leestijd
10 minuten

Welkom op onze allereerste how-to blogpost! Hoe kan het anders dan deze over een van mijn favoriete tools te laten gaan: Google Tag Manager.  De Tag Manager werd door Google ontwikkeld om het leven van digital marketeers een stuk makkelijker te maken. In dit blogbericht leg ik je uit hoe GTM je tijd en geld kan besparen én geef ik een handig stappenplan mee. Hiermee kan je probleemloos jouw webtracking via Google Tag Manager laten lopen.

Wat is Google Tag Manager?

Zoals de naam Google Tag Manager (ook wel Tag Manager of GTM genoemd) doet vermoeden is deze tool een gebruiksvriendelijke toepassing die tags of ‘code-snippets' beheert. Deze tags of snippets zijn stukjes code die worden toegevoegd aan de broncode van een website om vervolgens gegevens uit te wisselen met externe tools of programma’s. Waar je voordien voor elk nieuw programma de broncode van een website moest aanpassen doe je dit nu via GTM. Je hoeft slechts éénmaal de GTM-container (installatiecode in javascript) in de broncode te plaatsen. Vanaf nu hoef je dus niet meer bij een developer aan te kloppen voor de implementatie van een nieuw programma!

Hoe werkt het?

Zodra de GTM container op de website geplaatst is kan de fun beginnen. Vanaf nu heb je 3 elementen waarmee je aan de slag kan:

  1. Tag: een stukje code (snippet) dat wordt toegevoegd aan een pagina

  2. Trigger: bepaalt waar en wanneer een tag mag uitgevoerd worden

  3. Variabele: een data element waarmee waarden kunnen worden onthouden of meegeven

Deze elementen geven je alles wat je nodig hebt om programma’s zoals Google Analytics, Adwords, Hotjar, Fullstory en dergelijke te implementeren. Voor geen van deze tools hoef je nu nog in de broncode van een website te werken. Je voert simpelweg een tag in die de code bevat voor het programma in kwestie. Dan bepaal je de trigger; wanneer deze code uitgevoerd moet worden. Indien nodig kan je nog variabele declareren om waarden mee te geven of te onthouden.

En dat is nog niet alles. GTM geeft je de mogelijkheid jouw webtracking te finetunen. Je kan zo bijvoorbeeld custom events laten registreren en gegevens doorsturen naar GA. Waar dit voordien een hele klus was voor zowel marketeer als developer kan het nu binnen enkele muisklikken gepiept zijn. Ook (enhanced) e-commercetracking kan worden geïnstalleerd via gtm. Hierbij maakt de tool gebruik van zijn dataLayer. Dit is een Javascript Array waar GTM informatie plaatst en kan uitwisselen met de GTM-container in de broncode van de website. Maar we wijken af, laten we bij de essentie van de zaak blijven: het overzetten van GA naar GTM. 

Webtracking van GA naar GTM: een handig stappenplan

Ondanks het gebruiksgemak van de tool merken we dat er wel eens verwarring ontstaat bij het overzetten van de snippets naar GTM. Daarom besloten we bij Brandle een handig stappenplan uit te schrijven zodat ook jij zorgeloos de overstap kan maken van GA naar GTM zonder verlies van gegevens! 

Het principe is simpel: Je koppelt GA aan GTM door de GA tracking-ID in te voeren in een nieuwe Universal Analytics-tag in de Tag Manager. Ten slotte plaats je de GTM container op z'n plaats volgens de instructies verwijder je de GA code snippet uit de broncode van jouw website. That's it.

De uitwerking hiervan kan echter wel eens problemen opleveren als je niet vertrouwd bent met de achterliggende werking van deze tools. Om zeker te zijn dat je geen gegevens verliest kan je best de aanpassingen eerst testen alvorens definitieve veranderingen door te voeren. Aan de hand van deze 5 stappen ben je zeker van een vlotte overgang zonder verlies van gegevens:

Stap 1: Creëer een nieuwe property in GA

Stap 2: GTM Container snippet genereren

Stap 3: Maak de Universal Analytics-tag in GTM

Stap 4: Testen en publiceren

Stap 5: Testproperty verwijderen en originele GA tracking-ID toevoegen in GTM

(Het is mogelijk stap 1 en 5 over te slaan door de Analytics tracking code meteen te verwijderen na het plaatsen van de GTM code. We raden echter aan de eerste keer op zeker te spelen en de uitgebreide aanpak te kiezen door deze 5 stappen te volgen.)

Stap 1: Creëer een nieuwe property in GA

Zoals gezegd gaan we voorzichtig te werk om zeker geen data te verliezen of foutieve data te verkrijgen. We laten de huidige GA opvolging voorlopig doorgaan en starten parallel de nieuwe opvolging via GTM. Dit doen we eerst binnen een nieuwe Property binnen de GA-account die je wilt over zetten naar GTM. Deze property brengt automatisch een nieuwe view met zich mee. In deze ‘testview’ zullen we de nagaan of de GTM tag wel degelijk (correcte) gegevens doorstuurt naar GA. 

Ga naar de betreffende GA Account en selecteer het tabblad Admin. Selecteer hier de dropdown onder het veld Property en kies ‘Create new property’.

Google Analytics Administrator settings
Google Analytics Administrator settings
Google Analytics Administrator settings - create new property
Google Analytics Administrator settings - create new property

We stellen de Property in voor een website. Geven hem de juiste naam. In het voorbeeld werken we met onze eigen Brandle website. We vullen de naam aan met ‘GTM’ om te verduidelijken dat deze property via Google Tag Manager werkt en om doorheen het proces het onderscheid te kunnen maken tussen de 2 properties.

Vervolgens geven we de juiste url mee van de website in kwestie alsook de sector waarin de pagina actief is onder ‘Industry Category’.  Vergeet ook zeker niet de tijdszone juist aan te duiden! Na een klik op de knop ‘Get Tracking ID’ krijg je de unieke Universal Analytics code (‘UA-XXXXXXXX-X’) die je later nodig hebt in GTM.

Google Analytics - Get Universal Analytics tracking ID
Google Analytics - Get Universal Analytics tracking ID

Stap 2: GTM Container snippet genereren

Als je nog geen GTM account hebt, ga je eerst naar tagmanager.google.com om een account aan te maken. Daarna kunnen we starten met het maken van een GTM container. Je kan via de tab ‘Admin’ binnen het veld ‘Container’ de dropdown openen en ‘Create container’ aanklikken.

Google Tag Manager - Create container code snippet
Google Tag Manager - Create container code snippet
Google Tag Manager - Create container code snippet - implementatie GTM
Google Tag Manager - Create container code snippet - implementatie GTM

We geven de container een gepaste naam en selecteren de optie ‘Web’, daar het over een website gaat. Na het klikken op ‘Create’ krijgen we onze container te zien.

Google Tag Manager - container / code snippet voorbeeld en instructies
Google Tag Manager - container / code snippet voorbeeld en instructies

GTM geeft zelf richtlijnen mee voor de plaatsing van de container. Het eerste stuk code is het script waarmee GTM gegevens uitwisselt via javascript. Deze code mag hieruit rechtstreeks gekopieerd worden zo dicht mogelijk bij de <head> tag in de broncode van de website. 

Het tweede deel is het stuk code dat ervoor moet zorgen dat ook gebruikers zonder javascript geregistreerd worden. Deze wordt bijgevolg juist na de <body> tag geplaatst. Voor meer info over de plaatsing van de GTM container heeft LunaMetrics een uitgebreide blogpost geschreven.

Let op: in de broncode staat normaal gezien ook de Google Analytics tag. Omdat we veilig overschakelen van GA naar GTM laten we de GA code nog even staan. Pas als de GTM opvolging correct blijkt te werken verwijderen we de GA code. De controle en uitvoering hiervan wordt in stap 5 uitgelegd. 

Stap 3: Maak de Universal Analytics-tag in GTM

Nu we onze GTM container op de website hebben geplaatst kan het echte werk beginnen. Momenteel staan GTM en GA nog niet in verbinding. Met andere woorden worden er nog geen gegevens uitgewisseld tussen de twee tools. Deze gegevensuitwisseling gebeurt met behulp van een GTM-tag. Deze tag moet bij het laden van elke pagina uitgevoerd worden. Bij uitvoering stuurt deze een pageview door naar GA. Analytics verzamelt alle pageviews en zet ze om in de gekende rapporten.

We maken eerst een variabele aan die onze GA tracking ID bevat (UA-XXXXXXXX-X). In het verticale menu onder de tab ‘Workspace’ vinden we ‘Variables’. GTM voorziet ons van tal van Built-In variabelen (templates) maar het geeft ons ook de mogelijkheid zelf variabelen aanmaken. Klik op ‘New’. Een gedetailleerd overzicht van de verschillende variabelen vind je hier in Google's support sectie terug.

Google Tag Manager - Variabele aanmaken
Google Tag Manager - Variabele aanmaken
Google Tag Manager - Variabele declareren - waarde meegeven
Google Tag Manager - Variabele declareren - waarde meegeven

We kiezen voor de constante variabele en geven het de naam GATrackingID. De naam van de variabele verklaart vrijwel de functie ervan. Bij het aanmaken van de variabele wordt hier meteen een waarde meegegeven die deze behoudt tot we zelf handmatig een nieuwe waarde instellen. Als waarde geven we in het veld ‘Value’ de Universal Analytics tracking ID mee die GA ons gaf. Klik ’Save’. 

Google Tag Manager - Constante variabele met Google Analytics ID
Google Tag Manager - Constante variabele met Google Analytics ID

Nu zien we onder de standaard variabelen die GTM voorziet een zelf gedefinieerd exemplaar staan genaamd GATrackingID. Als we verder in GTM willen verwijzen naar de waarde die een variabele draagt gebeurt dat als volgt: {{GATrackingID}} (let op: hoofdlettergevoelig).

Nu klikken we in het horizontale menu op ‘Tags’. Klik ‘New’ en geef meteen een correcte naam. We beginnen met de tool waar deze tag voor dient ‘GA’ gevolgd door een beschrijving van wat de tag juist doet ‘GA pageview Allpages’. Nu kunnen we beginnen met configureren.

Google Tag Manager - Tag configureren
Google Tag Manager - Tag configureren

We kiezen als type een Universal Analytics tag van Google Analytics. In het veld ‘Tracking ID’ geven we onze variabele in die we eerder aanmaakte met de Universal Analytics code. Dit wordt letterlijk: {{GATrackingID}}. Als Track Type kiezen we ‘Page View’ omdat we bij elke pagina die geladen wordt GA op de hoogte moeten houden. 

We hebben nu 2 van de 3 elementen die nodig zijn om een tag te activeren. Als laatste wordt er een trigger meegegeven. Deze bepaalt waar en wanneer de tag uitgevoerd mag worden. Klik onderaan op ‘Choose a trigger to make this tag fire…’. We kiezen hier voor het type ‘Page View’ dat geactiveerd wordt op alle pagina’s ('All Page Views’). Selecteer de ‘All Pages’-trigger en sla de wijzigingen op.

Google Tag Manager interface - trigger selecteren - all page views
Google Tag Manager interface - trigger selecteren - all page views

Het moeilijkste deel zit er nu op. We hebben alles om onze settings te testen.

Stap 4: Testen en publiceren

De wijzigingen die we tot hiertoe hebben aangebracht zijn nog niet gepubliceerd (lees: permanent opgeslagen). Het is belangrijk altijd veranderingen te testen alvorens een nieuwe setting te publiceren. GTM zal enkel bij een publicatie van een nieuwe setting wijzigingen aanbrengen in z’n container die zich bevindt in de broncode van de website. Gelukkig kunnen we rekenen op de ‘Preview’ mode om 100 % zeker te zijn van onze aanpassingen. Extra info over de preview mode vind je hier bij Google.

Google Tag Manager - Preview mode om settings te testen
Google Tag Manager - Preview mode om settings te testen

Deze modus kunnen vinden we rechts bovenaan in de interface door het menu naast de knop ‘Submit’ te openen. Klik de preview-mode op aan. Nu kunnen we binnen dezelfde browser in een ander tabblad de website openen. Eens er een wegpagina van het opgevolgde domein wordt geopend zien we onderaan een GTM venster. Hierin kunnen we zien welke gebeurtenissen welke tags, variabelen of elementen uit de dataLayer geactiveerd of gedeclareerd worden. Als de preview modus niet meteen werkt kan je best je browser eens herstarten.

Brandle website analytics- Preview mode GTM
Brandle website analytics- Preview mode GTM

In ons geval is het belangrijk bij de gebeurtenis ‘Window loaded’ de eerder aangemaakte tag ‘GA pageview allpages’ geactiveerd (‘fired’) te zien. Dit wil zeggen dat GTM de gegevens doorstuurt naar GA volgens onze instellingen. Om na te gaan of GA deze gegevens ook correct ontvangt kunnen we best even kijken in het Real-Time rapport van Analytics. Belangrijk is wel dit na te gaan in de eerder gecreëerde property voor onze test.  

Google Analytics - Real Time Report - test
Google Analytics - Real Time Report - test

Nu we zeker weten dat de tag correct werkt kunnen we terug naar GTM om de wijzigingen te publiceren. Vanaf de moment dat dit gebeurd is kunnen we in het real-time gedeelte van GA nakijken of de gegevens correct doorgegeven worden. Het is aan te raden de gegevens een paar dagen te laten lopen alvorens definitief over te gaan naar de laatste stap.

Stap 5: Testview verwijderen en originele GA tracking-ID toevoegen in GTM

Het einde van onze tocht is in zicht. Wanneer de website enkele dagen heeft kunnen draaien met beide tags kunnen we de gegevens vergelijken. Een snelle blik over de homepagina van Google Analytics zou hiervoor moeten volstaan. Vergelijk de metrics die hier getoond worden over de termijn één dag na de aanpassingen tot nu. Minieme verschillen zijn mogelijk maar normaal zouden beide properties nagenoeg gelijk moeten zijn aan elkaar. 

De tijd is aangebroken voor onze allerlaatste stap voor de overgang van GA naar GTM. We nemen de GA tracking-ID van onze oudste GA property erbij (‘UA-XXXXXXXX-X’). Voer deze in bij de variabele GATrackingID in GTM als nieuwe constante waarde (ter vervanging van de ID van onze testproperty). Test snel de werking van de verandering in Preview Mode en in de Real-Time sectie van de initiële property van jouw domein. Krijg je de pageviews door? Dan is het tijd om de veranderingen te publiceren. Na publicatie van de aanpassingen in GTM de Google Analytics tracking code uit de broncode van de website te halen! Ook de intussen overbodige test-property (in dit geval 'BrandleGTM') mag verwijderd worden aangezien hier geen gegevens meer binnen komen.

Zo, nu heb je jouw eerste Brandle How-to achter de rug. Laat ons zeker weten wat je er van vond!