Leyendo Anieto2K me encuentro con una chuleta de Google Analytics en formato PDF. En la chuleta, además de lo típico, hay referencias a blogs recomendados donde sacar información interesante sobre Google Analytics.

Artículos relacionados:

1. Carga lento Google analytics en tu web?
2. Estadísticas de eCommerce para VirtueMart con Google Analytics
3. Chuleta de HTML 5 en Woork

Desde luego espero que no sea así, cada vez con menos resultados orgánicos y más resultados patrocinados. Está claro que és la fórmula más beneficiosa para Google a corto plazo, pero si hace esto, yo dejaré de usarlo, y como yo, supongo que muchísima gente.

Vía Adseok

Artículos relacionados:

1. Como llevar las estadísticas de los comentarios de tu blog con Google Analytics
2. ¿Usa Google “Black Hat SEO” en sus sitios web?
3. Controla las imágenes rotas de tu web con jQuery y Google Analytics

Al igual que las Webmastertools de Google, Microsoft ha lanzado sus herramientas para webmasters de Bing. Muy recomendable configurarlas adecuadamente, ya que parece que Bing va a ser un serio contendiente para Google, ahora que va a ser el motor de busquedas de Yahoo. Fernando Tellado nos proporciona más información.

Artículos relacionados:

1. Lectura recomendada: lista de herramientas útiles para desarrolladores CSS
2. Chuleta de Google Analytics en PDF
3. jQuery tools, colección de herramientas para jQuery

El seguimiento de eventos en Google Analytics es una herramienta muy potente y útil. En esta ocasión la he implementado en el blog como prueba para llevar las estadísticas de los comentarios que se van recibiendo. La finalidad es curiosear con la herramienta, conocerla un poco más y comprobar el comportamiento de los lectores de nosolocodigo.

Para gestionar el control de eventos, he creado la categoría Blog, y la acción Comentario. El Label es la URL de la página donde se realiza el comentario, de esta forma, cuando vaya a contenido > Seguimiento de eventos, podré ordenar los resultados por número de comentarios por artículo.

Para implementarlo, he utilizado jQuery, aunque sería muy sencillo hacerlo con otra librería o incluso sin ninguna. Como utilizo WordPress, me he dirijído a los ficheros del theme, y he abierto el fichero comments.php, donde se encuentra el código necesario para enviar comentarios. Al abrirlo, me encuentro con algo como lo que se muestra a continuación.

<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">;

<?php if ( $user_ID ) : ?>
<p>
    Has ingresado como <a id="url" href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php">
<?php echo $user_identity; ?></a>.
    <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="Salir de esta cuenta">Salir</a>
</p>

<?php else : ?>
<p>
    <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
    <label for="author"><small>Nombre <?php if ($req) echo "(Requerido)"; ?></small></label></p>
<p>
    <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
    <label for="email"><small>Email (No será publicado) <?php if ($req) echo "(requerido)"; ?></small></label>
</p>
<p>
    <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
    <label for="url"><small>Website o Blog</small></label>
</p>
<?php endif; ?>
<p>
    <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
</p>
<p>
    <input name="submit" type="submit" id="submit" tabindex="5" value="Enviar Comentario" />
    <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>

<?php do_action('comment_form', $post->ID); ?>
</form>

El input de tipo submit que se encuentra al final del formulario es el encargado de enviar la información del formulario al servidor. Para interceptar el evento click, introduzco el siguiente código de jQuery, que define un handler que avisa a Google Analytics para que se registre el evento. El código se muestra a continuación.

jQuery('#commentform input[type = submit]').click(function(){
      pageTracker._trackEvent('Blog' , 'Comentario' , document.location.pathname,document.getElementById('comment').value.length  );
});

Explicación:
El método _trackEvent admite 4 parámetros:

1. Nombre de la categoría.
2. Nombre de la acción.
3. Nombre de la etiqueta. El pathname de la URL.
4. Valor numérico del evento, en este caso el número de caracteres que contiene el comentario.

Con esto ya se empezarán a registrar todos los comentarios en Google Analytics. Ahora vamos a ver que datos obtenemos.

