Fixx iT | IT Consultancy & Weboplossingen

Google Tag Manager


Custom JavaScript tags using Google Tag Manager.

Google Tag Manager

Uneto-Vni wilde in eerste instantie onderscheid maken tussen ingelogde en niet-ingelogde gebruikers. Als dit eenmaal was doorgevoerd wilde Uneto-Vni per bezoeker het gebruikersgedrag analyseren in standaard Google Analytics rapporten. Om een idee te geven van de implementatie is onderstaand de bijgevoegde documentatie in te zien.

 

1. Test- en productieomgevingen 

Test- en productieomgevingen bestaat uit 2 configuraties: 1. configuratie GA; 2. configuratie GTM.

  1. Configuratie GA

In GA 2 property’s aanmaken met dezelfde views. Één property krijgt de naam productie de andere property development. Beide property’s hebben een eigen UA code die gekoppeld moet worden aan GTM.

Configuratie GTM

In GTM variabele aanmaken gekoppeld aan de GA property UA-codes. Afhankelijk van window.location.host wordt een UA-code getriggerd:

 

Lookup-variabelen

Waarde

{{GA - Property ID}}

UA-code van huidige website

{{GA - Debug}}

UA-code van huidige website

{{Debug Mode}}

Ingebouwde variabele in Google Tag Manager. Controleert of debug mode is ingesteld. Keert true of false terug.

Aan iedere Universal Analytics tag moet de {{GA - Property ID}} worden toegekend aan Tracking-ID. Anders heeft de Tag geen UA-code.

1.1 Scroll tracking

Documentatie scroll-tracking zie: https://github.com/lunametrics/gascroll/. Resultaten zijn te zien in GA gedrag-rapport onder de noemer scroll-tracking.

1.2 Hotjar

Ingebouwde Hotjar tag zie: https://docs.hotjar.com/v1.0/docs/google-tag-manager 

1.3 Page ID

Om niet afhankelijk te zijn van URL’s worden specifieke pagina’s gekoppeld aan het unieke pagina ID uit de database. De koppeling vind plaats in de tag {{CU - Page ID}}, de waarde in de dataLayer variabele {{Page ID}}.

 


2. User ID Report

User ID Report bestaat uit 2 configuraties: 1. configuratie GA; 2. configuratie GTM.

  1. Configuratie GA

In Google Analytics op property-niveau het User ID activeren.

 

Werking: als in de Tag het userId is ingesteld wordt de data geplaatst in de view User ID Report, is er geen userId ingesteld wordt de data niet-geplaatst in de view User ID report.

In totaal 3 views: ingelogde gebruikers, niet-ingelogde gebruikers en alle verkeer. Rapport niet-ingelogde gebruikers wordt getriggerd zodra in de dataLayer de variabele userUndefined: 1 (ofwel, true) wordt genoteerd.

Filters instellen voor niet-ingelogde gegevens: aangepaste dimensie configureren (userUndefined), bereik hit. Alle hits filteren op basis van userUndefined: 1 (true). Aangepaste dimensie userId, Gebruiker.

Configuratie GTM

Pagina moet wachten met het vuren van tags tot gecontroleerd is of gebruiker a) is ingelogd en b) relatieNummer aanwezig is. De tags zijn als volgt geordend:

gtm.js

Geen - ivm ontbreken DOM element

gtm.dom - {{Event - onload}}

CU - UserID - resulteert in event: “userIdReady”

userIdReady - {{Event - onload - UserID}}

UA - Pageview, CU -Hotjar, CU - Scroll Tracking, CU - Ledenzoeker

De tag CU - UserID werkt als volgt:

Function delayedAlert()

Zet een time-out op iedere functie die hierin wordt uitgevoerd.

Function httpGetAsync()

Maakt een asynchrone call naar de loggedin.aspx. Deze pagina keert ‘true’ of ‘false’ terug.

Function initGTM()

Als gebruiker is ingelogd wordt de variabele relatieNummer toegekend plus de dataLayer gevuld (userId : relatieNummer, userUndefined : false, userIdReady: waar)

De dataLayer variabelen uit de tag CU - UserID corresponderen met de volgende GTM variabelen:

{{User ID}}

Relatienummer van ingelogde gebruiker

{{User ID - User Undefined}}

True (1) als gebruiker niet is ingelogd. False (0) als gebruiker wel is ingelogd.

{{User ID Ready}}

‘waar’

Ter voorkoming van het eerder laden van pageviews en dergelijke is de volgende trigger de vervanger van de standaard (all pages) trigger:

{{Event - onload - UserID}}

gaat af zodra hele pagina is geladen en het User ID Ready is ‘waar’.

LET OP: voor iedere tag waarin het {{User ID}} een rol speelt moet deze in GTM worden gekoppeld door onder velden die moeten worden ingesteld de veldnaam userId te laten overschrijven door {{User ID}}.

 

3. Proces Webshop monitoren

User ID Report bestaat uit 2 configuraties: 1. configuratie GA; 2. configuratie GTM.

Configuratie GA

In Google Analytics op property-niveau doel inrichten: Webshop aankoop. Doeltype: bestemming (bedankt.html o.i.d.). Trechter (aan), stap 1: inloggen === /webshop-inloggen, niet verplicht; stap 2: Toevoegen winkelmandje === /webshop-toevoegen; stap 3: Winkelmandje === /webshop/winkelwagen; stap 4: Betalen === /webshop/winkelwagen-2.

 

Configuratie GTM

URL’s moeten worden gesimuleerd; voor iedere paginaweergave gekoppeld aan het funnel proces moet daarom de waarde “page” worden overgeschreven.

