gebruikersinterface van Google Tag Manager

Google Tag Manager Tutorial

Als een Google Tag Manager consultant, heb ik GTM ingesteld op meer dan 100 klantwebsites. Deze Google Tag Manager tutorial is waar ik je stap voor stap het proces leer dat ik door de jaren heen heb verfijnd, met voorbeelden en video's om van te leren.

Verderop kun je een GTM setup configuratiebestand downloaden met alle volgende best practices om in je container te importeren.

Als je niet kunt wachten, ga dan direct naar de installatie tutorial of leer hoe je Google Tag Manager installeert. Maar als je een beginner bent, is het belangrijk om eerst te begrijpen hoe je een tag management systeem samen met andere tools gebruikt.

Dus lees eerst hieronder verder.

Hoe gebruik je Google Tag Manager?

Ik ga ervan uit dat je al weet wat Google Tag Manager is. Dus laten we praten over hoe GTM werkt en hoe je het gebruikt.

Idealiter wil je slechts één third-party tag in de broncode van je website of web app hebben.

De enige third-party tag op je website zou de Google Tag Manager code snippet moeten zijn.

share on twitter

Alle andere tags worden vervolgens geïmplementeerd via de tag manager zelf. Andere marketing- en tracking tags zijn bijvoorbeeld Google Analytics (GA), Facebook, Twitter, LinkedIn, AdWords, DoubleClick en god weet wat nog meer.

De belangrijkste reden zijn de voordelen van Google Tag Manager:

  • eenvoudigere & snellere implementatie van marketing tags
  • schaalbaarheid op elke pagina en over meerdere domeinen
  • ingebouwde triggers voor formulierinzendingen, scroll tracking & video tracking
  • gebruikers beheren met meerdere GTM-accounts
  • een beetje snellere laadtijd van de site

Vanwege deze voordelen gebruikt al 30% van alle websites op het internet een tag manager. En daarvan heeft Google Tag Manager een marktaandeel van 94%.

Dus, tenzij je een solide reden hebt om geen tag aan GTM toe te voegen, als algemene vuistregel, voeg alle tags toe aan de GTM-container.

Gebruik GTM als een verbindingslaag tussen je website en third-party tags.

share on twitter

Gebruik GTM als een tussenlaag tussen je website en third-party services. Zonder dit zijn je site en third-party tags niet direct verbonden. Die services zijn meestal JavaScript-bibliotheken voor marketing- of trackingtools die met een tag worden geïmplementeerd. Maar andere tags gelden ook.

De enige uitzondering op de regel geldt wanneer je conversieoptimalisatie uitvoert met split-testing tools.

Omdat tijdens conversieoptimalisatie A/B-tests verschillende varianten van een pagina gaan laden. Dus de bezoeker kan zien hoe de inhoud een fractie van een seconde opnieuw wordt gerenderd.

Om CSS-flikkering te voorkomen en ervoor te zorgen dat varianten snel laden, kan een split-testing tag ook direct in de broncode worden geplaatst.

Nu we dit uit de weg hebben geruimd, laten we naar de implementatie kijken.

Installeer Google Tag Manager op je website

Laten we de Google Tag Manager tutorial beginnen door je te laten zien waar je de Google Tag Manager code snippet kunt krijgen en vervolgens waar je deze op de website installeert. Je kunt inloggen met je gebruikelijke Google-account.

  1. Maak een Google Tag Manager-account aan

    Om GTM te installeren, moet je eerst naar de officiële website gaan en een nieuw Google Tag Manager-account aanmaken.
    Google Tag Manager account aanmaken
    Maak eerst een Google Tag Manager-account aan, kies een containenaam, zoals je website naam en krijg vervolgens de code snippet.
  2. Maak een web-eigendom aan

    Selecteer de Web eigendom om een code te krijgen voor een website of web app.
    GTM containenaam en web-eigendom selectie
    Er zijn meerdere soorten containers beschikbaar in een GTM-account. Voor websites kies je web. Merk op dat er ook andere typen tag manager containers zijn voor AMP-pagina's, iOS en Android.
  3. Implementeer de Google Tag Manager code

