Voor en nadelen van Call Tracking met Google Tag Manager
In het doormeten van telefoongesprekken zijn een aantal bedrijven gespecialiseerd. Hierbij wordt er aan iedere bezoeker een uniek telefoonnummer getoond en dat is vervolgens terug te leiden naar de campagne bron en zelfs het zoekwoord in de Adwords campagnes. Hiermee kan het aantal telefoongesprekken en het resultaat daarvan worden doorgemeten van zowel online marketing activiteiten als offline activiteiten zoals tv en print. Omdat er aan iedere bezoeker een uniek nummer wordt getoond liggen de kosten hiervoor erg hoog. Zo hoog zelfs dat het voor veel bedrijven helemaal niet rendabel is om dit door te meten. Daarom hebben wij een vereenvoudigde manier ontwikkeld. Hierbij is het echter wel noodzakelijk dat het telefoongesprek wordt gedaan na een klik op een belknop op de website. Telefoongesprekken kunnen alleen doorgemeten worden wanneer de gebruiker een op een belkop of nummer op uw website klikt met een mobiel apparaat.
Voordelen:
- Geen maandelijkse kosten
- Volledig in Google Analytics en Google Adwords door te meten tot op zoekwoord niveau
- Gebruik altijd uw eigen telefoonnummer
Nadelen:
- Werkt alleen na klik op een belknop of telefoonnummer op de website na een bezoek via een mobiele telefoon op basis van gespreksduur
- Werkt niet bij Call Extensies
- Werkt niet bij telefoongesprekken via een ander apparaat.
- Er kunnen afwijkingen zijn in de daadwerkelijke gespreksduur omdat alleen de tijd wordt gemeten dat de telefoon app open is.
Wanneer u ook inzicht wilt hebben in telefonische conversies van andere media zoals offline media, dan bent u aangewezen op betaalde services.
Hoe werkt Call Tracking met hulp van Google Tag Manager
Om de gespreksduur van telefoongesprekken te meten maken wij gebruik van de Page Visibility API. Dit is een JavaScript functie die bijhoud of de website in beeld is op het apparaat of op de achtergrond draait. Simo Ahava heeft een artikel geschreven over het gebruik van de Page Visibility API in Google Tag Manager die wij gebruiken als basis voor het meten van gespreksduur. Wat de Page Visibility API doet, is bijhouden of de browser zichtbaar in beeld is op het scherm van de gebruiker of op de achtergrond draait. Steeds wanneer er iets veranderd in de zichtbaarheid van de website wordt er een DataLayer event geactiveerd. Het idee hierachter is dat, zodra er met een mobiele telefoon op een link met een telefoonnummer wordt geklikt, het apparaat overgaat naar de telefoon app. Hierdoor zal de browser naar de achtergrond verdwijnen en wordt er een een visibilityChange event geactiveerd. Na het einde van het telefoongesprek keert de bezoeker automatisch terug en wordt er weer een visibilityChange event geactiveerd. Wij bepalen vervolgens hoeveel tijd er is verstreken tussen die twee events en rapporteren dit terug naar Google Analytics als gesprekstijd. Een telefoonconversie baseren wij vervolgens op een minimale gesprekstijd. Bijvoorbeeld minimaal 1 of 2 minuten. Dit is erg van uw branche afhankelijk en kunt u wellicht het beste inschatten.
Aan de slag met de integratie van Call Tracking
Om Call Tracking in te stellen moeten wij een aantal dingen doen. Ik heb dit artikel in twee delen verdeelt. In het eerste deel plaatsen wij de code die noodzakelijk is voor deze functie en zorgen ervoor dat de data die wij nodig hebben om de gespreksduur te analyseren in de DataLayer komt te staan. In het tweede deel gaan wij deze data uit de DataLayer halen en rapporteren in Google Analytics.
Page Visibility API
De Page Visibility API is een enorm handige functie die gebruikt kan worden voor tal van doeleinden. Webdevelopers gebruiken dit veelal om bijvoorbeeld video’s te pauzeren wanneer deze op de achtergrond draaien. Servers kunnen hierdoor bijvoorbeeld ontlast worden. Deze functie werkt niet met IE 10 en ouder. Dat is op zich prima voor ons doel want praktisch alle mobiele telefoons gebruiken modernere browsers. Alleen oudere telefoons met browsers die sinds 2013 niet meer geupdate zijn, bieden geen ondersteuning. Voor het maken van deze functie moeten wij twee custom JS variabelen, een DataLayer variabel, een trigger en custom HTML tag aanmaken. Laten we beginnen met het eerste variabel. Dit is een JavaScript listner die we straks vanuit een andere functie gaan aanroepen. Maak een custom JS macro variabel aan en noem deze {{visibility prefix}} plaats hierin de volgende code.
function() {
var prefixes = ['moz', 'ms', 'o', 'webkit'];
if ('hidden' in document) {
return '';
}
// Loop through each prefix to see if it is supported.
for (var i = 0; i < prefixes.length; i++) {
var testPrefix = prefixes[i] + 'Hidden';
if (testPrefix in document) {
return prefixes[i];
}
}
return;
}function() {
switch ({{visibility prefix}}) {
case '':
return document['hidden'];
case 'moz':
return document['mozHidden'];
case 'o':
return document['oHidden'];
case 'webkit':
return document['webkitHidden'];
default:
return;
}
}<script>
var visiCount = 1;
if (typeof {{visibility prefix}} !== 'undefined') {
var visibilityEvent = {{visibility prefix}} + 'visibilitychange',
hiddenState = {{visibilityHidden}},
visibilityChanged = function() {
if (typeof hiddenState !== 'undifined') {
dataLayer.push({
'event' : 'visibilityChange',
'visibilityCount': visiCount++
});
}
};
// Attach visibility listener to document
document.addEventListener(visibilityEvent, visibilityChanged, false);
}
</script>Test de visibility functie
In de Preview & Debug Modus zou er een visibilityChange event geactiveerd moeten worden wanneer de website niet meer zichtbaar is en nog een event wanneer deze weer op het beeldscherm komt. Het variabele visibilityHidden zou op true moeten staan op het moment dat de website op de achtergrond draait en op false wanneer deze is geopend. Het variabele visibilityCount zou bij 1 moeten beginnen en hier moet steeds bij iedere visibilityChange event 1 bijgeteld worden. Als dit allemaal correct is ligt de basis van Call Tracking er en kan de volgende tag gemaakt worden.
Telefoonklik registreren en cookie plaatsen
Een klik op het telefoonnummer resulteert niet altijd in een telefoongesprek. De Android browser vraagt bijvoorbeeld eerst welke actie ondernomen moet worden. Bij klikken die per ongelijk zijn gedaan zal het visibilityChange event niet plaatsvinden en als deze wel plaatsvindt zal dit vast niet het resultaat zijn van een telefoongesprek zijn geweest. Omdat we niet kunnen zien welke actie voor het visibilityChange event zorgt moeten we dit toetsen. Een visibilityChange event zou direct of vrij direct na een telefoonklik moeten plaatsvinden. Hiervoor houden we een maximale termijn van 10 seconden aan. Na 10 seconden is de kans groot dat dit een andere oorzaak heeft. Deze validatie doen we met hulp van een cookie die na 10 seconden expireert. Maak een cookie variabele met de naam {{cookiePhoneClick}}. Naast de Cookie is het ook nodig gegevens klaar te zetten die straks nodig zijn voor validatie. Maak een extra DataLayer variabele aan en noem deze {{hiddenStateCheck}}. Om het verschil te kunnen berekenen moet deze variabele altijd een waarde hebben. Vink daarom het vakje “Standaardwaarde instellen” aan en vul hierbij 0 als waarde in. Belangrijk om te weten is dat Directe Cookies niet onder de beruchte cookiewet vallen. Dit zijn functionele bestanden die eigenlijk altijd geaccepteerd worden. Gebruikers kunnen dit soort Cookies nog wel verwijderen maar dat is geen probleem gezien deze toch na 10 seconden vervalt. Na het aanmaken van de cookie variabele moet deze nog ingesteld worden. Dat doen wij door middel van een Custom HTML tag met de volgende inhoud:
<script>
//set cookie
var cookieName = "cookiePhoneClick";
var cookieValue = 1;
var cookiePath = "/";
var expirationTime = 10000;
var date = new Date();
var dateTimeNow = date.getTime();
date.setTime(dateTimeNow + expirationTime);
var expirationTime = date.toUTCString();
document.cookie = cookieName+"="+cookieValue+"; expires="+expirationTime+"; path="+cookiePath;
//copy hiddenstate Datalayer in new Datalayer variable
var hiddenSta = {{visibilityCount}};
dataLayer.push({
'event': 'hiddenState',
'hiddenStateCheck': hiddenSta
});
</script>Trigger
De cookie willen we plaatsen op het moment dat iemand op een belknop druk. Daarom kunnen we hiervoor een redelijk standaard kliktrigger gebruiken die activeert op telefoonlinks. Stel hiervoor dus een klik trigger in en activeer deze alleen voor sommige links. Activeer deze vervolgens op “Click Element” bevat “tel:”. Hierdoor wordt de tag alleen voor klikken op links met een telefoonnummer geactiveerd.
Test of deze tag werkt
In de Preview & Debug Modus testen we vervolgens of de cookie geplaatst wordt. De cookie variabele zou een waarde van 1 moeten hebben zodra er op een link met een telefoonnummer geklikt wordt. Deze waarde zou na 10 seconden moeten zijn verdwenen. Klikken op andere links dan een link met een telefoonnummer zouden de tag niet activeren. Wanneer er nog geen visibilityChange events hebben plaatsgevonden zou de hiddenStateCheck een waarde moeten hebben van 0. Zijn er voor de telefoonklik wel visabilityChange events geweest dan moet de waarde gelijk zijn aan de visibilityCount.
Start van het telefoongesprek
Om de lengte van het telefoongesprek vast te stellen leggen we vast op welke tijd het telefoongesprek is begonnen en beëindigd en vergelijken het verschil. Voor deze tag moeten wij drie nieuwe variabele maken. Maak ten eerste twee DataLayer variabele aan met de naam {{callStartTime}} en {{callinProgress}}. Geef het callinProgress variabele ook een standaardwaarde en vul als waarde “false” in. Deze variabelen gaan we straks in de tag gebruiken. De tag willen wij slechts activeren bij het eerste visibilityChange event na de klik op de belknop. Met andere woorden moeten wij een variabele maken waarbij de waarde van de variabele visibilityCount en de hiddenStateCheck gelijk is aan 1. Hiervoor maken we een custom JavaScript macro variabele. Noem deze {{callStartValidation}} en plaats de volgende code:
function(){
var hiddenStateChecker = {{hiddenStateCheck}} + 1;
var startCallCounter = {{visibilityCount}};
if ( hiddenStateChecker == startCallCounter ) {
return true;
}
else {
return false;
}
}<script>
var startTime = Math.round(+new Date()/1000);
dataLayer.push({
'event' : 'callStart',
'callStartTime': startTime,
'callinProgress': true
});
</script>Trigger
Deze tag gaan we vervolgens activeren op het moment dat een telefoongesprek is gestart. Hiervoor stellen we een aantal voorwaarden. Maak hiervoor een trigger met als type een aangepaste gebeurtenis en stel deze in op visibilityChange. We willen deze tag echter slechts activeren bij de start van een telefoongesprek. Activeer de tag daarom alleen voor sommige gebeurtenissen. Hier gaan we drie voorwaarden instellen.
- cookiePhoneClick “is gelijk aan” 1
- visibilityHidden “is gelijk aan” true
- callStartValidation “is gelijk aan” true
Test of deze tag werkt
In de Preview & Debug Modus kunnen we kijken of de tag werkt. Controleer ten eerste de werking van de variabelen. {{callinProgress}} zou de waarde false moeten hebben tot het moment dat het telefoongesprek start. Op dat moment zou er ook een getal in {{callStartTime}} komen te staan. Dit zou een getal van 10 cijfers moeten zijn. De tag zou vervolgens alleen geactiveerd moeten worden als er binnen 10 seconden van een klik op de belknop ook een visibilityChange event plaatsvindt.
Einde van het telefoongesprek
Om de tag op het juiste moment te activeren is er nog een aanvullende validatie nodig. Maak hiervoor een custom JavaScript variabele met de volgende code en noem die {{callEndValidation}}.
function () {
var hiddendl = {{hiddenStateCheck}} + 2;
var klikdl = {{visibilityCount}};
if ( hiddendl == klikdl ) {
visiValidation = true;
}
else {
visiValidation = false;
}
return visiValidation;
}
<script>
var callTimeStart = {{callStartTime}};
var callTimeEnd = Math.round(+new Date()/1000) - callTimeStart;
dataLayer.push({
'event' : 'callEnd',
'callTime': callTimeEnd,
'callinProgress': false
});
</script>De trigger
Deze tag activeren wij vervolgens met een trigger op het “visibilityChange” event. Stel deze vervolgens in op sommige gebeurtenissen met de volgende voorwaarden:
- visibilityHidden “is gelijk aan” false
- callEndValidation “is gelijk aan” true
- callinProgress “is gelijk aan” true
Test of deze tag werkt
In de Preview & Debug Modus testen we vervolgens of de tag werkt. De tag zou alleen bij het einde van het telefoongesprek moeten plaatsvinden waarbij de totale gesprekstijd in seconden wordt opgeslagen in het {{callTime}} variabele. De waarde van het {{callinProgress}} variabele zou bij de start van een gesprek moeten veranderen in true en bij het eindigen weer in false.
Belstatistieken rapporteren in Google Analytics
Nu we alle gegevens die wij nodig hebben in de DataLayer klaar hebben gezet wordt het tijd om deze naar Google Analytics te sturen. Dit doen wij met hulp van gebeurtenissen en aangepaste statistieken. Vervolgens gaan wij Google Analytics zo instellen dat deze gegevens in een rapport duidelijk zijn.
Aangepaste statistieken in Google Analytics instellen
Voor het versturen van aangepaste statistieken naar Google Analytics is het nodig om instellingen in Analytics te veranderen en de trackingcode aan te passen. We zullen dit doen met hulp van Google Tag Manager. Het is echter erg aan te raden om deze aanpassingen eerst alleen in een testweergave te testen voordat deze in een live weergave gezet worden.
Instellingen in Google Analytics
In Google Analytics maken wij eerst de aangepaste statistieken aan. Dit kun je doen door te gaan naar Beheer Aangepaste definities Aangepaste statistieken. Hier gaan we twee statistieken toevoegen. Maak gebruik van de volgende instellingen:
Voor de duur van een telefoongesprek
- Naam: Telefoongesprek duur (of iets wat je logisch vindt)
- Bereik: Hit
- Opmaaktype: Tijd
- Minimumwaarde: 0
- Maximumwaarde mag je leeg laten
- Actief aanvinken
Voor het aantal telefoongesprekken:
- Naam: Telefoongesprekken (of iets wat je logisch vindt)
- Bereik: Hit
- Opmaaktype: Heel getal
- Minimumwaarde mag je leeg laten
- Maximumwaarde mag je leeg laten
- Actief aanvinken
Berekende statistiek instellen in Google Analytics
Als we niets doen wordt de totale gespreksduur van alle telefoontjes in Analytics bij elkaar opgeteld. Dit is niet heel bruikbaar. Gelukkig kunnen we met een berekende statistiek de gemiddelde gespreksduur berekenen in een aparte statistiek. Ga hiervoor in Analytics naar Beheer Weergave (van de test weergave) Berekende statistieken. Hier kun je een nieuwe berekende statistiek aanmaken. Geef deze een logische naam zoals gemiddelde gespreksduur. Selecteer “Tijd” als opmaaktype. Vervolgens kun je bij de formule de berekening invullen. Als je begint de typen vult Analytics alles automatisch aan. Gebruik vervolgens deze berekening: {{Telefoongesprek duur}}/{{Telefoongesprekken}}.
Gebeurtenissen naar Google Analytics sturen
De belstatistieken die nodig zijn voor Call Tracking willen wij nu naar Google Analytics sturen. De pageview tag die ik in dit artikel niet zal bespreken voldoet niet voor het dit doel. We willen namelijk informatie hebben over acties nadat de pagina geladen is. Dit doen we met gebeurtenissen. Met deze gebeurtenissen sturen we vervolgens de data van de aangepaste statistieken mee. We gaan gebeurtenissen instellen voor:
- Begin telefoongesprek
- Einde telefoongesprek
- Telefonische conversie
We sturen de aangepaste statistieken slechts in de daarvoor bestemde tags naar Analytics.
Gebeurtenis instellen voor start telefoongesprek
Om de statistieken over het aantal telefoongesprekken in Analytics te krijgen sturen wij een gebeurtenis bij de start van een telefoongesprek naar Analytics. Kopieer hiervoor de pageview tag. Hierdoor worden alle overige instellingen ook meegenomen. Stel de tag vervolgens in als gebeurtenis met de volgende instellingen:
- Categorie: telefoon
- Actie: begingesprek
Belangrijker dan de gebeurtenis zelf is dat we de aangepaste statistiek meezenden. Ga hiervoor naar het stukje met “Meer instellingen” en dan “Aangepaste statistieken” voeg hier een aangepaste statistiek toe. Je krijgt hier twee velden. In het linker veld vul je het indexnummer in van de aangepaste statistiek in. Dit is waarschijnlijk het getal 1. Controleer dit in de instellingen voor de aangepaste statistiek in je Analytics instellingen. In het rechterveld vul je in welke waarde de aangepaste statistiek in. Vul hier het getal 1 in. Dit zorgt ervoor dat er steeds 1 hit wordt geregistreerd wanneer de tag geactiveerd wordt. Het is belangrijk dat deze aangepaste statistiek alleen bij deze tag gebruikt wordt anders klopt het aantal telefoongesprekken en de gemiddelde gespreksduur niet. Deze tag activeren wij vervolgens met dezelfde trigger als de callStart tag
Gebeurtenis instellen voor einde telefoongesprek
Aan het einde van het telefoongesprek sturen we nogmaals een tag naar Analytics maar dan met informatie over de totale gespreksduur. Kopieer hiervoor de tag van het begin van het telefoongesprek en stel de gebeurtenis als volgt in:
- Categorie: telefoon
- Actie: eindegesprek
- Label {{callTime }} Sec.
In de gebeurtenis sturen we nu als label ook de gespreksduur mee. Dit kan handig zijn als referentie wanneer je meer inzicht wilt hebben over de lengte van afzonderlijke telefoongesprekken in plaats van de gemiddelde lengte. In de aangepaste statistiek willen wij vervolgens de totale gespreksduur weten. Plaats in het linkerveld het indexnummer van deze statistiek. Dit kun je wederom controleren in je Analytics instellingen onder aangepaste statistiek. Het rechterveld vullen we dynamisch vanuit de variabele. Vul hier {{callTime}} in.
Trigger
De volgorde waarop de tag’s worden uitgevoerd is erg belangrijk. We willen namelijk eerst het dataLayer push event met de gespreksduur uitvoeren voordat we de gebeurtenis naar Analytics sturen anders zal de gesprekstijd 0 zijn. Hier heb ik diverse diverse problemen mee ondervonden. Hiervoor kun je het beste een nieuwe trigger maken op basis van een aangepaste gebeurtenis. Stel hierbij “callEnd” in als aangepaste gebeurtenis. Laat deze activeren op sommige gebeurtenissen:
- callEndValidation “is gelijk aan” true
Gebeurtenis instellen voor de telefonische conversie
De telefonische conversie stel je in als conversie doel in Google Analytics op basis van een gebeurtenis. Bij deze vorm van call tracking doen we dat afhankelijk van een vooraf vastgestelde minimale gespreksduur. Een telefoongesprek van 20 seconden zal waarschijnlijk niet heel relevant zijn geweest terwijl een langer gesprek dat wel is. U zult dit op basis van uw ervaringen moeten inschatten. In de eerste maand is het waarschijnlijk verstandig om dit redelijk in te schatten en later te herbeoordelen alvorens het conversiedoel in de live weergave wordt geplaatst. Voor het maken van de conversie tag kunt u de tag voor het begin of einde van het telefoongesprek kopiëren. Het is belangrijk om hier wel de gegevens van de aangepaste statistieken weg te halen. Stel de gebeurtenis vervolgens in als volgt:
- Categorie: telefoon
- Actie: conversie
Maak een trigger op basis van een aangepaste gebeurtenis en stel deze tevens in op “callEnd”. Vervolgens willen we de tag alleen voor sommige gebeurtenissen activeren en maak daar twee voorwaarden:
- Stel in de eerste rij {{callEndValidation}} “is gelijk aan” true.
- In de tweede regel stellen we in wat de minimale gespreksduur (in seconden) moet zijn om als conversie gezien te worden. Stel hier in de eerste kolom in {{callTime}}. Gezien we de minimale tijd willen weten stellen we in het tweede veld “is groter dan of gelijk aan” en vervolgens de minimale duur in seconden in de laatste kolom.
Als je deze tag gaat testen zou dus alleen een gebeurtenis naar Analytics gestuurd worden wanneer er een telefoongesprek heeft plaatsgevonden wat lang genoeg was.
Aangepaste rapporten instellen in Google Analytics
Nu alle data door Analytics verzameld wordt is het zaak om alles eerst goed te testen. Doe dit daarom voorlopig in een testweergave. We kunnen alle data vervolgens in een aangepast rapport of dashboard zetten. Ten eerste zullen we de telefonische conversie als conversiedoel in moeten stellen. Maak hierbij een conversie doel op basis van een gebeurtenis met bovenstaande gegevens. Vervolgens kunnen we het aangepaste rapport maken. Ga hiervoor naar Aanpassingen Aangepaste rapporten en maak een nieuwe. Maak hierbij vervolgens onderscheid zodat zichtbaar is welke pagina, campagne bronnen, geografische regio’s e.d. verantwoordelijk waren voor de telefoongesprekken. Stel vervolgens onder statistiek de aangepaste statistiek aantal gesprekken in, de gemiddelde gespreksduur en het aantal behaalde doelen of conversiepercentage van de telefoonconversie. Zorg er wel voor dat je de berekende statistiek selecteert voor de gemiddelde duur in plaats van de totale gespreksduur anders krijg je vreemde waarden.
Livegang van de call tracking
Ik adviseer om zeker een maand te testen of alles goed werkt. Er kunnen in deze integratie veel zaken fout gaan dus weet zeker dat alles goed staat ingesteld voordat je overgaat naar de live versie. Hierbij zul je in de live weergave opnieuw de berekende statistieken moeten zetten en het conversie doel uit de test weergave kopiëren. Eventueel kunnen extra variabelen aangemaakt worden en ingesteld als voorwaarde in de triggers die de gebeurtenissen activeren. Bijvoorbeeld tag’s die controleren of de klik en het visibilityChange event wel van een mobiele telefoon afkomen of een tag die controleert of het telefoongesprek tijdens kantooruren plaatsvond. Hiervoor kunnen custom JavaScript macro variabelen ingesteld worden. Dit gaat echter wat buiten de lijnen van dit artikel.
Integratie in Google Adwords
Om het conversiedoel inclusief alle bijhorende tracking in Google Adwords te zetten is het makkelijkste als Analytics en Adwords zijn gekoppeld. Als dit gedaan is kan vanuit Adwords onder Hulpprogramma’s Conversies de conversieactie worden geïmporteerd. . Gebruik je liever een Adwords tag dan kun je vanuit Google Tag Manager een conversie tag voor Adwords triggeren. Maak dan in Adwords een conversie aan op basis van een website actie en niet een telefoongesprek. Dit laatste werkt namelijk met een doorschakelnummer van Google en die zijn niet in Nederland beschikbaar en dat is nou precies de reden dat we deze vorm van call tracking hebben gemaakt.