Stap 1 van funnel:

Tag: {{UA - Webshop - Funnel1}}

Trigger: {{Event - Webshop - Login}}

Variabele: {{Webshop - Inlogvalidatie}}

Om te voorkomen dat de inlogbutton 2 keer wordt getriggerd (bij een foutieve inlogpoging herlaad de pagina wel) is de variabele gemaakt. Deze validatie keert true terug als de vorige pagina niet exact hetzelfde was met de huidige pagina en de huidige pagina URL niet /cms/showpage.aspx bevat.

Stap 2 van funnel:

Tag: {{UA - Webshop - Funnel2}}

Trigger: {{Event - Webshop - Winkelmandje}}

Variabele: {{Event - Webshop - Winkelmandje}}

Stap 3 van funnel:

Tag: {{UA - Webshop - Funnel3}}

Trigger: {{Event - Webshop - Betalen}}

 

4. Zoeken binnen rubrieken

Zoeken binnen rubrieken is gekoppeld aan de {{Page ID}} van de betreffende pagina’s. Indien true dan wordt gekeken of er een zoekterm aanwezig is op de pagina. Zo niet, dan wordt teruggekeerd “geen zoekterm”.

Ingestelde variabelen:

{{Kennisgebieden - PageId}}

Stuurt de naam van de pagina terug op basis van het ((Page ID}}.

{{Kennisgebieden - zoekterm}}

Keert de zoekterm terug of de waarde “Geen zoekterm”.

Ingestelde trigger:

{{PageId - Kennisgebieden}}

Als de {{Page ID}} overeenkomt met de vooraf gedefinieerde page id’s van de betreffende pagina, dan wordt de tag afgevuurd.

Ingestelde tag {{UA - Kennisgebieden}}:

Gebeurtenis (komt terug in GA gedrag-rapport) met de waardes:

categorie: kennisgebieden - zoeken

Actie: Huidig kennisgebied

Label: zoekterm

 

5. Downloaden van documenten

Downloaden van documenten bestaat uit 2 tags: een tag die afgaat als er op een button met de tekst “DOWNLOAD” is geklikt, een tag die afgaat als de target-url eindigt op .pdf/.xlsx/.docx.

Tag klikken op downloads:

Tag: {{UA - Event - File download click}}

Trigger: {{Event - download document}}

 

Toont in Analytics gedragsrapport:

Categorie: Downloads

Actie: Downloadbutton

Label: {{Click URL}} - href van de anchor

 

Tag klikken op links die eindigen op .pdf/.xlsx of .docx

Tag: {{UA - Event - File download}}

Trigger: {{Event - klik op document}}

Variabele: {{Downloads - Click URL File Type}}

 

Toont in Analytics gedragsrapport:

Categorie: Downloads

Actie: {{Downloads - Click URL File Type}} - bestandstype

Label: {{Click URL}} - href van de anchor

 

6. Klikken op toplinks

Klikken op inloggen, zoeken of uitloggen.

Tag: {{UA - Toplinks}}

Trigger: {{Event - klik op toplinks}}*

Variabele: {{TopLinks - buttons}} - schrijft de originele waarde van element over

 

* trigger gaat af als het ID van het geklikte element begint met:

  • loginLink
  • searchLink
  • Blok_Header_profile_PopOut_Uitloggen_
  • logoutBtn
  • Uitloggen

Toont in Analytics gedragsrapport:

Categorie: Toplinks klikken

Actie: {{TopLinks - buttons}} - oftewel, overgeschreven waarde.

 

7. Ledenzoeker

Vier mogelijke situaties:

Niet-gebruikt

Geen gebruik / interactie met de Ledenzoeker.

Gebruikt - niet afgemaakt

Wel interactie plaatsgevonden maar geen search uitgevoerd.

Gebruikt - search

Interactie plaatsgevonden en klik op de search button.

Gebruikt - advanced search

Interactie plaatsgevonden en klik op de advanced search button.

2 tags nodig om bovenstaande te monitoren: CU - Ledenzoeker (deze tag configureert onder welke omstandigheden de dataLayer moet worden getriggerd), UA - Ledenzoeker (deze tag pusht waardes naar Google Analytics op basis van voorwaarden uit de CU - Ledenzoeker). Voor er waardes in GA worden getoond moeten beide tags zijn afgegaan.

Werking CU - Ledenzoeker

Function pushDataLayer()

Configureert wat er de dataLayer in moet worden gepusht.

window.onbeforeunload = function()

Functie die wordt getriggerd als de pagina wordt afgesloten, klik naar nieuwe pagina of refresh button is getriggerd.

onclick = function()

Klikken op normale of advanced search buttons verhinderen de window.onbeforeunload functie en pushen waardes in de dataLayer.

For loop

Selecteert alle child elementen van de variabele formSelector en kent een eventListener ‘change’ toe.

History array

Waardes in de history array zijn de classnames van de verandere elementen die een child zijn van de formSelector. Deze waarde komt terug in GA gebeurtenissenrapport als label.

Werking UA - Ledenzoeker

Deze tag gaat af zodra het event ledenZoeker (afkomstig uit CU - Ledenzoeker) plaatsvind. Pusht vervolgens de waarde van de variabele zoals gedefinieerd in CU - Ledenzoeker naar Google Analytics.

Variabele: {{Ledenzoeker - eventCategory}}, {{Ledenzoeker - eventAction}}, {{Ledenzoeker - eventValue}}. Al deze dataLayer variabelen worden gevuld door CU - Ledenzoeker.

 

 

 

Blogposts

Blogposts voor BI Professionals

Loading...

Geen resultaten gevonden