Google Analytics es uno de los mejores sistemas para llevar las estadísticas de un sitio web. Además de tener un panel de control muy completo, mediante el cual observar y medir las estadísticas de nuestra web, también tiene un API Javascript que permite llevar a cabo métricas más afinadas, como por ejemplo medir eventos de interfaz de usuario.El uso normal que se le da a Google Analytics una vez instalado, e ver las páginas vistas, las visitas, el navegador más utilizado del sitio, el porcentaje de rebote…Con el API de Google Analytics se puede ir un paso más allá y llevar la cuenta de eventos personalizados, lo que los de Google llaman seguimiento de eventos (event tracking). También se pude llevar la cuenta de los enlace salientes, es decir, cuales son las páginas externas de tu sitio que la gente más visita, llevar la cuenta de eventos de usuario, como darle al play en un video, pasar las diapositivas de un slideshow, etc… Otro uso interesante que se le puede dar a Google Analytics es, por qué no, llevar las estadísticas de las excepciones lanzadas por Javascript en tu sitio web, es decir, usar Google Analitycs como herramienta de reporte de errores de tu aplicación Javascript.
El seguimiento de eventos se introdujo con el fichero ga.js. Hasta entonces, para seguir eventos de usuario había que crear URLs virtuales, luego se contaban las visitas de esa URLs y se podía saber cuantas veces se había efectuado el evento. El problema es que con esta forma de manejar los eventos, al número de visitas se le sumaba el número de eventos, por lo que pierdes veracidad en el análisis del sitio al inflarse las estadísticas. Por lo tanto es mejor usar eventos.
Implementación con Javascript
En todo momento se supone que se ha cargado la librería ga.js que proporciona Google Analytics para llevar el seguimiento, como se muestra a continuación.
1
2
3
4
5
6
7
8
9
10
|
<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>
<script type="text/javascript">
var pageTracker = _gat._getTracker("TuClaveDeAnalytics");
pageTracker._initData();
pageTracker._trackPageview();
</script> |
Imagina que quieres llevar un control del número de personas que pincha sobre el icono RSS del blog y del número de personas que se suscribe al RSS por email mediante el formulario de FeedBurner.
Para ello se puede crear la categoría RSS, y la acción “click” para cuando se haga click, y submit para cuando se envíe un formulario. Las etiquetas sirven para diferenciar las acciones, por ejemplo si tengo 3 iconos diferentes de RSS, puedo ponerle a cada uno la categoría “RSS”, acción “click”, pero cambiarles las etiquetas, y ponerle (por ejemplo) a uno “icono_grande”, “icono_footer” e “icono_barra_lateral”. De esta forma se pueden diferenciar claramente en que icono se ha hecho click, y saber que icono es el que llama más la atención a los usuarios.
Número de gente que pincha sobre el enlace del Feed/Twitter
1
2
3
4
5
6
7
8
9
10
11
12
|
Icono de RSS que enlaza a mi feed
<a href="http://feeds.feedburner.com/nosolocodigo" id="enlace_feed">
<img src="icono_rss.jpg" />
</a>
Formulario de envío del email
<form id="suscribete_email">
<input type="text" >
<input type="submit" value="Enviar" id="enviar_email" />
</form> |
1
2
3
4
5
6
7
8
9
10
11
12
13
|
/* Sintaxis: pageTracker._trackEvent('Categoría', 'acción', 'etiqueta');" */
/* Código que realizará el seguimiento */
/*Se presupone que se ha cargao la librería y las llamadas se están realizando en el evento ready*/
$('#enlace_feed').click(function(){
pageTracker._trackEvent('RSS', 'click', 'Icono');
});
$('# enviar_email ').click(function(){
pageTracker._trackEvent('RSS', 'submit', 'formulario de envío');
}); |
Una vez Google reciba los datos, accede a tu panel de control, en la sección Contenido > Seguimiento de eventos.
Seguimiento de enlaces salientes
Puede resultar muy útil saber a que sitios se quieren dirigir nuestros usuarios. Si el enlace en el que pinchan es interno, Analytics nos lo dirá, por que la página de destino lleva el código de seguimiento y lo registra. Pero si el enlace es de un dominio que no manejamos nosotros Analytics no lo puede saber. Para averiguarlo podemos generar un evento cada vez se haga click en cualquier enlace que no sea de nuestro dominio, y enviar la URL de destino como etiqueta del evento. Mira el ejemplo y verás.
Mootools
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| window.addEvent('load', function() {
if(pageTracker) {
$$('a[href^=http]').each(function(el) {
if(!el.get("href").match('^http://nosolocodigo.com') || !el.get("href").match('^http://www.nosolocodigo.com')){
el.addEvent('click',function() {
var destino = el.get('href').replace('http://','');
pageTracker._trackEvent('External', 'Click', destino );
}.bind(this));
}
});
}
}); |
jQuery
1
2
3
4
5
6
7
8
9
| $('a').each(function(){
var href = $(this).attr('href');
if ((href.match(/^https?\:/i)) && (!href.match(document.domain))){
$(this).click(function() {
var destino = href.replace(/^https?\:\/\//i, '');
pageTracker._trackEvent('External', 'Click', destino );
});
} |
Tiempo de carga de la página
Un dato interesante es el tiempo que tarda en cargar la página de media a nuestros usuarios, de esta forma podemos saber si tenemos que optimizar la velocidad o no. Google Analytics no informa de este dato, pero se puede generar un evento que envíe el tiempo que tarda en cargar la página, y luego ver cual es la velocidad media con la que se carga nuestra web. Una aproximación muy buena es la que hacen en panalysis. Para calcular el tiempo que tarda en cargar la página (aproximadamente) hay que poner este código en el head.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
var inicio = new Date;
function trackPageLoadTime()
{
var fin = new Date;
mlsegundos = fin.getTime() - inicio.getTime();
valoracion = "";
if(mlsegundos < 2000){
valoracion = "Muy Rapido";
}else if(mlsegundos < 5000){
valoracion = "Rapido";
}else if(mlsegundos < 10000){
valoracion = "Medio-Lento";
}else if(mlsegundos < 30000){
valoracion = "Lento";
}else{
valoracion = "Catastrofe";
}
pageTracker._trackEvent("Page load time" , valoracion , document.location.pathname , Math.round(mlsegundos /1000));
}
window.onload = trackPageLoadTime; |
Si te fijas, ahora utilizamos un cuarto parametro. Este parametro es el valor, y ha de ser un entero. Por tanto al final queda de la siguiente manera: Categoría->Page load time, Acción-> valoracion (Rapido, muy rapido…), Etiqueta-> path, Valor->Tiempo en segundos.
Más ocurrencias
Haciendo un uso inteligente de los bloques try/catch/finally podemos saber si nuestros usuarios tienen errores en la aplicación o no. Puede resultar útil para depurar aplicaciones que ya están en marcha, obteniendo datos estadísticos bastante jugosos, como por ejemplo, haciendo uso de los segmentos avanzados podemos saber que navegador genera más errores, que sistema operativo, si las conexiones lentas son más propicias a errores que las rápidas, si la tasa de errores es muy elevada…En fin, mucha información. Implementarlo es muy simple, mira este pequeño ejemplo.
1
2
3
4
5
6
7
| try{
//Codigo javascript
}catch(err){
pageTracker._trackEvent(DEBUG, excepciones, err.description);
} |
Otro posible uso sería en formularios. En el evento click del botón de envío, al hacer las validaciones, puedes llevar un log y ver cuantas veces el usuario se está equivocando al rellenarlo. De esta forma puedes obtener datos y saber si el formulario es usable o no.
Otros usos interesantes del API de Google Analytics
- Páginas AJAX incrustadas. Páginas que se van recargando asíncronamente, como Tuenti o Facebook, no podrían llevar la cuenta de visitas si no fuera por estas características. En este caso sería mejor usar el evento trackPageView(“/URL”)
- Descarga de ficheros. Contabilizar cuantas veces se descarga un fichero. Se pueden utilizar etiquetas para diferenciar entre ficheros. Una buena catalogación sería: Categoría-> Ficheros, Acción->PDF/ZIP/RAR/DOC…, Etiqueta->Nombre del fichero. Utilizar un sistema de nombrado coherente es esencial.
- Llevar un control estadístico de los comentarios que te hacen en el blog. Generando un evento cada vez que alguien envíe un comentario podemos sacar muy buen información, como a que horas se comenta más, que perfil de gente comenta más; los usuarios recurrentes o los nuevos, en que países te comentan más… se me hace la boca agua…). Una buena catalogación sería: Categoría-> Blog, Acción->Comentario, Etiqueta->URL_articulo/nombre_usuario.
Creo que con estos ejemplos queda clara la potencia de los eventos de Google Analytics, que si encima lo combinamos con los nuevos frameworks Javascript, como jQuery o Mootools, te permite hacer cosas, que años atrás hubieran resultado imposibles. Próximamente más tips de Google Analytics.
Return to the Mobile Edition.
El posicionamiento CSS es la técnica utilizada para maquetar diseños usando únicamente XHTML y las propiedades CSS. Es el estándar hoy en día y todo sitio web bien maquetado debería usar esta técnica. Las ventajas son muchas, pero entre ellas destaca una mejor separación entre la apariencia y la estructura de la página, un código más semántico y entendible por buscadores, es decir, mejor para SEO, y un tamaño de página resultante inferior, por lo tanto mayor velocidad de carga de la página.
Sigo con Joomla 1.6. Esta vez para hablar de una nueva característica que se va a añadir a Joomla 1.6, la 
Me llamo David Noguera, tengo 23 años y soy Desarrollador/Administrador web.
Puedes encontrar algo más de información en la página