De implementatie van Google Tag Manager is simpel. Plaats een snippet in de <head> en eentje direct na het openen van de <body> tag. En klaar! Toch gaat het mis als een (technisch) marketeer communiceert naar een web developer en visa versa.
In dit blog leg ik de stappen uit voor de implementatie van Google Tag Manager. Onderaan de pagina vind je ook veelvoorkomende fouten. Maak jij deze fouten?

Hoe implementeer je Google Tag Manager?
De implementatie of installatie van Google Tag Manager is simpel. Door twee snippets op de website te plaatsen kan de marketeer aan de slag met taggen. De web developer van de website of webshop dient deze snippets op de juiste plek te plaatsen. Dit gaat helaas niet altijd goed.
Een marketeer moet duidelijk en precies zijn over de implementatie. Daarnaast moet een een webdeveloper zich flexibel opstellen en niet direct gevaar zien in dit onbekende stukje code.
De code voor in de <head>
Het is belangrijk dat de onderstaande code zo hoog mogelijk in de <head> wordt geplaatst. Daarnaast moet de code op iedere pagina van de website terugkomen. Google adviseert om het zo hoog mogelijk in de <head> te plaatsen maar als het lager in de <head> komt te staan werkt Google Tag Manager alsnog uitstekend.
Let op! Dit is een dummy code. Iedere Google Tag Manager container heeft z’n eigen unieke ID. Normaliter komt deze te staan op de plek waar nu “UNIEK GTM ID” staat.
De code voor in de <body>
Voor de code in de <body> gelden dezelfde regels als die voor de <head>. Plaats deze direct na het openen van de <body> tag, op iedere pagina van de website. In mijn ervaring ligt dit wat gevoeliger dan de <head> code. Zorg ervoor dat de code echt direct na het openen van de <body> tag koment.
Let op! Ook het onderstaande veld bevat dummy code.
Google Tag Manager implementatie voor WordPress websites
Als je gebruik maakt van een WordPress website dan heb je geluk! In dit geval kan een technisch marketeer de code zelf implementeren!
Afhankelijk van het thema of de module die je gebruikt kun je dit binnen enkele klikken implementeren.
Op het moment van schrijven gebruikt deze website het Divi thema. Deze biedt de mogelijkheid om code, zonder plugin, in de <head> en <body> te zetten. Gebruik je een thema die dit niet ondersteund? Kies dan voor een plugin. Een veelvoorkomende plugin is de “Google Tag Manager for WordPress” plugin van Thomas Geiger. De implementatie van deze plugin wijst zichzelf.
Hieronder zie je een afbeelding van de implementatie van Google Tag Manager op mijn website:
Fouten bij de implementatie van Google Tag Manager
In principe kan het bovenstaande worden verstuurt in een mailtje van marketeer naar webdeveloper. Toch gaat het vaak mis bij de plaatsing van het Google Tag Manager snippet. Hieronder een paar veelvoorkomende fouten.
Fout #1: Google Tag Manager en een Cookiemelding
Het komt voor dat een web developer, met alle goede bedoelingen, de Google Tag Manager snippets achter een cookiemuur plaatst. Tags die in de Google Tag Manager container zijn geplaatst zullen niets doen totdat de cookies zijn geaccepteerd. Google Analytics zal bijvoorbeeld geen data verzamelen totdat de cookies zijn geaccepteerd.
Google Analytics mag namelijk WEL data verzamelen zonder het accepteren van de cookies. De taak ligt niet bij de webdeveloper om dit in te richten maar deze ligt bij de marketeer. Met een kleine aanpassing aan de Google Analytics variabele (zie onderstaande afbeelding) ben je al “AVG Proof”. Voor een volledige handleiding verwijs ik naar de website van de Autoriteit Persoonsgegevens.
Fout #2: Er wordt maar één script geplaatst
Een andere fout die vaak voorkomt is dat er maar één van de twee codes wordt geplaatst. Enkel de code in de <head> of in de <body> plaatsen is niet voldoende om de werking van Google Tag Manager te garanderen.
Zodra er maar één van de twee scripts wordt geplaatst kan het zijn dat de preview modus (Debugger) van Google Tag Manager niet werkt of dat Tags simpelweg niet afvuren. Dit wil je kosten wat het kost voorkomen.
Controleer daarom altijd of beide codes in de broncode staan (ctrl + u), gebruik de Google Tag Assistant om te controleren of je Tags goed afvuren en test het met de debugger. Zie je een balk omhoog komen met daarin je tags? Dan werkt Google Tag Manager naar behoren!
Fout #3: De code is aangepast
Dit zal niet vaak voorkomen maar toch heb ik dit een aantal keer voorbij zien komen. In sommige gevallen wordt de code aangepast waardoor Google Tag Manager niet meer optimaal werkt. Dit komt voor zodra de code niet in z’n geheel wordt gekopieerd of zodra deze wordt aangepast omwille van snelheid. Bijvoorbeeld, door het “async” attribuut toe te voegen.
Het is voorgekomen dat een web developer een aanhalingsteken had verwijderd na een wijziging aan de <head>. Voorheen werkte Google Tag Manager naar behoren. Door deze fout ben ik uiteindelijk beide snippets gaan vergelijken, de ene van de live website en de andere uit de implementatie instructies, om uiteindelijk tot de conclusie te komen dat er een aanhalingsteken ontbrak.
Het is ook mogelijk dat de code door de opmaak van een e-mail client is aangepast. Daarom adviseer ik om de Google Tag Manager snippet te verzenden in een kladblok bestand (.txt). Hier blijft de opmaak ongewijzigd.
Hieronder zie je een voorbeeld van een goede en een foutieve code. Kun jij de verschillen ontdekken? 🙂
Hulp nodig?
Hulp nodig bij de implementatie van Google Tag Manager? Neem eens een kijkje op de blog van Simo Ahava.
In februari 2020 heb ik een Masterclass van hem mogen volgen over geavanceerde Google Tag Manager mogelijkheden.
Simo heeft voor ieder probleem een oplossing!
Ik help je natuurlijk graag verder vanuit Ventastic Solutions. Interesse? Neem contact met me op!