Google tag manager installeren: volledige uitleg

Google Tag Manager  is een tool die onmiskenbaar is voor het beheren van een succesvolle website. Sterker nog, bijna 42% van de top 200 marketingwebsites gebruikt Google Tag Manager (naast miljoenen anderen). Google Tag Manager is de ideale analytische marketingtool die tagging op je website mogelijk maakt. Wellicht heb je al het één en ander opgezocht over hoe je deze tool kunt installeren en ben je een beetje afgeschrikt door het technische aspect van de hele procedure. Maar GEEN PANIEK! Je hoeft geen codingwizard te zijn om de installatie zelf te voltooien! Jij kan dit gewoon vanuit je zolderkamer zonder enige hulp van een developer; mits je deze stappen secuur volgt. Google Tag manager installeren is nooit zo gemakkelijk geweest dankzij deze uitgebreide uitleg!

De roze flamingo

Dus without further ado duiken we in de stof van Google Tag manager. Voor het gemak nemen we onze fijne roze flamingo uit het Customer Journey artikel weer als voorbeeld om de uitleg wat makkelijker (en leuker) te maken. Stel: je hebt een website “www.giantpinkflamingo.nl” waar je de beste roze opblaasflamingos op deze aardbol verkoopt. Je gebruikt al flink wat analytische tools op je website, maar je bent op zoek naar een betere manier om al je tags te beheren; Enter: Google Tag Manager.

Wat is Google Tag Manager en waarom zou je het moeten installeren?

1: Google Account aanmaken

2: Google Tag Manager Account aanmaken

3: Container Instellen

4: Voorwaarden

5: Installatie (WordPress of Magento)

Wat is een tag?

Een “Tag” is een stukje code van bijvoorbeeld analytische tools zoals Google analytics, Facebook Pixel of Linkedin. Met deze code kun je de analytische tools feilloos integreren op je website, webshop of app.

Waarom Google Tag Manager?

Allereerst is het een goed-werkende en gratis tool. De tool kan door iedereen makkelijk beheerd worden en vergt geen ICT-diploma door zijn gebruiksvriendelijkheid. Je kunt zelf makkelijk en snel nieuwe tags toevoegen. Daarnaast kun je gemakkelijk bestaande tags toevoegen en wat mensen vaak niet weten is dat met efficiënte tag management je website veel sneller wordt (vergeleken bij losse tags wanneer je geen Google Tag Manager gebruikt).

Tot slot gaat Google Tag Manager, zoals alle andere Google tools, flink ontwikkelen. Momenteel is Google Tag Manager vooral bruikbaar tot ‘gemiddeld grote websites’ (ongeveer 10.000 pagina’s).

Maar Google kennende, zal het niet lang meer duren voordat alle concurrentie uit de weg is geveegd en Google Tag Manager voor de grootste websites gebruikt wordt. Meer dan genoeg redenen om deze volledig gratis tool te installeren! Zo ben je verzekerd dat je flamingo’s de deur uitvliegen! (Pun intended) Laten we snel kijken hoe je dit aanpakt!

Stap 1: Google account aanmaken

Ten eerste moet je (mocht je deze nog niet hebben) een Google account aanmaken. Heb je al een Google account; dan kun je deze stap overslaan! Vrij gewoonlijk maak je een gebruikersnaam met wachtwoord aan (die je altijd goed moet beveiligen!). Je krijgt dan automatisch een Gmail account en e-mail adres en vervolgens kun je gratis gebruik maken van het mega-Google aanbod (zoals: Analytics, Drive, Youtube en meer)

Stap 2: Google Tag Manager account aanmaken

Vervolgens kun je, na het inloggen met je Google account, beginnen met Google Tag Manager Installeren. Op de website van Google Tag Manager Begin je aan de registratie.

Vervolgens kom je op de registratiepagina en maak je een Google Tag Manager account aan. Je begint door een accountnaam in te stellen; in dit geval de naam van onze Flamingo-onderneming. Vervolgens stel je het land in waar je woont (ofwel: het land dat je target met je website).

Stap 3: Container instellen