Dit is de gebruikelijke methode om GTM te implementeren.

Gebruik je een populair content management systeem? Zo ja, dan kun je ook een plugin gebruiken die de installatie van Google Tag Manager verzorgt.

Dat gezegd hebbende:

tip

Als je CMS je ook een plugin biedt om andere tags te installeren

Gebruik niet nog een plugin om Google Analytics, Facebook of Google Ads te installeren.

Gebruik in plaats daarvan GTM om die tags te installeren.


  1. Het zal resulteren in een snellere laadtijd van de pagina
  2. Het geeft je meer opties om de tag te configureren
share on twitter

De GTM gebruikersinterface ontvangt ook regelmatig updates met nieuwe functies, dus je bent bijna altijd beter af door andere marketingtags direct met GTM te implementeren dan met een andere integratie.

Bovendien zijn de winsten in laadtijd goed voor je bouncepercentage en helpen bij SEO.

Gebruik een plugin om GTM te implementeren

Hieronder een lijst van de meest voorkomende content management systemen en hun plugins om Google Tag Manager te installeren.

WordPress

Er zijn twee WordPress plugins om GTM te implementeren die ik zou gebruiken. Ten eerste, is er de klassieke optie genaamd Google Tag Manager voor WordPress.
De tweede optie is Site Kit van Google. Hiermee kun je voornamelijk een dashboard toevoegen aan je WordPress backend met informatie van je Google Analytics account en Google Search Console data - wat behoorlijk handig is. En het stelt je ook in staat om GTM te installeren.

Shopify

Voor Shopify is er een gratis plugin voor GTM installatie, creatief genaamd Google Tag Manager Installer.

Squarespace

Voor Squarespace is er geen GTM extensie of plugin. Maar je kunt de GTM tag handmatig toevoegen door te gaan naar sidebar > instellingen > geavanceerd > code injectie.

Squarespace navigatiemenu voor code injectie
In Squarespace kun je GTM implementeren onder Instellingen > Geavanceerd > Code Injectie

Vervolgens plak je de GTM tag in de formuliervelden zoals dit:

Injecteer GTM code snippets in Squarespace
Plaats het eerste deel van de GTM code in het header veld. Het tweede deel gaat in het footer veld.

Wix

Ga naar het hoofdmenu van je Wix website in de linker zijbalk. Ga van daaruit naar Marketing & SEO en klik dan verder naar beneden in de zijbalk op Marketing Integrations.
Vervolgens vind je meerdere Wix integraties voor Google Analytics, de Facebook pixel en ook een Wix extensie om Google Tag Manager te implementeren.

Wix Marketing Integratie voor Google Tag Manager
In Wix gebruik je de marketing integratie voor Google Tag Manager.

Klik op verbinden en installeer Google Tag Manager.

Hoe controleer je of GTM werkt?

tip

Wanneer je voor het eerst inlogt bij GTM

Ga naar de verzendknop en publiceer een lege container.

Anders, zodra je test of GTM werkt, geeft het script een 400 response error en zul je uren besteden aan het debuggen waarom. 😭

Het is een klassieker 😉

share on twitter

Nadat je het GTM-script hebt geïmplementeerd en een container versie hebt gepubliceerd (belangrijk), kun je testen of Google Tag Manager werkt door een van deze controles uit te voeren:

  1. Voorvertoning en debugmodus

    Log in op je GTM-account en klik op voorvertoning. Open vervolgens een nieuw tabblad in de browser en bezoek je website. Het GTM-debugvenster zou onderaan het venster moeten verschijnen als GTM correct werkt.
    Activeer GTM-debugmodus
    Activeer de GTM-debugmodus om te controleren of GTM correct werkt.
  2. Chrome Developer Tools

    Open Chrome Developer Tools met een rechtermuisklik op een willekeurige pagina van je site en selecteer inspecteren (Alternatief F12 op Windows en Shift+CTRL+J op Mac).
    Ga vervolgens naar het netwerk tabblad en herlaad de webpagina gelijktijdig (F5 op Windows en CMD+Shift+R op Mac). Het netwerk tabblad zal zich vullen met alle netwerkverzoeken die nodig zijn om de pagina te laden.
    Typ in het filterveld linksboven gtm.js om het verzoek voor je JavaScript-code te vinden en controleer of het een statuscode van 200 heeft.

    Laat me je laten zien hoe:


    Als je geen 200 statuscode hebt, ben je misschien vergeten een container eerst in GTM te verzenden en te publiceren?
  3. Google Tag Assistant

    Installeer de Google Tag Assistant Chrome-extensie en start deze op je site. Het zou een GTM-container ID moeten oproepen.