Cuando entramos a Google Analytics, vamos a Contenido > Seguimiento de eventos. Después pulsamos sobre Categorías y seleccionamos la categoría Blog. En la categoría Blog seleccionamos la acción Comentario, y se muestra algo como lo que se puede ver en la imagen.

Después, si quieres puedes definir un segmento avanzado para que se filtren las visitas que hayan hecho un comentario y poder realizar informes más precisos. Una vez realizado el segmento avanzado, si pulsas sobre Panel, se verá algo como lo siguiente.

Ahora, si vas a Usuarios, puedes obtener más información sobre los usuarios que comentan en tu blog. Los datos se empiezan a mostrar a partir del día 10 de Septiembre, como se puede ver en el gráfico, día en que puse el código de seguimiento.

Datos de los usuarios por ubicación

Datos de los usuarios por ubicación en España

Como curiosidad decir que el 100% de las personas que comentan aquí usa Firefox. El 86% usa Windows , el resto Linux.

Artículos relacionados:

1. Estadísticas de eCommerce para VirtueMart con Google Analytics
2. Seguimiento de eventos con el API de Google Analytics
3. Controla las imágenes rotas de tu web con jQuery y Google Analytics

Reconozco que el título es un poco sensacionalista, pero es que me ha hecho gracia lo que he visto. Matt Cutts, el jefe del equipo de cálidad en busquedas de Google, famoso por que es cara visible de Google y suele publicar muchos consejos en forma de videos sobre buenas prácticas en posicionamiento para Google, publicó hace poco un video en el que decía que no hay que usar técnicas de sustitución CSS en los logos para indicar el texto del logo, ya que esto podría ser interpretado como spam por Google. La buena práctica es incluir una etiqueta img con un atributo alt, que Google puede leer perfectamente. Aquí dejo el video para que veáis que no miento.

Básicamente dice que usar técnicas CSS para esconder el texto del logo es algo un poco turbio y que puede ser considerado como spam. Mucho mejor usar una etiqueta img. Hasta aquí todo claro y lógico.

Lo que no me parece tan lógico es que Google vaya predicando esto y luego en sus aplicaciones haga justamente lo que desaconseja. Y es que me lleve una sorpresa cuando nada más acabar de ver el video abro mi cuenta de FeedBuner y veo que justamente están usando la misma técnica que Matt Cutts desaconseja.

Lo que están haciendo es básicamente utilizar un text-indent de -5000 para esconder el texto del h1. Es una tontería y lógicamente no creo que Google se dedique a hacer “Black Hat SEO”, no creo que lo necesite, pero me ha parecido curioso que la todopoderosa Google se contradiga.

Espero que no me sancione Google por esto, jeje.

Artículos relacionados:

1. Carga lento Google analytics en tu web?
2. Controla las imágenes rotas de tu web con jQuery y Google Analytics
3. Completo analizador SEO online

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.

Artículos relacionados:

1. Como llevar las estadísticas de los comentarios de tu blog con Google Analytics
2. Controla las imágenes rotas de tu web con jQuery y Google Analytics
3. Chuleta de Google Analytics en PDF

Leyendo Xyberneticos me he vuelto a encontrar con otra estupenda herramienta online , en este caso para saber quien enlaza a tu sitio web.

La aplicación se llama LinkDiagnosis presenta un informe muy completo con los enlaces entrantes al sitio, así como el pagerank de estos enlaces, URLs más enlazadas, etc…

Hasta permite instalar una extensión de firefox para acceder a los informes más rápido.

Artículos relacionados:

1. Completo analizador SEO online
2. SpriteMe, herramienta para crear CSS Sprite fácilmente
3. CSS Redundancy Checker, herramienta útil para depurar tus hojas de estilos CSS

Leyendo PuntoGeek me he encontrado con una útil aplicación online que nos muestra cuanta gente nos tiene apuntada en su del.icio.us y por que tags.

Esta herramienta puede ser muy útil para medir el impacto de una web en esta red social y comprobar lo populares que somos de cara a los usuarios.

Una herramienta muy útil.

Artículos relacionados:

1. Herramienta para saber quien te enlaza: Linkdiagnosis
2. Completo analizador SEO online
3. Seguimiento de eventos con el API de Google Analytics