Vanuit Envoker stoppen we veel tijd in kennisontwikkeling voor iedere marketeer en dus het bedrijf. Onderdeel van kennis vergroten, is het lezen van andere marketeers hun bevindingen/ uitvindingen/ testen. Zo heb ik een paar weken geleden de YouTube video “How To Track The Initial Traffic Source with GTM (feat. Julius Fed from AnalyticsMania)” gevonden. Om beter te begrijpen wat het doet en wat ik er mee kan, heb ik het nagebouwd voor onze Envoker site en uiteindelijk een kleine verbetering aangebracht.

 

Initial Source in een notendop

Het is een Google Tag Manager implementatie die middels een cookie op gebruikers-level onthoudt wat het eerste kanaal was waarmee de gebruiker voor het eerst op je website kwam.

Met een custom JS wordt de cookie geschreven, de cookie wordt uitgelezen en omgezet in een aangepaste dimensie in je Analytics account.

 

Initial Source in Google Analytics rapporten

Hier zie je een voorbeeld van hoe de aangepaste dimensie terug kan komen bij je standaard rapporten. De ‘Initial source / medium’ is de aangepaste dimensie in dit voorbeeld.

envoker-voorbeeld-facebook-campagne

 

Afbeelding: data uit aangepaste dimensie ‘Initial source’ rechts naast de standaard ‘bron / medium’ in Google Analytics.

 

Wat kan ik 'extra' doen dankzij Initial Source data?

Het biedt je een nieuwe manier / dimensie om je data mee te analyseren. Er is al lange tijd een ‘ondersteunde conversies’ rapport onder de Google Analytics tab ‘Conversies > multi-channel trechters’ die je laat zien welk kanaal een grote assisterende bijdrage heeft gehad in de conversies en/of leads. Dit is gebaseerd op een interactie ergens in het pad, behalve de laatste. Ook is deze weergave er voor ‘eerste interactie conversies’. Echter kun je dit niet over andere rapporten heen leggen. Omdat de ‘Initial source' een aangepaste dimensie is, kun je deze nu met alle rapporten combineren.

voorbeeld geassisteerde conversies

Afbeelding: data uit de standaard ‘ondersteunde conversies’ rapportage in Google Analytics.

 

Initial source inrichten

De volledige en originele implementatie, buiten de mijn eigen toevoeging aan het einde, is in deze YouTube video terug te vinden: “How To Track The Initial Traffic Source with GTM (feat. Julius Fed from AnalyticsMania)”

Wanneer je de het liever vanuit een blog post over neemt kun je de stappen hieronder volgen. Wel heb ik in deze blog een extra stap toegevoegd (stap 7) die niet in de video zit, maar wat mij betreft onmisbaar voor deze implementatie:

 

Stap 1 - cHTML tag op alle pagina's

Je maakt een nieuwe ‘Custom HTML Tag’ aan in je Google Tag Manager account.

In mijn geval is deze genaamd “cHTML - set initial traffic source"

Hierin plaats je de code die hier aangeboden wordt: “https://gist.github.com/measureschool/47a5ec08dff86ca117196abf5ce746f4”

Dit is niet een code beheerd of geschreven door Envoker.

De trigger gaat voor nu op alle pagina’s.

initialsource gtm stap 1

Afbeelding: cHTML tag aanmaken met custom Javascript van github.com.

 

Activeer de preview modus voor Google Tag Manager en refresh je website.

Je ziet hier dat je cHTML tag afgevuurd wordt zoals in screenshot van de Envoker site in onderstaande afbeelding.

Ga vervolgens naar de Chrome instellingen zoals ook in onderstaande afbeelding te zien is en selecteer ‘Hulpprogramma’s voor ontwikkelaars’. Er komt dan een extra kader onderin je Chrome browser zoals te zien in onderstaande afbeelding.

In de Hulpprogramma’s voor ontwikkelaars ga je naar ‘Appication’ aan de bovenkant.

Dan aan de linkerkant onder ’Storage’ ga je naar ‘Cookies’ en selecteer je die van je eigen domein.

Zoek vervolgens naar de ‘initialTrafficSource’. Hier zul je zien dat de waarde ervan gevuld is met bron en medium.

De derde value is voor het zoekwoord. Deze werkt niet correct en gebruik ik zelf ook niet in de analyses.

Alle bovengenoemde stappen zijn terug te vinden in onderstaande afbeelding.

initialsource gtm stap 1a

Afbeelding: cookie controleren met de developer tools van Chrome.

 

Stap 2 - Custom cookie variabele ‘initialTrafficSource’ aanmaken

