Case: Estrid
Spårnings-
implementering

Projektdetaljer

Detta Case är på eget initiativ utöver studier tillsammans med Gabriella Berkowicz och Maja Hall och ej ett samarbete med Estrid.

På en yrkeshögskola ligger stort ansvar på dig själv i hur mycket du faktiskt lär dig i ett ämne och just det är bakgrunden till det här; att fördjupa kunskaperna i Google Tag manager och spårningsimplementering på riktiga sidor. Caset är gjort med hjälp av Digodat GTM Injector som gör att du kan använda din egen GTM för att göra en mock up – spårning på en sida vars tag manager och analytics du inte har tillgång till. Självklart är det bara du själv som kan se det och du har inte tillgång till någon faktisk data men det ger dig en chans att se hur du praktiskt sätter upp spårning på en större webbplats.

Nedan kan du se de tagar vi har valt att sätta upp på sidan. Om du vill veta mer om varför och hur för en viss tag (the nerd stuff) kan du fälla ut mer information. Vår utgångspunkt har varit de mål vi tror att sidan har och de konverteringar vi bedömer är viktigast att mäta.

Grunden

GA Event - Scrolldjup på startsidan
Startsidan är uppbyggd med flera sektioner med information om Estrid och efter var sektion en get started – knapp. Denna sida är intressant att mäta scrolldjup på för att se hur stor del av innehållet besökaren tar del av.
    Vi satte upp ett GA-event med trigger på de scrolldjup som motsvarar de olika sektionerna och som endast går av på startsidan.
GA Event - Klick på get started-knapparna
För samma sida ville vi spåra vilken av knapparna som genererade mest klick eftersom 5 knappar på den sidan leder till samma sida och på så sätt förstå vilket innehåll som driver besökarna till handling.
    För att kunna skilja på knaparna som ser likadana ut och har samma klasser och namn fick vi leta i sidans källkod. Här hittade vi ett element-attribut för knappen, ”data-event-name”, som var unikt för var knapp. Med hjälp av en auto event-variabel för element attribute kunde vi hämta in den informationen i ett GA Event och skicka som label in i analytics.

När vi skulle göra motsvarande spårning på get started-knapparna på de andra sidorna (produktsidan och how it works-sidan) kunde vi inte hitta något i koden som särskiljde knapparna. Lösningen för how it works- sidan var att hitta ett sätt att plocka klick-elementets förälders, första barns textinnehåll(h2:ans innehåll) för att på så sätt kunna se titeln som står innan respektive knapp i google analytics och ändå på ett städat sätt kunna förstå datan som kommer in. Det gjorde vi via en datalager-variabel.

GA Event - Klick mellan de olika färgvalen på rakhyvlarna
Vi ville spåra färgbytena mellan rakhyvlarna för att kunna se vilka valen stod mellan innan en potentiell kund valde färg. Detta gjorde vi genom en trigger för click class på de olika färgerna och en auto-event variabel för element attribute alt-text. Eftersom alla bilderna hade sin respektive färg som alt-text fick vi på så vis in färgerna som label till analytics.

GA Event - Klick i huvudmenyn
Gemensamt för länkarna i menyn är att alla dessa har header i sitt data event name, dvs attributet för länk-elementet i källkoden. Vi använde därför samma variabel som vi skapat tidigare som hämtar element attributet data event name i vår trigger, där vi specificerade att denna ska innehålla ordet header. I eventet returneras även denna variabel som label i vår tagg, då den återger ett specifikt namn för den länk i menyn som besökaren har klickat på oavsett språkval på sidan (som ändrar klick text), till exempel ’Home_how_it_works_header’.
GA Event - Nyhetsbrev registrering
För att mäta detta gjorde vi n trigger som slår på element visibility och hämtar det element med hjälp av CSS som visas när man har lyckats signa upp på nyhetsbrevet (en text med thank you for subscribing). När det elementet är synligt skickas ett event in i Google analytics med sid-URL som label för att kunna se på vilken sida flest kunder registrerar sig på nyhetsbrevet.


Språkval

GA Event - Ändring av fraktland
Vi ville kunna spåra vilka länder besökaren väljer som fraktland på sidan. Eftersom det redan fanns ett event i datalagret för när man ändrar land, skapade vi en trigger för ett custom event som motsvarar detta i GTM samt en datalagervariabel som hämtar in event_data från datalagret (vilket land besökaren har klickat på) och skickar in det som label för eventet.
GA Event - Ändring av språk till engelska
Vid val av fraktland finns det alltid engelska och landets språk att välja på. Vi ville spåra när folk väljer engelska. Om många väljer engelska i nåt land kan man överväga att ha det som standardinställning för sidan eller se över om det finns problem med copyn på det aktuella språket som gör att människor byter.
    Variabeln vi gjorde tidigare som återgav data-event-name visade sig bli användbar här också eftersom länken till engelska innehöll ett specifikt namn oavsett språkval på sidan. Vi valde därför att använda detta som trigger för klick på engelska.
    Men det vi även ville få in i eventet för att förstå sidan är från vilket land personen väljer att byta språk. I url:en finns det alltid en bit direkt efter domänen som ändras beroende på land, ex. ’sv’. För att få en snygg gruppering och lättförstådd data behövde vi plockar ut just denna delen av url:en. Här fick vi chansen att använda GTMs ”community template gallery” och hittade en mall för en variabel där man kan välja vilken del av sökvägen man vill plocka ut.


GA Event - Användning av översättningsverktyg på sidan
Vi ville spåra detta för att förstå om där är något viktigt språk som saknas på sidan och som man bör ha som översättning i ett visst land. Eller om de använder google translate istället för språkvalen på sidan, är knapparna för små, bör någonting ändras?

