Google Tag Manager: wat, waarom en hoe?

Marketing Automation Digital Analytics Conversie Optimalisatie

IP Blog Featured Image Thibaut

Tags zijn tegenwoordig niet meer weg te denken bij websites. Facebook, Linkedin, Hotjar, Google Analytics en noem maar op, willen allemaal toegang tot je website om gegevens te kunnen tracken. Maar een veelvoud aan deze tags kan de performance van je website vertragen. Daarnaast is het vaak moeilijk nog een overzicht te bewaren welke tags actief zijn op uw website. Google Tag Manager biedt hier een oplossing voor.

Google Tag Manager: wat is het en waarom gebruiken we het?

Google Tag Manager is, zoals de naam het zelf zegt, een manager van tags. Het laat toe om via een eenvoudige interface verschillende tags toe te voegen, aan te passen en te verwijderen zonder dat je de broncode van uw website hoeft te wijzigen.

Google Tag Manager versnelt de performance van uw website door de verschillende tags in één keer naast elkaar (asynchroon) in te laden in plaats van één na één achter elkaar. Indien je veel tags op je website hebt staan kan je hierdoor je website effectief sneller maken. 

Op het programma

Binnen deze tutorial zullen we dieper ingaan op volgende zaken:

1. Opzetten van een Google tag manager account
2. Migreren van tags
3. Instellen van triggers voor google analytics

*Vereisten voor deze tutorial:

  • In het bezit zijn van een Google (analytics) account
  • Toegang hebben tot een website.

Heb je al kennis van Google Tag Manager en ben je op zoek naar meer, ontdek dan zeker onze Puppy Academy.

1. Opzetten Google Tag Manager account

Ga naar Google Tag Manager en volg de volgende stappen:

Setup google tag manager account

 

Toevoegen van de Google Tag Manager tag aan je website.

Na het aanmaken van een account zie je een venster waarin de 2 tags van Google Tag Manager tevoorschijn komen. De eerste tag plaats je helemaal bovenaan in de HEAD van de HTML. De tweede tag plaats je bovenaan in de BODY van de HTML. Dit kan je zelf doen of aan een web developer vragen. Eens dit achter de rug is kunnen we beginnen met het echte werk: het opzetten en migreren van tags.

Tags tagmanager

2. Migreren van tags

Als je website al tags bevat is het belangrijk deze tags te migreren naar Google Tag Manager.

Het migreren van tags staat gelijk aan het verwijderen van de tags op de website en vervolgens deze tags toe te voegen aan Google Tag Manager. Indien we de tags van op de bestaande website niet verwijderen en deze ook in Google Tag Manager invoegen bestaat de kans dat ieder event dubbel opgenomen wordt doordat er 2 tags actief zijn op de website. Dit zou diensten zoals Google Analytics en Facebook in de war kunnen brengen. Het is daarom belangrijk de bestaande tags te migreren.

Migratie doe je best door volgende stappen te volgen:

  • Maak een lijst van alle tags op de huidige website
  • Voeg deze tags toe aan Google Tag Manager
  • Ga in preview mode en controleer of de tags actief zijn
  • Verwijder de tags uit de broncode van uw website
  • Publiceer de tag manager.
  • Controleer je Google tags aan de hand van 'Google Tag Assistant'

Ga naar de broncode van uw website en kijk in de HEAD van uw HTML welke tags actief zijn op uw website.

Let op: Soms plaatsen developers tags ook lager of op willekeurige plaatsen in de code. Je kan dan zoeken via ctr+f naar "Facebook" "hotjar" etc om te zien of je iets tegenkomt of zoeken naar "<!--" wat meestal aanduidt dat er tag volgt.

Voeg vervolgens iedere tag toe aan je tag manager door deze stappen te volgen:

  • klik op de knop 'Tags'.
  • Geef uw tag een naam (links bovenaan).
  • Klik op 'Tag configuratie'.
  • Selecteer een dienst waarvan je de tag wenst toe te voegen.
  • Vul de gegevens van je dienst in.
  • Zeker niet vergeten: SLA ALLES OP!

In onderstaand voorbeeld zie je hoe we een Google Analytics tag toevoegen.

Tag

 

Indien je tag niet in de lijst van Google staat, kan je deze tag toevoegen door onderaan de lijst op ‘Custom HTML’ te klikken. Een Facebook pixel inladen in Google tag manager kan enkel via ‘Custom HTML’ gedaan worden.

CustomHTML

 

