Google Tag Manager – Del 1: Intro och Auto-Event Tracking

Johan Nyberg

I den här första delen av Google Tag Manager så lär du dig grunderna: hur du skapar ett konto och installerar Google Analytics. Sen går jag vidare och visar hur du sätter upp automatisk spårning av händelser på din sajt – något du var tuvngen att göra manuellt förut.

Innan Google Tag Manager så var vi tvugna att lägga in spårningsskript på varenda länk på sajten som vi ville mäta klickfrekvensen på. Den absolut största styrkan med Google Tag Manager är att du kan sätta upp automatisk spårning för en uppsjö olika saker, sidvisningar, länkklick, eller klick på vilka element som helst på sidan. Och med olika smarta regler så kan du gruppera specifika händelser, t.ex. alla pdf-nedladdningar eller alla klick ut från din sajt.

Google Tag Manager innebär även ett annat steg framåt: du samlar alla spårningsskript på ett ställe, och behöver bara inkludera ett skript på din webbplats – Google Tag Manager-skripet. Sen kan du lägga till och ta bort så många skript du vill inuti Google Tag Manager utan behöva blanda in IT.

Men i och med Google Tag Manager så sker händelsespårning på ett helt nytt sätt. Jag blir rätt förundrad över att Google påstår att Google Tag Manager gör det enklare för marknadsfolk och andra utan kodvana att ta kontroll över mätningen på webbplatsen utan att behöva blanda in IT. Om jag ska vara helt ärlig så ville jag kasta ut datorn genom fönstret ett antal gånger när jag skulle försöka sätta mig in i det. Men när jag väl förstått hur allt hänger ihop så måste jag erkänna att Google Tag Manager är väldigt kraftfullt och flexibelt.

Komma igång

I mina exempel kommer jag att använda Fakturabörsen, en kund som använder Google Tag Manager och som jag arbetar med just nu.

Det första du ska göra när du loggat in är att sätta upp ett Account Name. Skriv in ditt företags namn. Du kan skapa flera konton. Om du jobbar mot kund, så skapar du ett konto för varje kund.

Sätta upp Google Tag Manager - skapa konto

Nästa steg är att skapa en container. För det mesta har du bara en container, men i vissa fall kan du ha flera. Exempel på det är om du t.ex. har en webbsajt och en mobilapp, då har du två olika containers. Döp containern till vad du vill, jag döpte åter igen min till Fakturabörsen (men jag hade kunnat döpa den till t.ex. fakturaborsen.se). Du väljer också om din container är för en webbplats eller en mobilapp. Fyll i webbadressen och godkänn villkoren.

Sätta upp Google Tag Manager - skapa container

Nu har du skapat ditt konto och din container kommer du till en sida där du får spårningsskriptet som ska läggas in på alla sidor.

Det ska in  direkt efter <body>-taggen. Om du jobbar i ett CMS (publiceringsverktyg), som t.ex. WordPress, prata med ditt utvecklingsteam om hur ni gör för att få in den här kodsnutten på alla sidor. Vad man gör är att lägga in skriptet i den sidmall som används av samtliga sidor på sajten, så att man inte behöver lägga in det manuellt varje gång man skapar en ny sida.

På den här sidan där du får spårningsskriptet kan du också börja lägga in din första Tag. En Tag i det här fallet är något som du vill spåra. Det du alltid måste ha är Google Analytics, så klicka på den.

På den här sidan har jag döpt min Tag till Universal Analytics, eftersom Fakturabörsen använder den nya versionen av GA. Välj Google Analytics eller Universal Analytics i drop-downen beroende på vad du kör.

Fyll i ditt tracking-id. Det hittar du i Google Analytics. Det börjar på UA- och sen några siffror. I Track Type väljer du Page, och sen klickar du på knappen Add Rule to Fire Tag. Där kryssar du för All Pages, som är den enda regel som går att välja just nu (vi kommer att skapa en till snart). Och voilá, du har precis lagt in GA-tracking för hela din sajt.

Sätta upp Google Tag Manager - skapa en tag

Fast jag ljög lite.. Koden har inte gått live på din sajt än. Ser du i menyn ute till vänster att det står något som heter Versions? För varje ändring du gör inne i Google Tag Manager så måste du publicera en ny version. Kolla på bilden nedan, du ska klicka på knappen längst upp till höger som det står Create Version på. När du gjort det så ändras knapptexten till Publish. Klicka igen – nu har ändringarna gått live. Det fina med det här är att du alltid kan gå tillbaka till tidigare versioner om du lyckas klanta till saker.

Sätta upp Google Tag Manager - lista över taggar

Skapa automatisk spårning

Ok, i början av den här bloggposten så lovade jag att jag skulle demonstrera styrkan hos Google Tag Manager – möjligheten att skapa automatisk spårning. Vi har kommit dit nu.

Steg 1: skapa en Tag som registrerar alla länkklick

Det första vi gör är att skapa en ny Tag som registrerar alla länkklick på samtliga sidor. Ser du den lilla mini-menyn på toppen av sidan med en höger-pil, två runda ringar och en lego-kloss? Här skapar du taggar, regler och macron. Klicka på knappen med höger-pilen på för att skapa en ny Tag.