Hoe stel je Google Tag Manager in?

Bij het instellen van Google Tag Manager kun je veel geavanceerde configuraties maken. Dus hoe je GTM instelt, hangt af van welke andere tools je van plan bent te gebruiken in je tag management systeem.

Daarom heb ik alle relevante tutorials verzameld die behandelen wat je mogelijk in je GTM-account wilt instellen - met voorbeelden. Volg gewoon deze Google Tag Manager gids en creëer daarmee een solide tag management basis voor je site.

Alleen de tutorial over het implementeren van een data layer vereist coderingsvaardigheden of mogelijk webontwikkelaars.

Opmerking: In deze Google Tag Manager tutorial, zullen we GTM gebruiken door handmatig nieuwe tags en triggers voor elk evenement in te stellen. De aanpak is niet super schaalbaar, maar het is snel genoeg en gemakkelijk, terwijl het voldoet aan de meeste trackingdoelen en nog steeds toepasbaar is op andere geavanceerde configuraties.

Grotere websites en e-commerce winkels vereisen een schaalbare tag management oplossing. Daarom wordt een data layer geïmplementeerd als het centrale stuk om evenementen te volgen. Met zo'n opzet kun je event handlers gebruiken in plaats van tags, triggers en variabelen voor elk evenement in te stellen.

  1. Stel Google Analytics tracking in

    Dit is de eerste stap voor iedereen. Leer in deze gids hoe je solide Google Analytics tracking implementeert, met Doelen, Trechters, en je eigen bezoeken uitgesloten van het verkeer. Plus meer best practices.

  2. Stel event tracking in

    Zodra de fundamentele trackingimplementatie correct werkt, wil je ook gebruikersbetrokkenheid volgen. Hoe vaak verstuurt een bezoeker bijvoorbeeld formulierinzendingen en klikt hij op een verzendknop of een ander HTML-element? Mijn event tracking gids legt precies uit hoe dat werkt voor een knopklik en je kunt dezelfde methode gebruiken voor elke andere kliktracking.

  3. Voeg remarketing tags toe

    De meest voorkomende use-case voor GTM na het installeren van GA is het toevoegen van remarketing tags aan een website. Ze vormen tenslotte de meerderheid van third-party marketing tags en trackingcodes die de codebasis van onze sites vervuilen.
    Daarom implementeren we ze via ons GTM-account om de codebasis schoon te houden van marketing- en analysetags, terwijl we profiteren van de voordelen van Google Tag Manager.

    Laten we leren hoe we de meest voorkomende remarketing tags in de digitale marketingruimte kunnen toevoegen, de Facebook pixel en de Google Ads remarketing tag.

    Voeg Facebook pixel toe

    Voeg Google Ads remarketing toe

  4. Implementeer een data layer

    Je wilt een data layer implementeren als je regelmatig tags instelt en het te lang duurt en te arbeidsintensief is.

    Een ander voordeel is dat je de informatie uit je database kunt gebruiken voor het afvuren van triggers of deze kunt verzenden als gebeurtenisgegevens. Andere externe gegevensbronnen kunnen ook worden geïntegreerd. Websites die ecommerce tracking nodig hebben, vallen meestal in deze categorie.

    Mijn artikel over de data layer legt de implementatie uit, data layer-variabelen en hoe je aangepaste tracking op een schaalbare manier configureert, wat een typische use-case is voor grote ecommerce winkels die uitgebreide ecommerce tracking nodig hebben.

Best practices voor elke GTM-setup

