Google Tag Manager Implementatie – Voor Marketeer & Webdeveloper

Jorg van de Ven

20 Jul, 2020

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?

Google Tag Manager Implementatie

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:

Google Tag Manager Implementatie voor Divi

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.

Google Analytics AVG proof instellen

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!

Google Tag Manager Debugger

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!

 

0 Comments

Submit a Comment

Your email address will not be published.

Andere blogs die je wellicht interessant vindt:

Google Analytics Web + App instellen

Google Analytics Web + App instellen

Ben je al bekend met Google Analytics Web + App? Als ondernemer, bedrijf of individu maak je hoogstwaarschijnlijk gebruik van Google Analytics. Deze gratis tool van Google maakt het mogelijk om, op een laagdrempelige manier, je bezoekersaantallen en...

read more
Wat zijn de Core Web Vitals?

Wat zijn de Core Web Vitals?

Onlangs heeft Google drie nieuwe rankingfactoren naar buiten gebracht. Deze vallen alle drie onder de noemer "Core Web Vitals". Deze rankingfactor bepaalt voor een gedeelte de gebruikservaring ofwel de User Experience (UX) van je website. Maar wat zijn deze...

read more