De volgende stap van Google tag manager installeren; is het instellen van je container. Je vult de domeinnaam van je (flamingo) website in en bepaalt waar de container gebruikt wordt: Internet, Ios, Android of AMP. 

Stap 4: Ga akkoord met de voorwaarden

Zoals gewoonlijk dekt Google zich volledig in, zoals je kunt zien ook met de nieuwe AVG.  Neem de servicevoorwaarden door en ga akkoord. Wanneer je dit doet ga je ook akkoord met de gegevensverwerkingen die Google in opdracht van jou uitvoert, ze doen dit daarom ook volgens die nieuwe AVG wetgeving. Daarom wordt je gevraagd om akkoord te gaan met de voorwaarden van Google tag manager.

Het is altijd belangrijk om de voorwaarden goed door te lezen. Zo ben je er zeker van dat je niet voor verrassingen komt te st….. Je hebt al op akkoord geklikt zonder de voorwaarden te lezen? Oh… Maar wat als er nu iets instaat wat je…Nee? Oké! Laten we verder gaan met Google Tag Manager installeren.

Stap 5: Google Tag Manager Installeren

Nadat je Google Tag Manager account is aangemaakt ontvang je twee lijnen code. Deze lijnen zijn de kern van de gehele installatie; deze code maken namelijk de integratie tussen jouw website of webshop en Google Tag Manager mogelijk.

Zoals je kunt lezen moet je de bovenste code zo hoog mogelijk in de <head> van alle pagina’s op je website zetten. De onderste code plak je onmiddellijk na de <body> openingstag van alle pagina’s op je website. Omdat dit natuurlijk onwijs veel werk is; leggen we uit hoe je dit gemakkelijk op je WordPress website of webshop of je Magento webshop kunt doen. Nu is aan jou de vraag; wil je Google Tag Manager installeren voor WordPress of voor Magento?

Google Tag Manager Installeren op WordPress (methode 1)

In deze eerste methode plaatsen we de code direct onder de head en body tags. Deze eerste methode voor Google Tag Manager installeren op WordPress is de makkelijkste manier. 

Nadat je hebt ingelogd als Admin op je WordPress CMS houd je de muis op “Weergave” in het menu aan de linkerzijde van het scherm en klik je op “Editor”.

WordPress Tekst editor

Vervolgens kom je in de tekst editor van je website. De meeste WordPress thema’s bestaan uit twee onderdelen: Parent en Child. In de Parent code staat alle core functionaliteit van je website; daar moet je dus NIKS in veranderen bij Google Tag Manager Installeren. in de Child code kun je custom styling opties toevoegen. Voor Google Tag Manager installeren werk je dus ALTIJD in de CHILD code.

Hierboven zie je de tekst editor code van onze prachtige GiantPinkFlamingo.nl website. Zoals aangegeven met rode cirkels hebben we de CHILD code gekozen en in de balk rechts geklikt op ‘Theme header’  (header.php). Hier voeg je de bovenste code toe die we eerder bij het aanmaken van het Google Tag Manager account hebben gekregen:

Deze code kopieer en plak je zo hoog mogelijk binnen de <head> </head> tags van je CHILD code in de tekst editor. De ideale locatie waar deze code geplakt moet worden is hier met een rode pijl aangegeven:

Weet je niet meer waar je de code van Google Tag Manager kunt vinden? Ga dan naar je Google tag Manager homepage en klik op je Google Tag Manager ID:

Vervolgens kopieer je het tweede deel van de Google Tag Manager code:

En deze plak je in dezelfde code editor gelijk onder de openende <body>  tag:

Klik vervolgens onder aan de pagina op “Bestand Bijwerken” om alles op te slaan:

Nadat je wijzigingen in WordPress zijn opgeslagen ga je terug naar je Google Tag Manager account en klik je op “Verzenden”:

Vervolgens voer je een naam en een optionele beschrijving in. Daarna kun je kiezen of je het systeem eerst wilt testen of live wilt gaan. Ben je met alles tevreden? Klik dan op “Publiceren”:

Google Tag Manager Installeren op WordPress (methode 2)