Elke keer dat ik Google Tag Manager instel, komt de setup met een paar configuraties die ik elke keer toevoeg. Deze best practices zijn toepasbaar en nuttig voor de meeste bedrijven en mogen in geen enkele GTM-tutorial ontbreken. Zie de lijst hieronder en kies de nuttige voor jou.

Verderop kun je een GTM setup configuratie downloaden met al deze best practices om in je eigen container te importeren.

Om outbound link clicks te tracken betekent het tracken van alle klikken op externe links die van je website naar andere websites leiden. Het tracken van externe links is een best practice die je laat weten naar welke websites je bezoekers stuurt en helpt je de interesse van je bezoekers te verifiëren.
Om externe link tracking te implementeren, zijn er drie stappen:

  1. Maak een aangepaste gebeurtenisvariabele in GTM

  2. Maak een tag voor het GA-event

Track klikken op e-mailadressen

Het volgen van klikken op e-mails is een nuttige metriek die vaak correleert met telefoongesprekken of bezoeken aan een fysieke winkel.
Om Google Analytics tracking voor e-mailklikken in te stellen, volg je de stappen in de onderstaande tutorial:

  1. Voeg een nieuwe trigger toe voor e-mail adres klikken

  2. Stel de GA-eventtag in

Track klikken op telefoonnummers

Het volgen van klikken op telefoonnummers is vooral nuttig op mobiele apparaten. Tappen op een telefoonnummerlink start direct een telefoongesprek. Op desktops initiëren muisklikken meestal niets. Maar zoals bij het volgen van klikken op e-mails, is het een goede metriek om contactpercentages in het algemeen te bevestigen, omdat het correleert met andere methoden om contact op te nemen met een bedrijf.

Leer hoe je GTM configureert voor het volgen van klikken op telefoonnummers door de onderstaande stappen te volgen.

  1. Maak een trigger voor klikken op telefoonnummers

  2. Maak een telefoonnummer eventtag

Track downloads

Het volgen van hoe vaak bezoekers je materialen downloaden is een goede indicator van betrokkenheid. Dergelijke downloads kunnen bijvoorbeeld eBooks, Excel-sheets, afbeeldingen, video's of muziek zijn.

Het volgen van downloads werkt goed om onderscheid te maken tussen bezoekersgroepen die niet geïnteresseerd waren in de inhoud van de pagina en bezoekers die daadwerkelijk geïnteresseerd waren en hebben gedownload wat je aanbood.

Volg deze tutorial om te leren hoe je download tracking instelt:

  1. Configureer een GTM-trigger voor downloadklikken

  2. Volg downloads met een Google Analytics event

Gids om tags en triggers te testen

Een Google Tag Manager tutorial zou niet compleet zijn zonder een deel over debuggen. Om een van de eerdere eventconfiguraties te testen en er zeker van te zijn dat ze werken, doe je een van de volgende dingen:

  1. GTM Preview-modus

    Laten we eerst de voorvertoning- en debugmodus starten. Klik in het Google Tag Manager-overzicht op de preview knop in de rechterbovenhoek. Open vervolgens een nieuw tabblad in dezelfde browser en je zult merken dat een GTM-debugvenster onderaan verschijnt.

    Terwijl je in de preview-modus bent, voer je de tags en triggers zelf uit. Klik bijvoorbeeld op een externe link of een telefoonnummer en kijk of de trigger en je tag wordt weergegeven in het GTM-debugvenster samen met de eventdetails die je hebt toegevoegd.
    google tag manager debugger voor events
    De Google Tag Manager debugger opent automatisch zodra de preview-modus is geactiveerd en toont gegevens over tags, triggers en variabelen.
  2. Google Analytics realtime rapport voor events

    Een andere methode is om in te loggen op Google Analytics en vervolgens het realtime rapport voor events te bezoeken. De events zouden enkele seconden na het afvuren van de trigger moeten verschijnen.
    google analytics realtime rapport voor events
    Je kunt GTM-configuraties verifiëren met het Google Analytics realtime rapport.
  3. Chrome-extensie voor debuggen

    Installeer een Chrome-extensie om de tag en trigger te debuggen. Ik raad Trackie of Omnibug aan, maar er zijn ook andere oplossingen beschikbaar. Zodra je de extensie aan Chrome hebt toegevoegd, kun je Chrome Developer Tools openen en er zal een nieuw tabblad beschikbaar zijn. Het toont je alle informatie over de afgevuurde tagmanagementregels. Als je dan je triggers in de debugmodus afvuurt, toont de extensie trigger- en eventgegevens.
    Trackie Chrome-extensie toont eventgegevens.
    Trackie Chrome-extensie toont eventgegevens in Chrome Developer Tools.
    Omnibug Chrome-extensie toont eventgegevens voor debuggen
    Omnibug Chrome-extensie toont eventgegevens voor debuggen in Chrome Developer Tools.

