Google Tag Manager – Del 2: event tracking med kod

Johan Nyberg

Google Tag Manager är helt klart ett steg i rätt riktning. Förutom att du samlar alla dina spårningsskript på ett ställe, så kan du även skapa regler inuti GTM för att spåra händelser.

Det är relativt enkelt att sätta upp en regel för att spåra samtliga länkar som leder ut från webbplatsen. Eller att spåra nedladdningar av pdf-filer. Men i vissa fall kan det vara mer tidseffektivt att sätta upp spårningen direkt i koden.

Du kan läsa mer om grunderna i Google Tag Manager i vår första post Google Tag Manager – Del 1: Intro och Auto-Event Tracking.

Men innan vi går in på hur du spårar händelser med hjälp av kod i Google Tag Manager, så kan det vara av värde att prata om vad du generellt ska tänka på när du börjar spåra händelser.

Event tracking (händelsespårning) – best practice

Vi stöter ofta på Google Analytics-implementationer där kunden inte har satt upp event tracking korrekt. Du har själv friheten att skicka in vilka värden du vill, och ibland kan den här friheten leda till kaos.

Så låt oss först titta på vad Google rekommenderar att du gör. Du kan hitta Googles rekommendationer här, men jag har sammanfattat dem nedan.

Category (textsträng, obligatorisk) – det objekt användaren interagerar med, t.ex. ’button’.

Action (textsträng, obligatorisk) – typ av interaktion, t.ex. ’click’.

Label (textsträng) – namnet på din händelse.

Value (numerisk) – får inte vara ett negativt värde. Går ibland att använda, men begränsat eftersom den är numerisk.

Men jag använder det här lite mer pragmatiskt. Category för att samla ihop saker, t.ex. ett klick på en Facebook-knapp skulle jag sätta som ‘social’, och sen ‘facebook’ som Label.

Det viktiga är bara att du sätter upp någon form av struktur, så att det finns en röd tråd i hur du spårar.

Sen bygger du en Custom Report i Analytics, där du bryter ner vad dina besökare klickar på. Men det är en helt annan bloggpost.

Låt oss nu gå vidare och se på hur du spårar händelser i de tre olika smakerna av Google Analytics: gamla versionen, Universal Analytics, respektive Google Tag Manager.

Event tracking i Google Analytics modell äldre

I den äldre versionen av Google Analytics, ser event tracking ut så här:

_gaq.push(['_trackEvent', category, action, label, value]);

Det skulle kunna se ut så här:

_gaq.push(['_trackEvent', ‘social’, ‘click’, ‘facebook’]);

Event tracking i Universal Analytics

I Universal Analytics är konceptet det samma, det är bara koden som ser lite annorlunda ut:

ga('send', 'event', ‘social’, 'click', 'facebook');

Event tracking i Google Tag Manager

I Google Tag Manager har händelsespårningen abstraherats. Nu använder man dataLayer.push för att skjuta in värden i datalagret.

Du namnger de värden som du skickar in till vad du vill. Jag har i mitt exempel valt att kall dom för event, eventCategory, eventAction och eventLabel.

Ett exempel på en händelsespårning skulle kunna se ut så här:

  dataLayer.push({
    'event': 'GAevent',
    'eventCategory': ‘social’,
    'eventAction': ‘click’,
    'eventLabel': 'facebook'
  });

En implementation av detta skulle kunna se ut så här:

<a id=”facebook” href="#" 
onClick="dataLayer.push({'event': 'GAevent', 'eventCategory': 'social',
'eventAction': 'click', 'eventLabel': 'facebook'});”>

MEN.. jag rekommenderar dig att inte skriva in spårnings-koden direkt i din html, en mycket bättre lösning är att separera det i en javascript-fil där du använder jQuery för att implementera event tracking. Prata med dina utvecklare, så löser dom det åt dig.

Ett bättre exempel på ovanstående skulle se ut så här i jQuery:

$('#facebook').on(‘click’, function () {
  dataLayer.push({
    'event':'GAevent',
    'eventCategory': 'social',
    'eventAction': 'click',
    'eventLabel': 'facebook'
  });
});

Implementering i Google Tag Manager

När du satt upp koden för det du vill spåra, så är det dags att gå in i Google Tag Manager.

Skapa macron

Det första du måste göra är att skapa ett macro för själva eventet. Du döper macrot till ‘event’ och väljer ‘Custom Event’ som typ. Det här är ett generiskt macro som kommer att fånga upp alla typer av event. Det är först i regeln som vi kollar att händelsen heter GAEvent.

Skapa macrot 'event' som ett Custom Event

Skapa macrot ’event’ som ett Custom Event

Därefter skapar du macron för eventAction, eventCategory och eventLabel och väljer då typen ‘Data Layer Variable’. Vi får då tillgång till värdena inuti Google Tag Manager. Sätt Macro Name och Data Layer Variable Name till samma sak (dvs eventAction, eventCategory respektive eventLabel).

Skapa macron för eventCategory, eventAction och eventLabel som typen Data Layer Variable

Skapa macron för eventCategory, eventAction och eventLabel som typen Data Layer Variable

Skapa en Rule

Därefter skapar du en Rule i Google Tag Manager som du döper till GAEvent. Du väljer själv vad du döper alla saker till, men jag namnger allt så det stämmer överens med kodexemplet ovan. I regeln så väljer du som condition {{event}} equals GAEvent.

Skapa regeln 'GAEvent'

Skapa regeln ’GAEvent’

Nästan framme.. håll ut 🙂

Skapa en Event Tag

Nu har vi kommit fram till Event Tag. Om du hängt med från del 1 så vet du att det är här allt sätts ihop och magin sker. Döp din Tag till ‘Event Tag’ eller vad du vill. Sedan anger du Tag Type till Universal Analytics (eller Google Analytics, om du sitter kvar i gamla). Du matar in ditt Tracking ID (om du inte redan gjort ett macro av det, då väljer du det).

Under Event Tracking Parameters väljer du de macron du precis skapade. Och som Firing Rule så väljer du den regel du precis skapade: GAEvent.

Skapa en Tag som du döper till 'Event Tag'

Skapa en Tag som du döper till ’Event Tag’

Så! Nu kommer dina händelser att trilla in i Google Analytics.

Google Tag Manager är inte en promenad i parken, den har definitivt en tröskel för att komma in i, men jag hoppas att jag med den här bloggposten har gjort din resa lite lättare.

Hur använder du event tracking på din sajt eller i din app för att mäta vad dina besökare gör?

Skriv gärna en kommentar och berätta.

Läs även