Javascript

Övervaka din web performance med Google Analytics

Som jag lovade förra veckan så skulle jag visa hur ni med hjälp av trevliga Google Analytics kan mäta upp er web performance, det vill säga hur bra webbplatsen presterar i laddningstid etc. Genom att leka med GA:s “Custom Variables” kan man åstadkomma mirakel även om lösningen i sig är lite klumpig då Google Analytics inte är skapad för detta ändamål. Lösningen kommer att fungera på följande vis:

  1. När en besökare hamnar på webbplatsen så skapar vi en tidstämpel så att vi kan mäta sidans laddningstid
  2. Vi spelar in laddningstiden i en Session Scope  Custom Variable.
  3. Sidans laddningstid skickas till Google Analytics med ett trackPageview anrop
  4. Datan aggregeras i Google Analytics och hittas under Visitors > Custom Variables menyn

Lätt som en plätt va? Så här går du tillväga:

Steg 1 – Addera javascriptet i headern

Det första vi måste göra är att försäkra oss om att vi fångar upp laddningstiden, annars är hela det här inlägget lite bortkastat.. Än så länge funkar bara skriptet för en sida, appliceras den på flera så skrivs den förgående laddningstiden över vilket kan leda till värdelös statistik. Det som händer är att du får då bara ut statistik på den sista sidan som besökaren befann sig på (och då alla besökare lämnar webbplatsen i olika skeden så blir den heller inte jämförbar). Ett skript för att kunna spåra flera sidor på en webbplats är under utveckling dock. Ett tips är att sätta detta skript på din mest trafikerade sida, t.ex. startsidan.

Klistra in följande rader så högt som möjlig, gärna direkt under starttagen för headern så att du kan fånga upp besökarens tidstämpel så tidigt som möjligt.

<html>
<head>
  <script type="text/javascript">
  //<![CDATA[
    var page_load_start = new Date();
    var _gaq = _gaq || [];
    window.onload =  function() {
      var page_load_end = new Date();
      var load_time = page_load_end.getTime() - page_load_start.getTime();
      load_time = parseInt( load_time / 100 )*100;
      _gaq.push(["_setCustomVar",1,'landingPageTime',load_time,2]);
      _gaq.push(["_setAccount","UA-xxxxxxxx-y"]);
      _gaq.push(["_trackPageview"]);
    };
  //]]>
  </script>
  <!-- Here goes the rest of your head section --/>
</head>

Skriptets första två rader fångar besökarens starttid och initierar GA:s async tag. De följande fyra raderna efter det sätter en stoptid för när sidan har laddats färdigt och räknar ut den totala tiden. Slutligen så tilldelar skriptet den uträknade laddningstiden till en “Custom Variable” och skickar den till Google Analytics.

Steg 2 – Lägg till Google Analytics async kod i footern
Om du missat att använda dig av Googles async kod så är det dags att göra det nu, förutom fördelen att kunna mäta t.ex. laddningstider så har en del förbättringar gjorts som gör att du kan fortsätta ladda sidan samtidigt som Google Analytics skriptet läses in.

<body>
  <!-- Your web page goes in here --/>
  <script type="text/javascript">
  //<![CDATA[
    (function() {
      var ga = document.createElement('script');
      ga.type = "text/javascript"; ga.async = true;
      ga.src  = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(ga,s);
    })();
  //]]>
  </script>
</body>
</html>

Steg 3 – Vänta på att datan ska börja komma in

Om du lyckas genomföra de ovanstående stegen korrekt bör data börja ticka in inom några få timmar. För att ta del av den går du till ditt Google Analytics konto, klickar dig sedan in på Visitors > Custom Variables i den vänstra menyn. Där kommer du att se följande:

GA custom variables

Ovan ser du den Custom Variable som vi precis skapade, landingPageTime. Har det gått mer än 24 timmar och du fortfarande inte ser någon sådan variabel så kan det vara att något gått fel i installationen av skriptet,  gå då tillbaka till steg ett och felsök.

Klickar du på landingPageTime så får du upp en detaljerad rapport över laddningstiderna som bör se ut så här:

GA landing_page_time

Den kan vara lite förvirrande till en början men du tolkar siffrorna på följande sätt:

  • Custom Variable – Den här kolumnen innehåller de faktiska laddningstiderna. Står det till exempel “900″ så betyder det att det tog 900 millisekunder för sidan att ladda.
  • Visits – Berättar hur många besökare som upplevde den aktuella laddningstiden. I bilden ovan upplevde 52 stycken besök en laddningstid på 900 ms
  • Pages / Visit – Berättar hur många sidor per besök respektive användare med olika laddningstider gjort
  • Bounce Rate - Den här siffran berättar hur många avhopp du haft från sidan som besökarna hamnade på. I regel ser man att ju högre laddningstid desto större är avhoppen från sidan.

Svårare än så är det inte att använda sig av Google Analytics för att mäta upp laddningstiden och jobba med Web Performance Optimization. Ett råd är att exportera alla siffror till ett Excel ark och göra lite snygga grafer för att få en övergripande bild på hur siffrorna hänger ihop på just din webbplats.

 

Så spårar du sökord från Googles bildsök

Googles bildsök lämnar vanligtvis en refererande URL som är svårtolkad. Eftersom Google Analytics inte kan tolka URL:en korrekt så får du heller inte reda på vilka nyckelord dina besökare använde just för att hitta till din webbplats via bildsöket.

Det betyder alltså att du teoretiskt förlorar en hel del trafik på att inte sökoptimera din webbplats (bilder så väl som sidor) baserat på de utelämnade sökorden. Kan detta lösas?

http://www.google.se/imgres?imgurl=http://media.linkedin.com/mpr/mpr/shrink_80_80/p/2/000/06f/096/2c7b090.jpg&
imgrefurl=http://www.linkedin.com/pub/dir/Adam/Hassan&usg=__p1d2wufb27OMzE9QR-MOgZN5juo=&h=80&w=80&sz=3&hl=sv&start=0&sig2=zyfof_3EAPc5wslYIPFQ1Q&zoom=
1&tbnid=t-NQeoikbwYBOM:&tbnh=73&tbnw=73&ei=6TxTdOFPNCKswbWtYXUBw&
prev=/images%3Fq%3Dadam%2Bhassan%26hl%3Dsv%26biw%3D1384%26bih%3D752%
26gbv%3D2%26tbs%3Disch:1&itbs=1&iact=hc&vpx=267&vpy=253&dur=950&hovh=73&
hovw=73&tx=98&ty=33&oei=3zx-TfnIJsTZtAb7ronpBg&page=1&ndsp=20&ved=1t:429,r:1,s:0

Googles URL från  bildsöket, crystal clear!

Ja men självklart  finns det lösningar för att kunna få ut de sökord användarna brukade i bildsöket. Lägg till följande rader Javascript under din Google Analytics kod och det är klart!

<script type="text/javascript" charset="utf-8"
varpageTracker = _gat._getTracker("YOUR TRACKER ID");
varrefferer = document.referrer;
if(refferer.search(/images.google/) != -1 && refferer.search(/prev/) != -1) {
varregex = newRegExp("images.google.([^\/]+).*&prev=([^&]+)");
varmatch = regex.exec(refferer);
pageTracker._setReferrerOverride("http://images.google."+ match[1] + unescape(match[2]));
}
pageTracker._trackPageview();
</script>

 

 Scroll to top