Google Tag Manager (GTM) voor beginners - Deel 2
In deel 1 van onze Google Tag Manager voor beginners handleiding heeft u een GTM-account aangemaakt. Aan het eind van deel 1 bent u automatisch naar uw Google Tag Manager account geleid. Mocht u zich inmiddels hebben uitgelogd dan kunt u zich hier weer inloggen. (Klik rechtsboven op de blauwe 'Inloggen bij Tag Manager' knop en log in met hetzelfde Google-account als dat u gebruikt heeft in deel 1. Klik vervolgens op de containernaam die u in deel 1 heeft aangemaakt.)
Opmerking: In deze handleiding zullen wij de termen 'Google Tag Manager' en 'GTM' gebruiken als synoniemen. In het geval wij 'GTM' schrijven kunt u dit lezen als Google Tag Manager. Dit geldt ook voor 'Google Analytics 4' en 'GA4'.
Opmerking: Google verandert de interface van vooral Google Analytics 4 regelmatig. Het zou kunnen dat de interface van GA4 er op de afbeeldingen anders uitziet dan de GA4 interface in uw browser. In dat geval is het verstandig om even in GA4 te zoeken of Google te raadplegen over waar de functie naartoe is verhuisd.
Stap 3 - Bekend raken met de GTM-interface
Het is verstandig om snel even naar de Google Tag Manager interface te kijken. Aangezien u net een GTM-account heeft aangemaakt zal het er nogal leeg uitzien, maar normaal gesproken ziet u hier een globaal overzicht van wat er gaande is in uw account.
Aan de linkerkant ziet u een aantal verschillende opties:
• Overzicht - Dit is de pagina waar u zich nu op bevindt. Om terug te keren naar het huidige scherm drukt u hier op.
• Tags - Hier kunt u zogeheten 'tags' maken. Dit zijn stukjes code waarvan u wilt dat ze geladen worden elke keer dat een bezoeker aan specifieke voorwaarden voldoet. In veel gevallen zijn tags trackingcodes, welke het gedrag van uw website bezoekers volgen. Denk bijvoorbeeld aan de Google Analytics 4 tag, Google Ads tag, Facebook/Meta-pixel, etc.
• Triggers - Met triggers bepaalt u wanneer de tags zullen worden geactiveerd en uitgevoerd. U kunt ze het beste zien als de voorwaarde(n) of conditie(s) op uw website waaraan moet worden voldaan voordat een specifieke tag zal worden geactiveerd en uitgevoerd. Denk bijvoorbeeld aan het klikken op een specifieke knop op uw site, of wellicht het bezoeken van een bepaalde pagina.
• Variabelen - Variabelen zijn wat lastiger om uit te leggen. Hoewel het niet helemaal de lading dekt kunt u variabelen het beste zien als de 'containers' voor de gegevens die u wilt verzamelen. Hierin worden de gegevens in opgeslagen en doorgegeven aan tags, triggers of externe platformen.
• Mappen - Deze gebruikt u om uw tags en triggers geordend in op te kunnen bergen, net zoals de mappen in uw computer. U kunt bijvoorbeeld al uw Google Analytics 4 tags en triggers opbergen in een map, en uw Meta pixel(s) in een andere map.
• Templates - Dit zijn sjablonen voor tags, triggers en variabelen, gemaakt door Google-medewerkers of door andere personen uit de GTM-gemeenschap. Templates kunnen u veel tijd uit handen nemen voor complexe configuraties.
Stap 4. Google Tag Manager code op uw website plaatsen
Zoals u in deel 1 van onze Google Tag Manager voor beginners handleiding heeft kunnen lezen zult u uw website moeten verbinden met Google Tag Manager. Zonder deze verbinding is het niet mogelijk om data over uw website bezoekers in een platform zoals Google Analytics 4 te krijgen. Deze verbinding wordt gemaakt door een stukje JavaScript code in de broncode van uw website te plaatsen. Hoewel u hier zelf geen JavaScript voor hoeft te kunnen lezen of schrijven is het wel van belang dat u de code op uw website kunt krijgen. Mocht u een WordPress gebruiker zijn dan is er tegenwoordig een makkelijke manier om dit te doen. (Hieronder leest u hier meer over.)
Waar vind ik de GTM-code?
De Google Tag Manage code is op twee plekken te vinden in uw GTM-account.
De eerste plek is gemakkelijk te bereiken via het overzichtsscherm. U drukt simpelweg bovenaan in de menubalk op de blauwe GTM-XXXXXX link. Hierbij zullen bij u de X'en uit andere tekens bestaan. Dit is uw zogeheten 'container ID'. Zoals u hieronder zult zien is uw container ID ook in de Google Tag Manager code verwerkt.
Nadat u op uw container ID heeft geklikt zult u een pop-up krijgen met daarin de code die u op uw website zult moeten plaatsen. Zoals u kunt zien zult u het bovenste deel zo hoog mogelijk in de <head> van uw website moeten plaatsen, en het tweede deel direct na de <body> openingstag.
De tweede plek waar u uw code kunt vinden is via 'Beheer' in uw GTM-account. In het overzichtsscherm ziet u linksboven een tab genaamd 'beheer'. Hier klikt u op, waarna u bij uw accountinstellingen terecht komt.
Vervolgens klikt u op 'Google Tag Manager installeren', waarna u de te installeren code zult zien.
Hoe installeer ik de code op mijn website?
Indien u uw website door iemand anders heeft laten maken of momenteel door iemand laat beheren raden wij u sterk aan om dit over te laten aan deze persoon. Als dit niet mogelijk is óf als u uw website zelf heeft gemaakt, dan zult u zelf de code op uw website moeten plaatsen. Het vervelende is dat dit voor iedereen anders is, afhankelijk van onder meer uw technische omgeving. Zo verschilt de manier waarop dit gebeurt bijvoorbeeld per content management systeem (CMS). De implementatie voor WordPress gebruikers is bijvoorbeeld anders dan voor Drupal, Joomla, Magento, Shopify of Wix gebruikers. Gelukkig heeft Google hier zelf inmiddels ook flink wat informatie over verzameld.
Belangrijk: het is belangrijk dat u de GTM-code niet kopieert en plakt in een tekst-verwerker zoals Microsoft Word of Google Docs. De kans bestaat namelijk dat de code automatisch zal worden aangepast op basis van bepaalde grammaticale regels van deze programma's. Denk hierbij aan het toevoegen of verwijderen van spaties, het vervangen van leestekens, etc. Indien u de code wilt opslaan is het verstandiger om dit in een .txt bestand te doen in een programma zoals Notepad.
WordPress installatie
De kans is aanzienlijk dat uw website gebouwd is op WordPress. De makkelijkste manier om via WordPress de code op uw website te installeren is via de officiële Google Site Kit plugin. Hier leest u precies hoe u de plugin en de code dient te installeren.
Het is ook mogelijk om de code direct op uw website te plaatsen zonder plugin. Ook dan hangt het sterk af van uw specifieke situatie. Zo maken veel mensen tegenwoordig bijvoorbeeld gebruik van een drag-and-drop content-builder om hun WordPress website te bouwen. Vrijwel elke website builder heeft een optie om zonder al teveel moeite code toe te voegen aan uw website. Hieronder vindt u enkele voorbeelden. Mocht uw website builder er niet tussen staan dan is het verstandig om de supportpagina van uw specifieke builder te raadplegen. We hebben hieronder wat links naar de GTM-support pagina's van veelgebruikte website builders geplaatst:
Stap 5. Controleren of het installeren van de code is gelukt
Nadat u de Google Tag Manager code op uw website heeft geplaatst (of laten plaatsen) is het belangrijk om te verifiëren dat dit is gelukt. Gelukkig is dat op een eenvoudige manier te controleren. Hiervoor dient u met uw Google-account weer in te loggen op de Google Tag Manager website.
Voordat we de code gaan testen zullen we eerst de GTM container publiceren. In het overzichtsscherm klikt u rechtsboven op de blauwe 'Verzenden' knop. Met deze knop publiceert u uw container. Bij normaal gebruik van Google Tag Manager zult u altijd eerst uw instellingen testen met behulp van de 'Voorbeeld' knop, maar om te starten zult u eerst uw container moeten publiceren. Klik dus eerst op de blauwe knop.
Hierna zult u het bovenstaande scherm zien. Zoals u ziet dient u hier een versienaam in te vullen. Hoewel de naam er in dit geval niet erg toe doet is het verstandig om hier voor toekomstige versienamen telkens een beschrijvende naam voor te verzinnen, zodat u in één oogopslag kunt zien welke veranderingen u in de desbetreffende versie heeft opgenomen. Het is ook verstandig om in de toekomst in de versiebeschrijving daaronder alle nieuwe veranderingen op te nemen. Goede versienamen en versiebeschrijvingen zijn namelijk belangrijk voor het geval er iets misgaat. Op basis van de versienamen en versiebeschrijvingen kunt u achterhalen wanneer welke veranderingen zijn doorgevoerd en wat er precies moet worden teruggedraaid.
In dit geval kunt u bij als versienaam een willekeurige naam invullen (zoals 'Lege container') en kunt u de versiebeschrijving leeg laten.
Vervolgens krijgt u een versieoverzicht te zien welke u kunt wegklikken. U heeft hiermee een nieuwe versie van uw container gemaakt. Mocht u een overzicht willen van alle versies van deze container die u gepubliceerd heeft dan kunt u dit zien door in het overzichtsscherm bovenaan op 'Versies' te klikken.
Testen of uw GTM-code werkt - methode 1
Waarschijnlijk de eenvoudigste manier om te controleren of uw Google Tag Manager code correct is geïnstalleerd, is door op uw container-ID te klikken in het GTM-overzichtsscherm.
Typ eerst uw websiteadres in het veld onder het kopje '3. Test uw website (optioneel)'. Klik vervolgens rechts op de knop 'testen'. Als de GTM code op uw website is gevonden ziet u links een groen vinkje verschijnen zoals op de afbeelding hierboven. Als uw GTM code niet is gevonden zult u dit in een rode foutmelding zien staan.
Testen of uw GTM-code werkt - methode 2
Misschien wel de beste manier om te testen of onze Google Tag Manager code werkt is met behulp van Google Tag Manager's ingebouwde 'Preview en Debug-modus'. Dit is een modus waarin we veranderingen kunnen testen voordat we ze live laten gaan. Het stelt ons in staat om te controleren of tags, triggers en variabelen naar behoren functioneren. In de Preview en Debug-modus kunt u bijvoorbeeld op verschillende plekken op uw website klikken om te kijken of deze handelingen in Google Tag Manager worden geregistreerd. Tegelijkertijd kunnen we met deze modus controleren of de GTM-code correct op onze website is geïnstalleerd doordat de Preview en Debug-modus alleen werkt als Google Tag Manager verbinding kan maken met de container code op uw website.
Nadat u op 'Voorbeeld' heeft gedrukt in het overzichtsscherm van Google Tag Manager zal er een pagina worden geladen waarop u de bovenstaande pop-up te zien krijgt. Om uw verbinding te maken met de GTM-code op uw website zult u hier de URL van uw website moeten invullen (inclusief het 'https://' gedeelte). Daarna drukt u op de blauwe 'Connect' knop, waarna Google Tag Manager verbinding zal proberen te maken.
Opmerking: Op het moment van schrijven is de pop-up die u te zien krijgt enkel in het Engels beschikbaar.
Nadat u op 'Connect' heeft gedrukt zal er door Google Tag Manager óf automatisch een nieuwe window met uw website worden geopend, óf dit zal in een nieuwe tab gebeuren. Als Google Tag Manager verbinding heeft kunnen leggen met de GTM-code op uw website zult u in de tab waar u Google Tag Manager actief heeft de bovenstaande melding te zien krijgen.
Opmerking: zowel de tab waar u Google Tag Manager in heeft geopend (met daarin de bovenstaande melding) als de net geopende tab/window met daarin uw website dient u niet te sluiten. Zodra u dit wel doet zal de verbinding worden verbroken en zal daarmee de Preview en Debug-modus worden beëindigd. Als u dit per ongeluk toch heeft gedaan zult u opnieuw verbinding moeten leggen op de bovenstaande manier.
In de automatisch geopende window/tab waarin uw website is geladen zult u rechtsonderin de bovenstaande melding zien als Google Tag Manager verbinding heeft kunnen leggen met de GTM-code op uw website. Helaas kan het ook gebeuren dat er geen verbinding tot stand is gebracht. In deze blogpost over de meest voorkomende oorzaken leest u meer over het oplossen van dit frustrerende probleem.
Ten slotte kunnen we testen of Google Tag Manager zaken registreert. In de window met daarin uw website (waarin u dus de bovenstaande 'Tag Assistant Connected' melding ziet) navigeert u vervolgens naar een andere pagina op uw website. Het maakt in dit geval niet uit welke pagina.
Als u vervolgens terugschakelt naar de tab waarin u Google Tag Manager actief heeft, dan zult u aan de linkerkant te zien krijgen dat er is geregistreerd dat u de desbetreffende pagina heeft geladen. Later zullen we door middel van tags, triggers en variabelen in staat zijn om precies te bepalen wanneer wat geregistreerd wordt door Google Tag Manager, en wat we vervolgens door zullen sturen naar Google Analytics 4. Voor nu kunt u de Preview en Debug-modus sluiten en de tab/window met daarin uw website sluiten.