Bookmark and Share
Her er du: Forsiden » PHP-artikler » Sæt turbo på Google Analytics
Indhold
Nyhedsbrev

Få en mail når vi skriver en ny PHP-artikel, holder et nyt gratis kursus, eller når der sker andet godt i vores verden:

Din email:
 

Sæt turbo på Google Analytics

Selv om det nu snart er et halvt år siden Google annoncerede deres nye asynkrone-metode til at bruge Google Analytics, så ser man det kun ganske sjældent anvendt, og det er en skam, når nu det er pærelet at implementere og iøvrigt giver dig et par frække fordele:

  • Dine sider loader hurtigere
  • Ikke længere nogen risiko for at miste tracking events

Her får du en gennemgang af hvordan den nye tracking-kode afviger fra den gamle, samt instrukser i hvordan du får dit site med på den asynkrone Analytics-vogn.

Dine sider loader hurtigere

Tracking-kodens første opgave er at få dine gæsters browser til at loade filen ga.js fra Google Analytics - det er denne fil der sørger for at sende data tilbage til din Analytics-konto.

Den gamle tracking-kode skriver med document.write() et <script>-element på din side, hvilket er en "blokerende" handling. Det vil sige at når browseren skal skrive <script>-elementet, så stopper den, og læser ikke mere HTML ind fra din side før den er færdig.

Den del virker sikkert bekendt - den ser således ud:

<script type="text/javascript">
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
  document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

Den asynkrone version af tracking-koden kører document.createElement() i en anynym funktion, som sætter et link til ga.js ind i din header i stedet, og det kald bliver i alle moderne browsere håndteret asynkront, hvilket vil sige at browseren kan fortsætte med at indlæse din side alt imens der loades JavaScript fra Google i baggrunden:

<script type="text/javascript">
  (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';
      (document.getElementsByTagName('head')[0]).appendChild(ga); })();
</script>

Når først tracking-koden har loadet ga.js-filen fra Google er selve kaldet der registrerer et besøg på din side (.trackPageView() ) nogenlunde det samme, men mere om det om et øjeblik.

Ny "event-kø": ingen Analytics-kald går tabt

Udover at ga.js nu loades asynkront fra Google, så gør den nye tracking-kode også brug af en kø, som du kan høvle events i selv inden ga.js er loadet fra Google - altså går ingen kald til Analytics tabt selv om ga.js ikke er loadet helt når eventen bliver fyret af.

Det kunne f.eks. være at du tracker download af filer eller afspilning af videoer i Analytics, og med den gamle tracking-kode kunne du risikere at det i værste fald gav en fejl når folk trykkede på et download-link hvis ikke ga.js var loadet i gæstens browser.

Køen er ikke andet end et array, som du kan gemme events i, og når ga.js så er fuldt loadet, så tager den fat på arrayet og fyrer de events af der ligger og venter. "Køen" startes altså således:

<script type="text/javascript">
  var _gaq = _gaq || [];
</script>

Og nu kommer tricket så - selve initialiseringen af trackeren og kaldet der registrerer et besøg på din side bliver smidt i køen med det samme, og er altså uafhængigt af om ga.js er loadet eller ej:

<script type="text/javascript">
  var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); _gaq.push(['_trackPageview']);
</script>

En fræk lille bonus ved denne kø er, at du kan sende anynyme funktioner efter den. Det betyder, at du kan lægge egne JavaScript-kald i kø, og få dem kørt når ga.js er loadet, uden at dine egne kald blokerer for sidens indlæsning.

Den teknik har vi blandt andet brugt her på siden til at loade koden til AddThis-knappen øverst:

<script type="text/javascript">
  _gaq.push(function() { var e = document.createElement('script'); e.type = 'text/javascript'; e.async = true; e.src = 'http://s7.addthis.com/js/250/addthis_widget.js#username=moski2'; (document.getElementsByTagName('head')[0]).appendChild(e); });
</script>

Du kan læse mere om denne feature på http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html#PushingFunctions

Del tracking-koden op

Da alt nu kører asynkront er Googles anbefaling at du sætter tracking-koden ind som det første i dit <body>-element, men for trods alt stadig at få din egen side til at komme først i alle køer, så er anbefalingen herfra at du starter med blot at sætte "event-køen" ind i starten af siden, og så først loader ga.js i bunden af din side.

Altså følgende i toppen:

<script type="text/javascript">
  var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-X']); _gaq.push(['_trackPageview']);
</script>

Og dette i bunden:

<script type="text/javascript">
  (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';
      (document.getElementsByTagName('head')[0]).appendChild(ga); })();
</script>

Google har dog også selv set dette ønske komme, og refererer til denne teknik som "Split Snippet".

Nap den indbyggede model

Needless to say, så er den asynkrone model implementeret som standard i Moski2 CMS, så det eneste du som CMS-kunde her i huset skal gøre er faktisk at knalde dit "Web Property ID" ind i administrationen, og så går resten af sig selv:

Automatisk integration af Google Analytics i Moski2 CMS

Endelig er her lidt videre læsning:

God fornøjelse.