Fördelen med oändliga resurser på internet är att man inte behöver uppfinna hjulet på nytt. Detta är gjort genom ett GTM-recept hämtat från Analytics mania . Den består av en custom HTML-tag som lyssnar efter om sidan översätts och då pushar in ett event, pageTranslated, i datalagret samt en tag med det eventet som trigger som skickar in ett event till google analytics med översättningsspråk. Eftersom det är av intresse för oss vilket språk sidan är på när den översätts använde vi även här variabeln från eventet ovan som plockar ut denna delen av sökvägen .

Inloggade användare

GA Event - Inlogg av användare
Vi observerade vilket event som skjuter in i datalagret när en användare loggar in och använde det som trigger för tagen som då skjuter in ett event i google analytics.
Custom dimension - Inloggad/ej inloggad användare
För att kunna jämföra beteende mellan inloggade användare och ej inloggade användare på sidan ville vi få in den informationen i Google analytics i en custom dimension. Här fick vi möta problematiken med att ej ha kontakt med utvecklaren. För att göra en custom dimension i Google analytics hade vi viljat ha in detta i datalagret som något vi kan hämta i en variabel men det fanns inget som angav om användaren är inloggad eller ej, utan endast ett event vid namn AIR.Customer som bara är där när kunden är inloggad.
    För att på ett snyggt sätt få in relevant data i Google analytics kring om användaren är inloggad eller ej valde vi att göra en speciallösning. Med en Custom Javascript – variabel gjorde vi om existensen av detta event i datalagret till en boolean (sant eller falskt) och skickade in det som en sekundär dimension så att man kan se inloggad:true eller inloggad:false.


Abonnemangsval

GA Event - Val av frekvens för abonnemang
Detta ville vi spåra för att se vad folk väljer mellan innan de gör sitt slutliga val av abonnemanget. Om många velar mellan två alternativ kan där finnas konverteringsoptimering att arbeta med. För detta finns det redan ett event som skjuts in i datalagret. Det eventet använde vi som trigger för vår tag som sedan skjuter in i eventet till analytics vilken av stegen personen ändrar mellan.
GA Event - Tillval av produkter till abonnemang
Hur många väljer att lägga till varje gång rakbladen kommer och hur många lägger till att köpa endast en gång? Här handlar det om merförsäljning och förståelsen av användarens beteende här kan ge viktiga insikter för att öka den.
  Här kan du välja att få produkten vid varje leverans eller bara en gång. Vi gjorde taggar för två separata event, ett event som vi plockade från datalagret och använde ett custom event som trigger som slår när en person lägger i varukorgen som ett engångsköp och motsvarande för när produkten ska med vid varje leverans.
GA Event - Tillägg och borttag av rakfordral
Vid val av fodral spårar vi knapptryck på knappen vid tillägg av rakfodral eller borttagning av rakfodral till ordern. Då knappen byter klass då den är intryckt jämfört med ej valde vi att ha det som trigger för två separata taggar; tillägg och borttag.
GA Event - Tillägg och borttag av produkter i varukorgen
Även här använde vi ett event som skjuts in i datalagret som trigger, när man trycker på plus- och minus-knapparna i checkouten. Vi triggade taggen på en del av event-namnet, då eventet har lite olika namn beroende på vilken produkt man ändrar kvantiteten för men vissa delar som är gemensamma. Vi returnerade däremot hela eventnamnet samt click klassen i vårt event för att enkelt i GA kunna se vilken produkt man ändrat kvantiteten för samt om man ökat eller minskat kvantiteten (plus/minus).


FAQ och Social

GA Event - Öppning av frågor på FAQ
Anledningen till att spåra här är främst för att förstå vilka frågor besökare letar svår på mest. Om det finns frågor som fälls ut ofta (ungefär på samma sätt som punkterna på denna sidan) så är det förmodligen något man vill ge tydligare svar på redan tidigare på sidan. Kanske finns där konverteringar att vinna. Här gjorde vi två taggar, en som triggades vid klick på element med klick-klass question och skickade in elementets text i analytics som label, vilket innebär att man där enkelt kan se texten för de olika frågorna och hur många gånger de fälls ner.
    Den andra tagen vi gjorde var för att mäta klick på olika ”ämnesområden” i sidomenyn på FAQ och skicka in texten i google analytics.
GA Event - Klick på sociala ikoner
Här gjorde vi en tagg som triggades enbart på klick på de sociala ikonerna och sköt in ett event i google analytics med sid-URL och vilken av de sociala medierna användaren klickade sig vidare till.
GA Event - Klick på footerlänkar för kundservice
Även här ville vi mäta vilket sätt en kund som har en fråga klickar sig vidare på mest, skickar de mail, går till FAQ eller till messenger-chatten?
    Vi tog hjälp av en auto-event-variabel som vi skapat sedan tidigare, som hämtar ett attribut hos klickelementet (data-event-name) och använde den som trigger. Detta för att endast hämta klick på de ikoner och länkar som kan kopplas till customer service, då det även finns länkar till karriär- och press i footern som vi inte ville ha med i mätningen.


De svårigheter det innebär att utgå från sidans förutsättningar och inte ha kontakt med utvecklarna och kunna be om förändringar har vi fått uppleva många gånger under arbetets gång. Inte minst när vi nästan var färdiga och upptäckte att Estrid hade beslutat sig för att publicera en helt ny webbplats med nya element-klasser och annat som gjorde att spårningen inte längre fungerade. I vissa andra fall har det även innerburit att vi har fått tänka till extra och göra speciallösningar för att kunna få in lättförstådd information i Google analytics.

Låter det intressant?
Hör gärna av dig!