Google Analytics es un exelente servicio para poder ver el comportamiento de los visitantes de un site. Con solo copiar y pegar algun script podemos saber un muchas de cosas. Pero este servicio no nos dice nada sobre cuan rapido / lento es nuestro sitio para los visitantes, y como ya hemos hablado muchas veces, la velocidad es muy importante.
Entonces, como podemos usar google analytics para poder monitorear la performance real de un sitio?
Escribí un pequeño script que usa la función evenTrack de la API de GA y envia a GA las mediciones de performance. Usando esto, van a poder guardar y analizar de manera muy simple en la misma interfaz web de GA.
Pasos
1) Insertar este script después del la etiqueta <head> :
<script>
var _gameasures = [['start',(new Date()).getTime()]];
function addGAMearsure(mark){
_gameasures.push([mark,((new Date()).getTime()-_gameasures[0][1])]);
}
</script>
2) Insertar este script justo antes de la etiqueta </body>:
<script>addMeasure("Perceived Ready Time");function sendGAMeasures(){addMeasure("load");if(_gaq)for(var a=_gameasures.length,b=encodeURI(window.location);a-- >1;)_gameasures.push(["_trackEvent","Performance",b,_gameasures[a][0],_gameasures[a][1]])}if(typeof window.onload=="function"){var prevOnload=window.onload;window.onload=function(){prevOnload();sendGAMeasures()}};</script>
Opcional
Si quieres puedes agregar tus propias marcas y mediciones de manera Muuuuuuy facil, solo llamando a la funcion: addGAMearsure(’my mark’) Ej:
........
</head>
<body>
<script> addMeasure('Perceived ResponceTime'); </script>
El código completo (críticas y comentarios son bienvenidos):
// mark startTime
var _gameasures = [['start',(new Date()).getTime()]];
//
// Add measure
// @mark string
//
function addMeasure(mark){
_gameasures.push([mark,((new Date()).getTime()-_gameasures[0][1])]);
}
//
// add load event
//
function sendGAMeasures(){
//add final measure
addMeasure('load');
// if _qaq is defined means that google analytics is set ok
if(_gaq){
// set page name
// by default it get the page url, if you want you can change the value of pname
var len = _gameasures.length, pname = encodeURI(window.location);
// send all measures
while(len-- > 1){
_gaq.push(['_trackEvent', 'Performance', pname, _gameasures[len][0], _gameasures[len][1]]);
}
}
}
// set onload event checking if has been set previoully
if (typeof window.onload != 'function') {
_sendGAMeasures;
}else{
var prevOnload = window.onload;
window.onload = function(){
prevOnload();
sendGAMeasures();
};
}
Espero que esto les ayude a monitorear la velocidad de sus sitios. :)
Martin
2 Comments
Hola Martín,
¿Podrías explicarme en que parte del panel de GA puedo ver los datos recolectados?
y otra cosa… fijate que la función addMeasure() la tenes declarada como addGAMeasure() y la llamas addMeasure(). En la demo está bien, pero en el paso 2 no.
Bueno, un saludo y felicitaciones, muy buen contenido.
Alfred.
@alfred: gracias por el comment del nombre de la funcion.
Los datos los puedes ver en GA dentro de el menu de Eventos.
One Trackback
[...] (Versión en español) [...]