Download GTM configuratie containerbestand

Aangezien de bovenstaande configuraties universeel nuttig zijn voor de meeste Google Tag Manager-implementaties, heb ik de bovenstaande GTM setup als een bestand gemaakt om te importeren in andere Google Tag Manager-containers.
Het is een .json bestand met de instellingen en naamgevingsconventie die we hebben behandeld. Je kunt gewoon de containercode importeren zonder iets handmatig te hoeven instellen.

Of je nu een gloednieuwe container gebruikt om tijd te besparen bij het zelf instellen van de tags, of je kunt ze importeren in je bestaande container en de Google Analytics instellingen variabele inclusief de tracking ID naar je eigen ID bijwerken.

Je kunt deze configuraties downloaden en installeren (elk met tags, triggers en variabelen) om Google Tag Manager in te stellen:

  • Track outbound links
  • Track email klikken
  • Track telefoonnummer klikken
  • Track downloads

Importeer eenvoudig de containerinstellingen en implementeer ze. Voor demonstratiedoeleinden heb ik een Google Analytics-instellingen variabele toegevoegd met een Google Analytics-tracking ID van UA-12345678-9.

Werk de GA-trackingcode bij naar je eigen ofverander de GA-instellingen variabele in de tagconfiguratie naar je eigen.

Download de GTM setup configuratie en zie hieronder hoe je deze importeert.

Importeer instellingen in je GTM-container

Om het meeste uit deze GTM-tutorial te halen, volg je de onderstaande stappen en importeer je de instellingen in je GTM-container:

  • ga naar beheerder > importeer container.
  • selecteer het JSON-bestand dat je zojuist hebt gedownload.
  • kies een nieuwe werkruimte met bijvoorbeeld de naam Import Bluerivermountains.
  • kies als importoptie om te samenvoegen en hernoemen van conflicterende tags, triggers en variabelen.
  • klik op bevestigen en druk op de verzenden en de publiceren knop om de tags te implementeren.

    Laat me je dit laten zien in deze video:
  • Verander ten slotte de GA-tracking ID in de Google Analytics-instellingen variabele naar je eigen tracking ID of werk de instellingen variabele in de tags bij naar je eigen instellingen variabele.

Opmerking over persoonlijke gegevens

We moeten ons bewust zijn van de informatie die we volgen. Gegevens zijn niet zomaar gegevens, omdat landen regelgeving hebben over gegevensprivacy die van invloed zijn op het soort informatie dat we tijdens het volgen mogen verzamelen.

Evenzo zijn er ook voorwaarden aan de kant van Google, die het verbieden om persoonlijke informatie te volgen en de gegevens naar hun servers te sturen.

Met dat in gedachten:

Over het algemeen zijn e-mails of telefoonnummers persoonlijk identificeerbare informatie (PII) en mogen we deze niet naar ons Google Analytics-account sturen, omdat dit tegen hun servicevoorwaarden is.

De telefoonnummers op onze website of onze eigen zakelijke e-mailadressen zijn echter nauwelijks privé, omdat het niet de gegevens van de gebruikers zijn, maar onze eigen gegevens die openbaar beschikbaar zijn op de website.
Toch, als Google Analytics ooit hun database controleerde en die gegevens vond, konden ze niet weten dat het eigenlijk geen PII-gegevens zijn.
Daarom raad ik aan om geen enkel risico te nemen en alle e-mailadressen en telefoonnummers die naar het Google Analytics-account worden verzonden te verbergen.

