Naar de inhoud
sGTM.space

Google Tag Manager op je website installeren (webcontainer)

Met Google Tag Manager (GTM) voeg je trackingtags toe en pas je ze aan zonder voor elke wijziging de code van je site te bewerken. Je installeert één keer een kleine snippet, en vanaf dan beheer je GA4, advertentiepixels en andere tags in de GTM-interface. In deze les maak je de webcontainer aan, installeer je hem, stuur je je eerste eigen event en publiceer je een versie. Elke volgende les bouwt voort op deze container.

Beginner 8 min lezen

Op deze pagina

Wat je leert

  • Een GTM-account en een webcontainer voor je site aanmaken.
  • De head-snippet en de noscript-snippet in de body correct installeren.
  • Een eigen event naar de dataLayer pushen en het zien in de Preview-modus.
  • Een containerversie indienen en publiceren, en weten waar workspaces en versies voor dienen.

Voordat je begint

  • Een Google-account.
  • Toegang tot de template of het CMS van je website, zodat je code aan elke pagina kunt toevoegen.

01 Maak het account en de webcontainer aan

Eén GTM-account hoort meestal bij één bedrijf. Daarin maak je per website een container aan (en later een aparte servercontainer, die les 2 behandelt).

  1. 1 Open tagmanager.google.com en klik op Create Account.
  2. 2 Vul een Account Name (je bedrijf) en je Country in.
  3. 3 Vul onder Container Setup je domein in als Container name, bijvoorbeeld www.example.com.
  4. 4 Kies Web als Target platform en klik op Create.
  5. 5 Accepteer de servicevoorwaarden van Google Tag Manager (en de Data Processing Terms als je in de EER of het VK zit).

GTM toont dan het venster Install Google Tag Manager met twee snippets. Je container-ID heeft de vorm GTM-XXXXXXX en staat in allebei.

02 Plak de twee snippets

Plak de eerste snippet zo hoog mogelijk in de <head> van elke pagina. Hij laadt GTM asynchroon, dus hij blokkeert het renderen niet.

html 
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Plak de tweede snippet direct na de openende <body>-tag. Die dient als fallback voor browsers waarin JavaScript uitstaat.

html 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  • Gebruik in beide snippets je eigen container-ID, niet GTM-XXXXXXX.
  • Zet de snippets in een gedeeld layout- of themabestand, zodat ze op elke pagina staan en niet alleen op de homepage.
  • Veel platforms hebben een veld voor GTM of de Google-tag (WordPress-plug-ins, de Google-tag-instelling van Webflow onder Site settings, Apps & Integrations). Shopify gebruikt in plaats daarvan een custom pixel onder Settings, Customer events. Gebruik maar één methode, nooit allebei, anders laadt GTM twee keer.

03 Stuur je eerste eigen event via de dataLayer

De dataLayer is een JavaScript-array die je site en GTM delen. Je code pusht objecten erin, en GTM reageert erop. Een object met een event-sleutel wordt een event waar triggers naar kunnen luisteren; de andere sleutels worden waarden die je uitleest met Data Layer Variables.

js 
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'sign_up',
  method: 'email'
});

Voer deze code uit op het moment van de actie, bijvoorbeeld na een geslaagde aanmelding. Zo gebruik je het event in GTM:

  1. 1 Ga naar Triggers, klik op New en kies Custom Event.
  2. 2 Zet Event name op sign_up (dat moet exact overeenkomen, ook qua hoofdletters) en sla op.
  3. 3 Ga naar Variables, klik onder User-Defined Variables op New, kies Data Layer Variable en zet Data Layer Variable Name op method.

04 Test in de Preview-modus

De Preview-modus laat precies zien wat GTM op je site ziet, voordat er iets live gaat.

  1. 1 Klik rechtsboven in de workspace op Preview. Tag Assistant opent in een nieuw tabblad.
  2. 2 Vul de URL van je site in en klik op Connect. Je site opent in een ander venster met een Tag Assistant-badge.
  3. 3 Ga terug naar het Tag Assistant-tabblad. Links zie je events zoals Consent Initialization, Initialization, Container Loaded, DOM Ready en Window Loaded.
  4. 4 Voer op je site de aanmelding uit. Er verschijnt een sign_up-event; klik erop en open het tabblad Data Layer om method: email te zien.

Kan Tag Assistant geen verbinding maken, controleer dan of de snippet op de pagina staat en de juiste container-ID gebruikt. De les over debuggen noemt meer oorzaken.

05 Dien een versie in en publiceer

Niets wat je in GTM wijzigt, bereikt bezoekers voordat je het publiceert.

  1. 1 Klik rechtsboven op Submit.
  2. 2 Laat Publish and Create Version geselecteerd.
  3. 3 Vul een Version name en Version description in die zeggen wat er veranderd is, bijvoorbeeld Add sign_up trigger.
  4. 4 Klik op Publish.
  • Workspaces zijn concepten. Elke workspace bevat niet-gepubliceerde wijzigingen, zodat twee mensen kunnen werken zonder elkaars werk te overschrijven. Het gratis GTM-abonnement staat drie workspaces per container toe.
  • Versions zijn momentopnamen van de container op het moment van publiceren. Onder Versions zie je wie wat gepubliceerd heeft en kun je een oudere versie opnieuw publiceren om terug te draaien.
  • Beide snippets staan op elke pagina met je eigen GTM--ID.
  • Tag Assistant maakt verbinding met je site.
  • Het sign_up-event verschijnt in Preview met zijn method-waarde.
  • De eerste versie is gepubliceerd met een duidelijke naam.

Veelgestelde vragen

Vervangt de webcontainer mijn GA4-code?

Dat kan. In plaats van de GA4-snippet direct te plakken, voeg je een Google-tag toe in GTM. Les 3 doet dat en stuurt de data via je servercontainer. Verwijder een hardgecodeerde GA4-snippet zodra GTM dezelfde data stuurt, anders tel je alles dubbel.

Waarom heb ik de noscript-snippet nodig?

Hij draait alleen als JavaScript uitstaat, en dat is zeldzaam. Google raadt hem toch aan en hij kan geen kwaad, dus installeer hem.

Ik heb gepubliceerd, maar mijn wijziging is niet te zien op de site. Waarom?

Controleer of je de workspace met de wijziging hebt gepubliceerd en ververs de pagina daarna geforceerd. Paginacaches en CDN's kunnen ook een oude HTML-pagina serveren, maar het GTM-bestand zelf wordt binnen enkele minuten bijgewerkt.

Klaar om het in de praktijk te brengen?

Rol in een paar minuten een GTM-servercontainer uit op je eigen domein. Voor het Gratis-abonnement heb je geen creditcard nodig.

Gratis account aanmaken