Spåra formulärspostningar med Google Analytics

Har tänkt igenom hur denna blogg kan bli bättre och roligare att läsa och har en del ideér. För att kunna mäta om förändingar är bra eller dåliga så ville jag först sätta upp några mål i Google Analytics, och det har jag sysslat med de senaste dagarna. Tänkte dela med mig av vad jag lärt mig.

Först tänkte jag igenom vad målen med bloggen är och kom fram till att det viktigaste och roligaste är när man får input från sina läsare. Det är på så sätt som bloggen kan utvecklas och växa och därför bestämde jag mig för att sätta upp följande två mål.

1. Kontaktformulär skickat
2. Kommentar postad

När man sätter upp mål-urlerna i Google Analytics så har man tre olika alternativ, Exakt matchning, Rubrikmatchning och Matchning av vanliga uttryck. Utan att gå in för mycket på dem så kan jag kontatera att Exakt matchning fungerade bäst för det ja ville göra. Hos Google finns det en bra hjälpsida som förklarar hur de olika alternativen fungerar.

De två målen har jag implementerat lite olika så tänkte förklara här hur jag gjort.

Så satte jag upp mål för Kontaktformuläret

Kontaktformuläret postar tillbaks till sig själv och jag har alltså ännu inte gjort om det till PRG-designmönstret som jag skrev om här om dagen. Eftersom adressen inte ändras var jag tvungen att skicka med den påhittade sida "/contact-form-submitted" som jag angett i mitt första mål.

I ContactControllern (ASP.NET MVC) så skickar jag med parameter i ViewData när användaren har postat meddelandet:

this.ViewData["TrackPageView"] = "\"/contact-form-submitted\"";

Denna parameter sätts sen in längst ner på sidan i skriptet för Google Analytics:

<script type="text/javascript">
//<![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write("\<script src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'>\<\/script>" );
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
    var pageTracker = _gat._getTracker("<%=Request.Url.ToString().ToLower().IndexOf("codeodyssey.se") != -1 ? "UA-406884-2" : "UA-406884-1" %>");
pageTracker._initData();
pageTracker._trackPageview(<%=ViewData["TrackPageView"] %>);
//]]>
</script>

Mål-koden för kommentarerna

Kommentarsfunktionen har jag nyligen gjort om så den följer PGR-mönstret och här hade jag lite svårare att lägga in spårningskoden på rätt ställe. Provade en del olika grejer där jag bland annat försökte lägga in det på den adress som man postar kommentaren till (bloggurl plus "/add-comment" på slutet). Vet inte exakt varför det inte gick med regulärt uttryck men antar att det beror på att den sidan returnerar en 302-respons (see other adress). Kan vara så att man inte kan tracka såna sidor med Google Analytics.

Sen kom jag på en enklare lösning. La på ett onclick-event på submit-knappen istället där jag anropar pagetrackern och det fungerar nu fint.

<input onclick="pageTracker._trackPageview('/comment-submitted');" type="submit" value="<%= GetLocalResourceObject(" />" class="submit-btn"/>

Först trodde jag att huvudskriptet där tracken inkluderas var tvungen att ligga ovanför eventet, med det visade det sig att den inte behövde, den har ju redan registrerats när sidan laddas. Google Analytics Tracking API var användbart för felsökning och genom att anropa _getAccount() kunde jag bekräfta att eventet hade kontakt med trackern.

Dags att mäta, förändra och förfina

Så nu är det bara att luta sig tillbaks och börja analyserar hur kommentarer och kontaktmeddelande postas på Code Odyssey. Kom gärna med förslag och ideér hur sidan kan göras bättre för att uppmuntra fler kommentarer och rikare samtal.

Vill du själv göra samma sak och använder WordPress kan jag rekommendera How To Track Wordpress Signups and Comments With Google Analytics hos TD Creative.

BuiltWith - Visar vilken teknik en webbplats använder

