Beheer zelf tags in uw webshop met Google Tag Manager

16 februari 2018

Alle Shoxl webshops worden standaard uitgerust met Google Tag Manager. Met deze handige tool kunt u zelfs scripts beheren en uploaden op uw webshop. Hierdoor kunt u bijvoorbeeld zelf gebeurtenissen aanmaken, die door Google Analytics worden bijgehouden.

Googel Tag Manager logo  

Google Tag Manager voor het zelf overzichtelijk beheren van scripts

Wanneer u externe tools aan uw website wilt koppelen, zoals bijvoorbeeld Google Analytics of een chatfunctie, dan gebeurt dit (in de meeste gevallen) door het plaatsen van een scriptje in de bron. Heeft u veel verschillende tools en aanvullende toepassingen, dan betekent dit dat uw bron een wirwar wordt aan extra scripts, ook wel tags genoemd.

Met Google Tag Manager kunt u deze externe tools aan uw website toevoegen, terwijl er maar één script voor op uw webshop hoeft te worden geplaatst, het Google Tag Manager script. Wordt dit script geladen, dan laden ook direct alle andere tags die u met behulp Google Tag Manager heeft toegevoegd. Dit zorgt ervoor dat uw webshop niet vertraagd wordt doordat er allerlei scripts moeten worden geladen.

Google Tag Manager geeft bovendien een goed overzicht van alle tags die in uw webshop gebruikt worden. U kunt zelf zien welke scripts door uzelf, door Shoxl, of bijvoorbeeld door uw marketing bureau zijn toegevoegd. Overbodige scripts, of scripts die niet werken zijn gemakkelijk te verwijderen, zonder dat iemand de broncode daarvoor moet aanspreken.

 

Tags, Triggers, en Variabelen

Allereerst moet er een Google Tag Manager account aangemaakt worden, met een container voor uw webshop. Heeft u meerdere webshops, dan kunt u binnen uw account meerdere containers aanmaken, één voor elke webshop. In de meeste gevallen zal bij de oplevering van een Shoxl webshop al een Google Tag Manager account voor u aangemaakt zijn, en toegevoegd. Google Tag Manager wordt aan uw webshop toegevoegd door het GTM script aan iedere pagina van uw webshop toe te voegen. Uiteraard doen wij dit voor u.

In GTM zijn er drie belangrijke items die u nodig heeft voor het toevoegen van een nieuw script aan uw webshop: de Tags, Triggers, en Variabelen.

De tag is een codefragment die op een pagina wordt uitgevoerd. Bijvoorbeeld om bezoekersgedrag te meten, of om een bepaalde tool zoals een chatbot te  activeren. De trigger bepaalt waar en wanneer de tag wordt uitgevoerd. Dit kan bijvoorbeeld op alle pagina’s zijn, op één bepaalde pagina, of als er een bepaalde actie gedaan wordt zoals het klikken op een button.

De variabelen worden zowel in de tags als in de triggers gebruikt. In de tags worden de variabelen gebruikt voor de dynamische waarden uit een bepaalde tag. Dat kan bijvoorbeeld de transactieprijs van een product zijn. Met een variabele kan ook een veelgebruikte waarde worden vastgelegd, bijvoorbeeld de Google Analytics tracking-ID. Op deze manier hoeft u alleen de variabele in te voeren. Bij de triggers worden de variabelen gebruikt om een waarde vast te leggen die aangeeft wanneer de trigger uitgevoerd moet worden. 

 

Voorbeeld: toevoegen van de Google Analytics tag

Het gemakkelijkste om de werking van Google Tag Manager uit te leggen, is om dit te doen aan de hand van een voorbeeld. Stelt u zich voor dat u Google Analytics wilt toevoegen aan uw webshop, met behulp van Google Tag Manager.

Allereerst moet u in uw Google Analytics account uw tracking-ID opzoeken. Dit staat in het tabje beheerder, onder property, en ziet er ongeveer zo uit: UA-123456-7.

Dit tracking-ID gaan we toevoegen als een (constante) variabele. U gaat hiervoor in Google Tag Manager naar de module Variabelen, en kiest daar voor “Nieuw”. Hier moet u een type variabele kiezen, wat in dit geval dus “Constant” is. Als u dit heeft gedaan voert u bij waarde de Analytics tracking-ID in, en slaat u de variabele op onder een gemakkelijk te onthouden naam (bijvoorbeeld Analytics NL).

Nu gaan we een tag toevoegen. Kies in de Tags module voor “Nieuw”. U moet allereerst een type tag kiezen. Google heeft al een voorgedefinieerde tag voor Analytics, namelijk Universal Analytics. Mocht er geen voorgedefinieerde tag zijn voor hetgeen u wilt invoegen, dan kunt u kiezen voor “Aangepaste HTML”.

In de tag Universal Analytics moeten we nu aan aantal velden invoeren. Het trackingstype is “Paginaweergave”. Daaronder kiezen we voor “Variabele vor instellingen selecteren” met het vinkje “Overschrijven van instellingen in deze tag inschakelen” aangevinkt. U kunt nu in het veld daaronder de variabele selecteren die we net hebben aangemaakt. U vult in {{Analytics NL}}, of selecteert de variabele uit de lijst met aangemaakte variabelen.