Het verschil tussen deze methode en de vorige (gemakkelijkere) is dat we hier niet alleen werken in de Header.php maar in de Functions.php van je WordPress website. Verder werken we met deze methode met Javascript add_action() en wp_head en vergt het iets meer codeerwerk. Daarnaast is de kans groter dat de installatie slaagt omdat we in deze functions.php werken. Dit maakt het iets meer ingewikkeld, maar als je de uitgebreide stappen secuur volgt heb je binnen no-time Google Tag Manager geïnstalleerd. Onthoud dat we nogmaals (wanneer mogelijk) werken in de CHILD  Function.php en Header.php. 

Na het inloggen als Admin op je WordPress CMS ga je met je muis over “Weergave” in het menu aan de linkerzijde van het scherm en klik je op “Editor” (zie afbeelding).

WordPress Tekst editor

Nu zit je in de tekst editor van je WordPress website. Hier werken we in de CHILD van je thema (zie afbeelding) en beginnen we met het aanpassen van je Functions.php. 

Hierin voegen we de volgende code toe:

Deze code creëert een functie (function) met daarin het eerste deel van jouw Google Tag Manager code. Onderaan staat add_action. Dit vertelt jouw website de locatie van waar deze code moet komen: “wp_head”, wat de functie is: my_custom_code1, en hoe hoog de code moet staan in de head (zo hoog mogelijk): 10.  In deze code voegen we de eerste lijn code toe die je van Google hebt gehad waar het staat aangegeven in het voorbeeld. Dat is dus de volgende code:

Als je dat hebt gedaan moet het er ongeveer zo uit zien:

Voordat we het tweede deel code van Google Tag Manager in de <body> tag kunnen toevoegen moeten we een omweggetje maken. In WordPress kun je namelijk geen functies injecteren in de <body> van je. Daarom gaan we nu niet werken in de CHILD van de functions.php maar in de CHILD van de header.php (Zie afbeelding). 

In deze tekst zoek je deze code:

En voeg je het volgende toe:

Na het toevoegen van de body_top() functie moeten we de tweede lijn code van Google gaan toevoegen binnen je <body> tag voor de “noscript” code die je van Google hebt gekregen (de tweede code dus).

Op de plaats waar het staat aangegeven in het bovenstaand voorbeeld vul je dus deze (tweede) noscript code in die je van Google hebt gekregen:

Als je dit juist hebt uitgevoerd moet het er ongeveer zo uit zien:

Je WordPress site is nu voorzien van Google Tag Manager!

Et Voillà! Als je deze stappen juist hebt gevolgd ben je helemaal klaar met het Google tag manager installeren op je WordPress website! Verricht je de installatie toch liever niet helemaal handmatig; dan heeft is er een super plugin genaamd ‘DuracellTomi’s Google Tag Manager for WordPress‘ die de installatie voor je uitvoert. Ook bestaan er genoeg plugins die het gehele proces van Google Tag Manager installeren overnemen. Dit klinkt verleidelijk; maar je kunt hier beter geen gebruik van te maken omdat je zo minder controle hebt over je code (en in de meeste gevallen moet je uiteindelijk TOCH handmatig aan de slag binnen je code). Het is daarom veel beter als je het gewoon zelf doet (daarnaast scheelt het je ook nog eens geld). Het is ook erg belangrijk om even te controleren of de installatie goed is gegaan.

Wil jij de volledige potentie uit je website of webshop halen en wil je écht aan de slag met Google Tag Manager? Neem contact met ons op en leer de mogelijkheden!

Google Tag Manager installeren op Magento 2

Google Tag Manager installeren op Magento 2 gaat met een andere methode dan die toegepast wordt bij WordPress websites. Desalniettemin kun je dit vooralsnog helemaal zelf, deze keer met een klein steuntje in de rug. Namelijk, met behulp van een extensie. Zelfs met een extensie kun je op veel plekken ergens tegenaan lopen; dus let goed op. Kom je er niet uit, dan kun je het altijd volledig door iemand anders laten doen!

Mageplaza Google Tag Manager Extension