BuiltWith är en bra gratistjänst som visar vilken teknik en webbsajt använder.

Genom att skriva in en URL får man information sidans typ av server, programmeringspråk, JavaScript-bibliotek, vilka annons-nätverk som är anslutna, typ av besöksräknare, doctype m.m. Varje teknik beskrivs kortfattat på ett informativt sätt.

Man får också tillgång till statistik på hur vanlig varje teknik är bland de sajter som har undersökts av tjänsten. En annan finess är att man kan söka efter likande teknik och på så sätt utforska nya lösningar.

Sajtägare kan även ansöka om medlemskap för att få en skräddarsydd rapport av rekommendationer för nya tekniker.

IE7 till piraterna

Microsoft beslutar sig för att släppa på valideringen av Windows vid nedladdning av Internet Explorer 7. Något som jag tycker är kanon, och som vi lustigt nog hade en diskussion om nyligen borta på Sovrat (som idag bytt namn till Pusha), och hoppades på att Microsoft skulle göra.

Så nu kan användare utan riktig Windows-licens ladda hem den nyaste webbläsaren från operativ-utvecklaren i Redmond. Förhoppningsvis kommer detta leda till att fler uppgraderar från IE6, som är så jobbig att skapa hemsidor för.

Men anledning av denna nyhet tänkte jag det var läge att kolla hur statistiken ser ut för tillfället. Som vanligt när det gäller statistik så är det svårt att veta vilka källor man bör förlita sig på.

Om man ser på webbläsar-statistiken på W3School så såg den ut enligt nedan i september. Firefox har denna månad gått upp i topp som den mest använda webbläsaren om man delar på de olika versionerna av IE. Den stora andel Firefox-användare beror ju på att det ofta är utvecklare som besöker W3C-sajterna.

Ser man istället på samma månad på W3Counter som sammanställer statistik från ett större antal källor så ser situationen lite annorlunda ut. Här är IE6 på solklar topp. Jag har lagt ihop de olika Firefox-versionerna samt grupperat övriga läsare under en post för att statistiken ska kunna jämföras lättare.

Vad man kan se av detta är att det gäller att veta hur den vanliga besökaren ser ut på din webbplats. Det varierar helt enkelt beroende på vilken typ genomsnittlig besökare du har.

Om du har ett lågt användarantal som använder den förlegade IE6, kan du eventuellt strunta i dessa och använda alla de nya finesser som moderna webbläsare erbjuder, transparenta png, riktigt box-modell och allt det där.

Har du dock ett stort antal så bör du testa så att designen fortfarande fungerar någorlunda. Microsoft har en virtuell installation av IE6 om du inte har kvar den på din dator. Annars finns det som vi nämnt tidigare online-tjänster som kan visa IE-design.

Att det går att sänka IE6 men endast en rad HTML-kod, borde vara ett tecken nog att den borde pensioneras för gott, så hoppas att Microsofts senaste välgörande handling kommer att snabba upp processen.

Vill man vara riktigt radikal kan man visa ett varningsmeddelande för alla IE-användare att de bör byta webbläsare. Lite att ta i om du frågar mig, jag hade helldre sett ett skript som bara tipsade IE6-användare att uppdatera till IE7, Firefox eller annan med likvärdig standardiserad renderering.

Gapminder - världens utveckling visualiserad

Gapminder har nyligen blivit uppköpet av Google och på sökmotornjättens domän, finns nu verktyget att testa. Man kan se utvecklingen av jordens länder, enligt många parametrar som ländernas befolkningsmängd, ekonomisk tillväxt, livslängd, barndödlighet m.m. Gapminder-verktyget innehåller för tillfället data för åren mellan 1975 till 2004.

Programmet som såldes för en okänd summa, är utvecklat av professor Hans Rosling vid Karolinska Institutet och hans son.

Organisationen Gapminder fortsätter dock att driva sin forskning och på hemsidan kan man bland annat se en presentation på svenska av hur statistikprogrammet fungerar.