Je maakt een nieuwe ‘custom variable’ aan in je Google Tag Manager account. 

In mijn geval is deze genaamd “Cookie - initialTrafficSource”

Als je de preview modus ververst zul je in de variabele tab zien dat de cookie de bron/ medium waarde uit de custom HTML tag overneemt.

initialsource gtm stap 2a

Afbeelding: aanmaken van de cookie variabele.

 

initialsource gtm stap 2

Afbeelding: inrichten van de cookie variabele.

 

initialsource gtm stap 2b

Afbeelding: controleren van de cookie variabele

 

Stap 3 - Aangepaste dimensie aanmaken in Google Analytics

Je maakt voor nu één nieuwe ‘custom dimensie’ aan in je Google Analytics account.

Dit kan onder de ‘Admin’ settings > ‘Custom Definitions’ > ‘Custom dimensies’ > button ‘+new custom dimension'

De stappen vind je in onderstaande afbeelding ook terug.

initialsource gtm stap 3

Afbeelding: aangepaste dimensies in Analytics.

 

Er opent een nieuw scherm waarin je de volgende zaken instelt:

Benaming zoals die in je Analytics terug gaat komen. In mijn geval “Initial source / medium full”.

Scope zet je op ‘user’ omdat we de initiële bron op gebruiker-level willen koppelen en de cookie waarde dus gelijk blijft op sessie en hit level.

Vinkje voor ‘actief’ staat automatisch aan en laat je aan.

Aan de rechterkant zie je het nummer van je aangepaste dimensie. In dit voorbeeld is het ‘dimension1’, dus nummer 1. 

Dit dimensie nummer hebben we in de volgende stap nodig.

Opslaan en je bent voor nu klaar in deze instellingen.

Hieronder zie je hoe het er uit komt te zien:

initialsource gtm stap 3a

Afbeelding: aanmaken van aangepaste dimensies in Analytics.

 

Stap 4 - Aangepaste dimensie koppelen in Google Tag Manager

In je standaard tag voor de Google Analytics tracking koppel je vervolgens de aangepaste dimensie.

Dit vind je in die standaar Analytics tag onder de extra instellingen zoals je ziet in onderstaand voorbeeld.

Door deze te koppelen zal vanaf dat moment de data gaan verschijnen in je Analytics account.

De matching tussen Google Tag Manager en Analytics wordt gemaakt aan de hand van het dimensie nummer uit de vorige stap.

 

Index is het dimensie nummer, dus 1.

'Dimension Value' is de dynamische waarde die de cookie uit stap 2 uitleest.

initialsource gtm stap 4

Afbeelding: aangepaste dimensie toevoegen aan de standaard Analytics tag

 

Stap 5 - Cookie voor de Analytics tag afvuren

Om te zorgen dat we de nieuwe waardes altijd in Analytics krijgen, willen we in Google Tag Manager inregelen dat de cookie gezet wordt voordat de Analytics pageview tag afvuurt.

 

Dit doe je terug in de standaard tag voor de Google Analytics tracking onder de extra instellingen in die tag.

Kies onder ’Tag sequencing’ de ‘Fire tag before Universal Analytics fires’ met de CHTML tag geselecteerd.

Zorg ervoor dat de ‘Don't fire Universal Analytics if cHTML - set initial traffic source fails or is paused’ niet is aangevinkt. Deze aanvinken kan ervoor zorgen dat je Analytics tracking er een keer mee stopt.

Als je dit hebt ingesteld, ziet het er uit zoals in onderstaande afbeelding:

initialsource gtm stap 5

Afbeelding: 'tag sequencing' aanpassen op standaard Analytics tag.

 

Omdat we hier de cHTML tag voor die van de Analytics pageview zetten, kunnen we de trigger voor ‘Alle pagina’s’ verwijderen op de cHTML tag.

Nu ziet de cHTML tag uit stap 1 er zo uit:

initialsource gtm stap 5a

Afbeelding: cHTML tag met trigger nu.

 

Verwijder de trigger en sla de tag opnieuw op en je hebt enkel nog de laatste stap van testen.

initialsource gtm stap 5b

Afbeelding: cHTML tag met trigger verwijderd.

 

Stap 6 - Testen van de Initial Source implementatie

We volgen weer dezelfde stappen als in stap 1:

Ga naar de Chrome instellingen zoals ook in onderstaande afbeelding te zien is en selecteer ‘Hulpprogramma’s voor ontwikkelaars’. Er komt dan een extra kader onderin je Chrome browser zoals te zien in onderstaande afbeelding.

 

In de Hulpprogramma’s voor ontwikkelaars ga je naar ‘Appication’ aan de bovenkant.