Ga in Preview mode en controleer of de tags actief zijn door naar je webpagina te gaan. Als alles goed verloopt zal je onderaan de website een bar van Google zien waar je al je tags te zien krijgt. Indien je Google Analytics tag actief is, zie je onder de rubriek 'Page view' de tag ‘Google Analytics’, met erboven ‘Tags fired on this event.’

Preview

 

Indien al de tags opgeladen en actief zijn op je website (in preview mode) mag je de originele tags uit de broncode van je website verwijderen.

De laatste stap bestaat eruit je Google Tag Manager te activeren. Dit doe je door op 'Submit' te drukken.

submit

3. Instellen van triggers voor Google Analytics

Stel, je wenst te weten wanneer iemand interactie heeft gehad met een element op je pagina. Dan kan je dit via Google Tag Manager doen in combinatie met Google Analytics.

Google Tag Manager is opgebouwd uit 3 onderdelen:

  1. Tags: sturen info door naar de desbetreffende tool.
  2. Triggers: observeren de pagina op interacties en beslist wanneer een tag geactiveerd moet worden.
  3. Variabelen: volgen een element op de pagina.

Om te beginnen gaan we de Google Analytics tag activeren voor wanneer iemand op de knop 'ontdek onze oplossingen'op onze website duwt.

Homepuppy

Als eerste gaan we de gepaste variabele toevoegen. Dit doen we door de juiste variabele uit de lijst te selecteren. In ons geval is dit de click variabele. Hoe je dat precies doet zie je hieronder.

Variabele

 

Als de click variabelen geselecteerd zijn gaan we naar de lijst met tags.

  • Voeg nieuwe tag toe. Wij kiezen voor 'Home button'.
  • Kies als tag configuratie 'Google Analytics'.
  • Je ziet dat Google Analytics geselecteerd is. Vervolgens zie je 2 opties: 'Track type' en 'Google Analytics' setting. Bij track type kies je 'Events'.
  • Na het aanklikken van events komt onmiddellijk een lijst met 'Category' 'Action' 'Label' en 'Value' tevoorschijn. Voorlopig gaan we ons beperken tot 'Category' en 'Action'. Onder 'Category' omschrijven we het element waarover dit gaat. Bij ons is dit 'Home' button. Onder 'Action' omschrijven we de actie tegenover het element. Bij ons is dit 'click'.

TagTrigger

De volgende stap is het toevoegen van een trigger.

  • Klik op 'triggering'.
  • Klik op het '+'- teken rechts bovenaan om een nieuwe trigger aan te maken.
  • Klik nu nogmaals op triggering.
  • Rechts zie je een lijst van triggers. Wij kiezen voor de trigger: 'All elements' onder 'Click'.

Trigger1

  • Kies bij 'this trigger fires' voor 'Some clicks'.
  • In de lijst onder 'Click Classes' selecteer je 'Click ID'
  • In de lijst onder 'Contains' selecteer je 'Equals'

Trigger2

Nu de trigger ingesteld is op een klik die gelijk is aan een ID op uw pagina, moeten we de juiste ID van de knop terugvinden.

  • We gaan naar onze website en klikken met onze rechtse muisknop op de knop en kiezen vervolgens 'Element inspecteren'
  • Rechts van ons zien we de HTML code van het element op onze pagina.
  • Aangezien we zoeken op ID, kijken we naar de ID van onze knop. Hier is dit: “cta_button_882380_e0749fec-e331-42f6-87e6-b7b1b57263cd”
  • We kopiëren deze ID en plakken hem in onze trigger.
  • We geven onze trigger een naam en slaan hem op.
  • Nadien slaan we ook de tag op.

ID

Om te kijken als onze tag geactiveerd wordt bij het klikken van de knop gaan we in Preview mode. We zien onderaan dat de tag geladen is op onze pagina. Als we klikken op de knop zien we dat de tag geactiveerd is.

PreviewHome

Proficiat, we hebben succesvol een trigger opgezet met google tag manager! Je kan natuurlijk ook heel wat andere triggers buiten 'Click' opzetten. Google heeft tal van resources met uitleg over de verschillende triggers.

Voor zij die zich afvragen waar we de info van deze trigger kunnen terugvinden:
Je kan deze data zien in Google Analytics onder 'Behaviour' en 'Events'. Hoe je deze data kan verwerken in Google Data Studio ontdek je in deze blog.

Analytics-1

En? Ben jij getriggerd? Ontdek alle opleidingen in onze Puppy Academy

Groeten, 

Thibaut

 

 Contacteer ons

Ben je klaar voor de vierde editie van 20 Thoughts Before Noon?? 
SKY HIGH WITH CUSTOMER CENTRICITY ✈️

20T_Socials_Linkedin

  
Reacties