Asynchroon tracking script gelanceerd door Google.

Google heeft onlangs een nieuwe methode gelanceerd om je website verkeer te meten. Het gaat hier om het zogenaamde asynchronous tracking script. Het is een alternatieve manier om verkeer op je website te meten. De oude methode blijft dus gewoon bestaan!

Deze nieuwe, maar alternatieve, tracking code heeft een aantal voordelen ten opzichte van de oude tracking code:

Snellere laadtijd, verbeterde user experience

Het nadeel van het laden van JavaScript bestanden is dat ze soms problemen veroorzaken wanneer ze niet geheel of niet snel genoeg geladen worden. De pagina wordt dan niet verder geladen en het resultaat is dat je wellicht een witte pagina voor je ziet omdat de rest van de pagina niet gerenderd wordt. Een tracking code is eigenlijk het ideale voorbeeld van een script die je asynchroon zou willen laten laden zodat voorkomen wordt dat afbeeldingen en stylesheets niet worden geladen.

Verbeterde user experience, meer data om te analyseren

Omdat de gebruikerservaring vooruit gaat, pagina's sneller laden, worden bezoekers van je website al getracked voordat ze de back button hebben gevonden ( omdat de pagina niet snel genoeg laadt). Uiteindelijk heb je dus meer data tot je beschikking. Voorgesteld wordt daarom om het nieuwe script bovenaan de pagina (voor het afsluiten van het element) in te laden zodat het script direct asynchroon gestart kan worden bij het laden van de pagina. Niet alleen laadt de pagina nu dus sneller, maar heb je ook nog een verbeterd inzicht in je bezoekersdata.

De nieuwe Snippet

Hoewel de oude code dus gewoon kan blijven functioneren is hier het nieuwe code voorbeeld voor Google Analytics:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script');
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    ga.setAttribute('async', 'true');
    document.documentElement.firstChild.appendChild(ga);
  })();

</script>

Om het script te laten werken vervang je uiteraard de UA-XXXXX-X code met je eigen ID. Om vervolgens ook nog gebruik te maken van alle GA functies waarvan gebruik wordt gemaakt zoals onclick tracking en event tracking zullen we wat extra modificaties moeten uitvoeren. Google heeft hiervoor het Google Analytics queue object, _gaq geintroduceerd.

Een onclick voor het tracken van een event (een button wordt aangeklikt ) ziet er dan zo uit :

<button onclick="_gaq.push(['_trackEvent', 'button3', 'clicked'])"/><button>

Voor een compleet overzicht kijk je in het Google Analytics Help Center. Wij zullen in de toekomst nauwer ingaan op de inzet van deze nieuwe asynchrone code met enkele praktijk voorbeelden.

Het is belangrijk om op te merken dat Google steeds meer stappen onderneemt om het web sneller te maken en onder andere ook voor te bereiden op de komst van HTML5. Zo heeft Google vandaag ook een nieuwe experimentele tool in Webmaster Tools gelanceerd waarbij suggesties worden gedaan om de snelheid van je site te verbeteren. Een snellere laadtijd van je pagina heeft volgens onderzoeken een hogere retentie van je bezoekers tot gevolg,  en zorgt voor een hogere omzet en lagere kosten.