Döp den till ”Register all link clicks” eller ngt liknande. I nästa drop-down väljer du Event Listener -> Link Click Listener. Och under Firing Rules så väljer du All Pages igen.

Sätta upp Google Tag Manager - spåra länkklick

Ok, nu har vi en Tag som registrerar länkklick på samtliga sidor.

Steg 2: skapa ett macro

Nu ska vi skapa vårt första Macro. Ett macro är en behållare som håller ett värde av något slag, antingen ett statiskt värde – jag har t.ex. skapat ett macro som innhåller Fakturabörsens UA-kod (jag kan då infoga {{namnet-pa-macrot}} istället för UA-koden). Eller så kan ett macro fånga upp ett värde från webbplatsen.

Vi ska nu skapa ett macro som fångar upp URL:en i länken som besökaren klickar på.

Klicka på lego-klossen i mini-menyn. Döp macrot till ”Auto Event URL”, under Macro Type, välj Auto-Event Variable och under Variable Type välj Element URL.

Sätta upp Google Tag Manager - skapa macro

Håll ut, vi är snart där… Som jag sa i början – det är en relativt hög tröskel att komma in i det här.

Steg 3: skapa en Tag som registrerar alla klick ut från webbplatsen

Vad vi ska göra nu är att skapa ytterligare en Google (eller Universal) Analytics-tag som istället för den förra som trackade alla klick, så ska den här enbart fånga upp klick ut från webbplatsen.

Döp taggen till ”Auto Event Click”, välj Google eller Universal Analytics som Tag Type, skriv in ditt Tracking ID (notera att jag använder mitt macro {{UA}}). För Track Type väljer du Event, i Category skriv ”Click” och i Action skriv ”Link” och för Label skriver du in macrot du precis skrev så här: {{Auto Event URL}} – du kan också välja den från listan genom att klicka på lego-klossen till höger.

Sätta upp Google Tag Manager - spåra klick ut från sajten

Steg 4: skapa en regel som triggar eventet

Nu kommer vi till den sista pusselbiten: klicka på knappen Add Rule to Fire Tag. Nu ska vi skapa en regel som triggas när ett visst villkor uppfylls. I vårt fall så vill vi att regeln ska kicka in när någon klickar på en länk som går ut från vår webbplats.

I nästa dialog väljer du alternativet Create new rule längst ner (se bild nedan).

Sätta upp Google Tag Manager - skapa regel

Nu ska vi skapa regeln. Döp regeln till t.ex. ”Outbound Link Click”. Lägg till två villkor (conditions): i den första väljer du event – contains – gtm.linkClick. Vi kan hämta upp värden dynamiskt på det här sättet, men jag tänker inte fördjupa mig i det här och nu. Kortfattat så innebär det att när någon klickar på en länk på en sida så triggas vår första Tag som vi skapade och den genererar objektet gtm.linkClick som vi sedan plockar upp här i nästa Tag.

I nästa condition väljer du Auto Event URL och does not contain, och sen skriver du ditt domännamn. I mitt fall skrev jag ”fakturaborsen”.

Sätta upp Google Tag Manager - översikt regel

Sådär, nu har vi skapat två taggar ett macro och en regel som arbetar tillsammans för att registrera alla länkklick ut från din sajt.

Felsökning

Några tips för att kolla om dina event triggas.

Tre Chrome-plugins som är bra att ha:

Event Tracking Tracker https://chrome.google.com/webstore/detail/event-tracking-tracker/npjkfahkbgoagkfpkidpjdemjjmmbcim

När du ändå är i Chrome Store så passa på att installera

Google Tag Assistant https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk, då ser du samtliga taggar som är installerade på sajten.

Google Analytics Debugger https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna. Om du slår på den så ser du alla events triggas live i konsolen (högerklicka på sidan i Chrome, välj Inspect Element i menyn längst ner och klicka på tabben längst till höger: Console).

Real-Time i Analytics

Välj Real-Time i Google Analytics och gå ner till Events. Nu kan du se dina events poppa upp live när du triggar dom på sidan. Om du inte ser dom, och dina event verkar funka som dom ska, så kan det bero på att det ligger ett filter inlagt i Analytics som filtrerar bort all trafik från ditt IP-nummer. Filter hittar du under Admin.

Events i Google Analytics i real time

Ok, nu har du fått en första introduktion till Google Tag Manager, och börjar antagligen få en uppfattning om hur kraftfullt det är.

I nästa del så kommer jag visa hur du kan trigga event från koden. I vissa fall är det smidigare att lägga in kod på sidan som skjuter iväg ett event när en besökare gör något inne på sidan.

Och du som inte har så mycket kodnings-erfarenhet, misströsta inte. Det är verkligen inte rocket-science, och det kommer inte vara så mycket kod som du behöver lägga in.

Läs vidare: Google Tag Manager – Del 2: event tracking med kod

Om du har några frågor, eller vill lämna feedback, skriv gärna en kommentar nedan.

Tags

Läs även

Conversionista is open for business in The Netherlands.
Conversionista is open for business in The Netherlands. Read more.