Dan aan de linkerkant onder ’Storage’ ga je naar ‘Cookies’ en selecteer je die van je eigen domein.

Zoek vervolgens naar de ‘initialTrafficSource’ en delete de cookie door op ‘delete’ op je toetsenbord te drukken.

initialsource-gtm

Afbeelding: initialTrafficSource cookie verwijderen in Chrome

 

Open de Chrome plugin “Tag assistant (by Google)” zoals in onderstaande afbeelding te zien is.

Heb je deze nog niet, dan kun je die hier installeren: https://chrome.google.com/webstore/detail/tag-assistant-by-google/

Je ziet in deze Tag assistant plugin alle Google codes die aangeroepen, ingeschoten en doorgestuurd worden naar Google op je domein.

 

Ververs de pagina om de controle te starten.

 

Zoals je in onderstaande afbeelding ziet:

Wordt de cHTML tag afgevuurd.

Wordt de initialTrafficSource cookie gevuld met de juiste data.

 

Open Tag assistant, klik op je UA code en vervolgens op de tab “custom metrics”. Hier zie je de aangepaste data die je naar je Analytics account pusht. Als je de stappen correct hebt overlopen krijg je de waarde te zien zoals in het voorbeeld van de Envoker site hieronder in ‘Custom Dimension 1’. Je ziet hier ook een ‘Custom Dimension 2’ terug komen, dit brengt ons naar de laatste stap die ik zelf heb toegevoegd.

initialsource gtm stap 6

Afbeelding: aangepaste dimensie push controleren met Tag assistant

 

Stap 7 - RegEx LookUp table variabele in Google Tag Manager

Omdat het originele script dat je gebruikt in deze implementatie geen schone waardes terug geeft aan de cookie, wil je die opschonen voor analyse-gemak. Hiervoor heb ik een RegEx lookup tabel gebruikt die in de variabele van Google Tag Manager zit.

 

Wanneer je deze stap toevoegt zul je zien dat de originele (links in afbeelding) een stuk minder fijn leest dan de opgeschoonde versie (rechts in afbeelding):

initialsource gtm stap 7

Afbeelding: opschonen van de output in een extra dimensie

 

De stappen zijn eenvoudig:

Ga naar de variables in Google Tag Manager aan de linker kant.

Klik op ’New’ onder de ‘User-Defined Variables'

initialsource gtm stap 7b

Afbeelding: een nieuwe variabele aanmaken in Google Tag Manager

 

Vervolgens kies je als ‘Variable Type’ de ‘RegEx Table’.

In mijn geval heb ik deze variabele de naam 'loopUp-initialSourceMedium’ gegeven.

Als ‘Input Variable’ pakken we de ‘cookie variabele’ die we gemaakt hebben in stap 2.

 

Omdat het een RegEx tabel is heb ik er een regex code voor geschreven die je als ‘Pattern’ veld kunt gebruiken. In dat ‘Pattern’ veld definieer je de twee woorden die in de cookie variabele herkend moet worden. Vervolgens zet je in de ‘Output’ de schone versie van ‘bron / medium’ zoals je die gewend bent.

 

Hier de platte codes voor de bron / medium die ik in dit voorbeeld gebruikt heb:

 

^(?=.*\bgoogle\b)(?=.*\borganic\b).*$

^(?=.*\bgoogle\b)(?=.*\bcpc\b).*$

^(?=.*\bbing\b)(?=.*\borganic\b).*$

^(?=.*\bdirect\b)(?=.*\bnone\b).*$

^(?=.*\blinkedin\b)(?=.*\bsocial\b).*$

^(?=.*\bfacebook\b)(?=.*\bsocial\b).*$

^(?=.*\bfacebook\b)(?=.*\bcpc\b).*$

initialsource gtm stap 7a

Afbeelding: aanmaken en opbouwen van de ‘RegEx Table’

 

Wanneer je de loopUp-initialSourceMedium variabele opgeslagen hebt, koppel je in je standaard tag voor de Google Analytics tracking vervolgens de aangepaste dimensie zoals ook gedaan in stap 3 en 4. Je bent vrij deze dimensies in Analytics te benoemen zoals je wenst. Ik heb de volgende benamingen gebruikt zoals ook te zien in de afbeelding van stap 3:

Initial source / medium full (voor de originele vervuilde)

Initial source / medium (voor de opgeschoonde variant van stap 7)

Je houdt beide aangepaste dimensies in je Analytics profiel omdat je regelmatig nieuw gevonden bron / medium combinaties wilt toevoegen aan je lookup tabel.