Voorbeeld van de Google Analytics tracking ID toegevoegd via GTM

Als laatste moeten we een trigger toevoegen, die bepaalt wanneer de deze tag willen activeren. Aangezien het hier om Google Analytics gaat, willen we natuurlijk dat deze tag op iedere pagina geladen wordt. Kies in het triggerscherm voor het toevoegen van een nieuwe trigger. Bij het type trigger kiest u voor “Paginaweergave”, waarna u “Alle paginaweergaven” aanvinkt. Als u de trigger nu opslaat heeft u een trigger aangemaakt voor tags die op alle pagina’s moeten worden geladen.

U kunt de tag nu een naam geven en opslaan.

De tag is nog niet actief, hij moet eerst gepubliceerd worden. U moet tags in Google Tag Manager altijd actief publiceren!  Kies daarom voor de knop verzenden. U kunt hier een naam geven aan de versie die u nu wilt publiceren. Zo kunt u later gemakkelijk terug zien wie wanneer welke tags heeft gepubliceerd. Zo is het ook met meerdere gebruikers gemakkelijk om tags te onderhouden.

Voorbeeld van het publiceren van een GTM versie

 

Voorbeeld: toevoegen van een chat tool aan uw webshop

Stel u wilt een externe tool toevoegen aan uw webshop; een chatpanel. Dit chatpanel moet geladen worden op iedere pagina van uw webshop, behalve de homepage. Voor de tool is nog geen vooraf gedefinieerde tag beschikbaar in Google Tag Manager, maar ook dat is geen probleem.

Allereerst moet u bij de chat tool het script zien te vinden waarmee de tool op de website geladen kan worden. Dit is meestal vrij makkelijk te vinden.

Als voorbeeld nemen we even: 
<script>Dit is het script van de chat tool uit ons voorbeeld</script>.  

Bij de module Tags kiezen we weer voor “Nieuw”. Het type tag moet dit keer zijn “Aangepaste HTML”. Vervolgens moet het script in het HTML veld worden geplakt.

Een GTM tag toevoegen meet aangepaste HTML

Bij de trigger willen we ervoor zorgen dat de tag op iedere pagina actief is, behalve op de homepage. De URL van ons voorbeeld is www.voorbeeld.nl, en de homepage wordt aangegeven met www.voorbeeld.nl/home.

Bij trigger type kiezen we ook dit keer voor “Paginaweergave”, daarbij moeten we nu kiezen voor “Sommige paginaweergaven” Hier kunnen we variabelen opgeven en daar een waarde aan koppelen, om zo filters te creëren die zorgen dat de trigger gaat doen wat we willen. In dit voorbeeld willen we dat het script op alle pagina’s wordt geladen behalve de homepage. Bij de eerste filter moet daarom de variabele “Page URL” worden gekozen, daarna de conditie “bevat”, en als waarde voeren we de URL van de webshop in: www.voorbeeld.nl.

Google Tag Manager trigger configuratie

De tweede filter die we aanmaken zal de homepage uitsluiten. We kiezen weer voor de variabele “Page URL”, maar nu voegen we daar de conditie “bevat geen” aan toe. Omdat in ons voorbeeld de homepage als enige /home in de URL heeft staan, vullen we in het laatste vak /home in. Op deze manier zal de tag dus op iedere pagina van de webshop www.voorbeeld.nl worden geladen, behalve op de homepage.

(Uiteraard is dit slechts een voorbeeld, de filters zijn op talloze andere manieren in te richten.)

 

Controleren en meer leren over GTM

Heeft u nieuwe tags geïmplementeerd, of wilt u controleren of eerder geïmplementeerde tags werken? Google heeft een aantal browser extensies die u dat gemakkelijker kunnen maken.

Allereerst is er de Google Analytics debugger (GA-debugger); een browser extensie voor Google Chrome. Met deze extensie kunt u gemakkelijk zien welke Google Analytics scripts er op uw website worden geladen. Heeft u het Analytics script geïnstalleerd, ga dan naar uw website en open met de F12-knop het console menu.  Wanneer u nu de GA-debugger extensie inschakeld, ziet u wanneer de Analytics tag goed is geïnstalleerd dat het Analytics logo geladen wordt. Daaronder ziet u welke tags er voor Google Analytics worden uitgevoerd, en welke scripts er eventueel niet konden worden geladen.  

Wilt u uitgebreide inzicht in de tags op uw webshop, dan kunt u de Google Tag Assistent extensie gebruiken. Met deze extensie kunt u een “opname” maken van een aantal pagina’s op uw webshop. U zet de extensie aan, klikt op de pagina’s waarvan u wilt weten welke tags erop worden geladen, en zet de “opname” stop. De Tag Assistent geeft u vervolgens een uitgebreid rapport van de tags die op iedere pagina die u aanklikte werden geladen.

 

Wilt u meer weten over Google Tag Manager, of helemaal zelf aan de slag met de tool? Google biedt een uitstekende (en gratis!) online opleiding aan over de basis beginselen van Google Tag Manager