Seguimiento automático de descargas de archivos con Google Analytics
miércoles, 6 de abril de 2011
En la línea de nuestros últimos posts sobre automatización, queremos compartir con vosotros un código basado en JQuery para poder realizar el seguimiento automático de descargas de archivos en nuestro sitio web mediante eventos personalizados.
Esta función podemos ubicarla en el propio código HTML de la página o en un archivo aparte (¡acordaros de incluir la librería JQuery!):
Como vemos, el código se lanza siempre que el usuario clique en este caso, en un enlace tipo "a href" y además, esto importante, tenga la clase “pdf” como atributo. Es decir, enlaces del tipo:
¡Y ya está! Así de sencillo. Con esta función ya no tenemos que programar cada uno de los eventos onclick de los enlaces de descarga de archivos. ¡Espero que os haya resultado útil!
Esta función podemos ubicarla en el propio código HTML de la página o en un archivo aparte (¡acordaros de incluir la librería JQuery!):
$(function(){
$('a.pdf').click(function(){
// alert("Se ha clicado en el enlace de descarga de un pdf");
var nombreDocumento = $(this).attr("href");
_gaq.push(['_trackEvent','Descargas','PDF',nombreDocumento]);
});
¿Cómo funciona?Como vemos, el código se lanza siempre que el usuario clique en este caso, en un enlace tipo "a href" y además, esto importante, tenga la clase “pdf” como atributo. Es decir, enlaces del tipo:
... a href="http://www.blogger.com/descargas/archivo.pdf" class="pdf" ...Tened en cuenta que esto es importante, ya que si los enlaces no tuvieran el atributo class o estuvieran definidos de otra manera habría que modificar la función o realizarlo de otra forma.
¡Y ya está! Así de sencillo. Con esta función ya no tenemos que programar cada uno de los eventos onclick de los enlaces de descarga de archivos. ¡Espero que os haya resultado útil!
7 comentarios :
llegas a publicar este post ayer.... y me hubiera ahorrado mucho trabajo ;-)
me apunto esta técnica.
Gracias
Interesante!
Sin embargo, los valores dentro de TrackEvent están invertidos (primero acción, después categoría), no es del todo automático porque hay que agregar la clase pdf a cada enlace y, por último, el hecho de que sea con jquery implica que no sea 100% compatible con los navegadores.
Hace un tiempo modifiqué una solución en javascript (no recuerdo de dónde la saqué) que hace el seguimiento automático de documentos (pdf, xls, doc, etc) y Mailtos.
if (document.getElementsByTagName) {
// Initialize external link handlers
var hrefs = document.getElementsByTagName("a");
for (var l = 0; l < hrefs.length; l++) {
// try {} catch{} block added
try{
//protocol, host, hostname, port, pathname, search, hash
if (hrefs[l].protocol == "mailto:") {
startListening(hrefs[l],"click",trackMailto);
} else if (hrefs[l].hostname == location.host) {
var path = hrefs[l].pathname + hrefs[l].search;
var isDoc =path.match(/\.(?:doc|eps|jpg|png|svg|xls|ppt|pdf|xls|zip|txt|vsd|vxd|js|css|rar|exe|wma|mov|avi|wmv|mp3)($|\&|\?)/);
if (isDoc) {
startListening(hrefs[l],"click",trackExternalLinks);
}
}
}
catch(e){
continue;
}
}
}
function startListening (obj,evnt,func) {
if (obj.addEventListener) {
obj.addEventListener(evnt,func,false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + evnt,func);
}
}
function trackMailto (evnt) {
var href = (evnt.srcElement) ? evnt.srcElement.href : this.href;
var mailto = "/mailto/" + href.substring(7);
if (typeof(pageTracker) == "object") pageTracker._trackPageview(mailto);
}
function trackExternalLinks (evnt) {
var e = (evnt.srcElement) ? evnt.srcElement : this;
while (e.tagName != "A") {
e = e.parentNode;
}
var lnk = (e.pathname.charAt(0) == "/") ? e.pathname : "/" + e.pathname;
if (e.search && e.pathname.indexOf(e.search) == -1) lnk += e.search;
if (e.hostname != location.host) {
return false;
lnk = "/external/" + e.hostname + lnk;
}
if (typeof(pageTracker) == "object") pageTracker._trackPageview(lnk);
}
Vale aclarar que el script anterior sólo funciona con la versión tradicional del tracking code de Google Analytics y que el seguimiento se hace mediante virtual pageviews (cosa que desestimaría totalmente ahora).
No obstante, es muy fácil de modificar :)
Saludos!
Hola!
Gracias por vuestros comentarios.
@Gabriel: Una pena! pero bueno, para la próxima ya lo tienes ;)
@Nico: Los valores no están invertidos, están tratándose como Categoría: Descargas y Acción: PDF. No es una acción en sí, pero sirve perfectamente.
Respecto a lo que comentas de JQuery y compatibilidades con navegadores, como bien dices no es 100% compatible, pero prácticamente. Hay que remontarse a navegadores tipo explorer 5.0 para que no lo sea. Te pongo un enlace oficial de JQuery y su compatibilidad: http://docs.jquery.com/Browser_Compatibility
Además, aunque sí es cierto que cada enlace debe tener su class "pdf" (o el nombre que sea) es también muy fácil de modificar para adaptarlo a cualquier web.
De todas formas tu código es muy interesante si no se desea utilizar jquery, tan sólo tendrías que adaptarlo a la versión nueva de Google Analytics.
Gracias y saludos a tod@s!
Jorge, es cierto lo que mencionas en cuanto a la compatibilidad de Jquery y es por ello que recientemente he estado utilizando exitosamente un script 100% personalizable, tanto en el tipo de extensión de archivo que se desea hacer el seguimiento, como también al tipo de tracking code utilizado en la implementación.
Para su funcionamiento, es necesario incluir el siguiente script en el encabezado de la página a la cual se desea hacer el seguimiento:
$(document).ready(function(){
$("a[href$='.pdf'],a[href$='.doc'],a[href$='.ppt']").click(function(){
var url = $(this).attr("href");
_gaq.push(['_trackEvent', 'Documento', 'Descarga', url]);
});
});
1) El script requiere hacer la llamada a la librería de Jquery (alojada en los servidores seguros de Google):
https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
2) Posteriormente, se ejecuta una función que rastrea los “href” que enlacen a archivos con las extensiones .pdf, .doc o.ppt (se pueden incluir cuantas sean necesarias).
3) Por último, al momento de hacer click en cualquiera de estos enlaces, se ejecutará el método TrackEvent de Google Analytics el cual permitirá el seguimiento automático de todos los documentos visualizados/descargados.
Les dejo un enlace para descargar el script completo:
http://db.tt/KkxGUEg
Saludos!!
Nico Roddz
Nico,
muchas gracias por la aportación!
Está muy bien el script, es otra forma de recorrer los links, comprobando la extensión en lugar del class.
Saludos!
Jorge, acabo de meter GA en la web de un amigo (el amigo informático! el amigo informático!) y este pedazo de script me va a hacer codificar mucho menos.
1 beer 4u!
Genial Paulino!
Me alegra que te haya ayudado :) El amigo informático siempre al pie del cañón!
Publicar un comentario