Als je de eerste 3 stappen van dit artikel goed hebt uitgevoerd heb je ondertussen al een Google Tag Manager account, een container en ben je akkoord gegaan met de voorwaarden. Download nu de Mageplaza Google Tag Manager extension.

Deze extensie kost je zoals je ziet 50 Dollar (ongeveer 43 Euro dus). Dat is vergeleken bij de concurrentie een zéér schappelijke prijs!

Nadat je de extensie gedownload hebt volg je de onderstaande stappen:

1: Download de ZIP bestanden van de extension

2: Pak de bestanden uit in een map naar wens

3: Upload de bestanden via FTP in de Magento 2 Root directory folder –> APP

4: In je Magento 2 Admin interface; schakel de cache uit via: SYSTEM –> CACHE MANAGEMENT

5: In de COMMAND LINE gebruik de volgende command:

6: Ga terug naar de Magento 2 Admin interface en open: STORES –> CONFIGURATION –> ADVANCED –> ADVANCED en de nieuwe extension zal daar automatisch al staan (zie je de extension niet staan? dan heb je iets verkeerds gedaan; ga de stappen nog goed na! Kom je er niet uit? Je kunt het ook door iemand anders laten doen.)

7: In je Magento 2 Admin interface, ga nu naar GOOGLE TAG MANAGER –> SETTINGS en pak je Google Tag Manager ID er weer bij (die je hebt gekregen bij het aanmaken van je Google Tag Manager Account)

Deze vul je in bij het GOOGLE TAG ID veld:

Sla je nieuwe configuratie op door SAVE CONFIG. aan te klikken en ververs je cache.

Je bent nu klaar met Google tag Manager installeren op je Magento 2 Webshop! Toch?

Yes! Als je alle bovenstaande stappen juist gevolgd hebt; is Google Tag Manager nu geïnstalleerd op je Magento 2 webshop! Je kunt nu de tags toevoegen die jij belangrijk vindt! Google Analytics is een goed begin en tegenwoordig bij een website of webshop vrijwel onmiskenbaar! Is er iets mis gegaan? Zit je met je handen in je haar? Sta je op het punt je computer door het raam te gooien en in plaats van online ondernemen,  toch maar een baantje te zoeken bij de plaatselijke supermarkt? STOP! Geen paniek! Check je bloeddruk, rustig ademhalen en schakel de experts in! Deze gecertificeerde Magento en WordPress specialisten kunnen het zware werk voor je doen. Zo kan jij in je Reuze Roze opblaas-Flamingo, lekker in het zwembad dobberen terwijl het geld van je webshop of website binnenstroomt! Vergeet ook niet om even te controleren of de installatie is geslaagd!

Laatste controle 

Als laatste controle om zeker te weten dat Google Tag Manager juist geïnstalleerd is kunnen we een aantal gemakkelijke stappen volgen. Er kan namelijk tijdens de installatie altijd iets misgaan waardoor Google Tag Manager niet goed functioneert.

Ga eerst terug naar je Google Tag Manager dashboard en klik rechtsboven op “voorbeeld”.

Je ziet nu deze melding; dit betekent dat de voorbeeldmodus is geactiveerd. LET OP: sluit dit tabblad niet! En verlaat deze pagina niet!

Vervolgens ga je IN EEN NIEUW TABBLAD naar jouw website. Als Google Tag Manager werkzaam is zie je het volgende venster op elke pagina van je website:

In het bovenstaande venster wat onder in je scherm tevoorschijn komt zie je precies welke tags actief zijn op de pagina waarop je je op dat moment bevindt. Zo kun je niet alleen controleren of de installatie gelukt is, maar dus ook welke tags op welke pagina’s actief zijn. Nadat de controle is gelukt sluit je het tabblad met je website en ga je terug naar het openstaande tabblad van je Google Tag Manager.

Klik nu in het oranje venster op “voorbeeldmodus sluiten”. Als je dit niet doet blijft je voorbeeldmodus actief totdat je deze stopt; zelfs als je uitlogt. Ben je er nog steeds niet helemaal uitgekomen? Je kunt de installatie ook door een professional laten doen.