Simo Ahava heeft geweldig werk verricht en een custom task script geschreven om PII uit Google Analytics hits te verwijderen en ik raad aan om dit samen met de bovenstaande configuraties te implementeren.
Het is geen vereiste, maar door het te implementeren vermijd je eventuele verwarring of je wel of geen PII-gegevens hebt.

FAQ

Heb ik Google Tag Manager nodig?

Ja, omdat je website waarschijnlijk Google Analytics en andere third-party script tags wil gebruiken. Het instellen van al die dingen is veel eenvoudiger en sneller met Google Tag Manager. Bovendien laadt je site ook wat sneller.

Wanneer moet ik Google Tag Manager gebruiken?

Zelfs als je alleen Google Analytics wil gebruiken, moet je Google Tag Manager gebruiken. Het instellen van event tracking, cross-domain tracking of formulier tracking zijn veel voorkomende volgende stappen, maar veel sneller en eenvoudiger met GTM dan zonder. Er zijn ingebouwde triggers voor scroll tracking en video tracking, plus veel tutorials online die uitleggen hoe je Google Analytics instelt met GTM.

Hoe gebruik ik Google Tag Manager met Google Analytics?

Log in op analytics.google.com met je Google-account en krijg je Google Analytics-trackingcode inclusief de tracking ID. Voeg de Google Analytics-tag nu niet toe aan de broncode van je site. De enige hard-coded tag zou de Google Tag Manager-tag moeten zijn. Ga dus naar tagmanager.google.com om de GTM-code snippet te krijgen en implementeer die in plaats daarvan op elke pagina van je website. Implementeer ten slotte de GA-code via een ingebouwde tag, voeg je tracking ID toe en blijf doorgaan met Google Analytics instellen via Google Tag Manager. Voor het toevoegen van marketingtags of het configureren van aangepaste tags gebruik je voortaan altijd GTM.

Wat is het verschil tussen Google Analytics en Google Tag Manager?

Google Analytics is de bibliotheek om gegevens te verzamelen over bezoeken en betrokkenheid op je website. Google Tag Manager daarentegen is een bibliotheek die op je site draait om andere bibliotheken of trackingtools zoals Google Analytics te implementeren. Omdat veel marketing- en analysetools extra JavaScript-snippets hebben, gebruik je de GTM-gebruikersinterface om ze allemaal in te stellen.

Waar plaats ik de Google Tag Manager-code?

Het eerste deel van de code gaat zo hoog mogelijk in de <head> sectie. Ik raad aan om het binnen de <head> te implementeren, maar na alle <style> of <script> tags die essentieel zijn om de pagina weer te geven - omdat we deze niet willen vertragen.
Het tweede deel is om een basisfunctionaliteit in browsers met uitgeschakelde JavaScript mogelijk te maken. Het gaat zo hoog mogelijk in het <body> element.
De logica achter de positionering van beide tags is om de vroege laadtijd van GTM te garanderen. Het stelt je in staat om aangepaste tags zo vroeg mogelijk tijdens het laden van de pagina af te vuren.


Google Tag Manager code
De GTM-tag heeft twee delen. Het eerste deel wordt hoog in de head tag geplaatst en het andere direct na de opening body tag (zie hieronder).

positionering van de datalayer voor de tag management tag in de broncode
De algemene volgorde moet altijd zijn 1. datalayer object 2. Google Tag Manager, beide in de head en 3. de andere GTM-code hoog in de body tag.

Bevat Google Tag Manager Google Analytics?

Nee, maar Google Tag Manager stelt je in staat om Google Analytics in enkele seconden te implementeren met slechts een paar klikken. Het enige wat je nodig hebt, is je Google Analytics-tracking ID. Over het algemeen hoef je echter Google Analytics niet te gebruiken met Google Tag Manager. Ze zijn onafhankelijk van elkaar.

Hoe krijg ik toegang tot Google Tag Manager?

Bezoek tagmanager.google.com en log in met je Google-account om toegang te krijgen tot Google Tag Manager. Om GTM te gaan gebruiken, maak je een nieuw account aan en kies je als doelplatform web-eigendom. Neem vervolgens de snippet en installeer deze op elke pagina van je website.