Aprende a utilizar el hitCallBack en Universal Analytics

Ya desde la versión anterior de Google Analytics ( ga.js ), existe una función que si no está muy documentada si que se podría utilizar, estamos hablando del método hitCallback .

Esta función lo que nos permite ( tal y como claramente indica el nombre de la función es realizar una acción solo y tan solo después de que se haya enviado un hit de forma correcta a los servidores de Google Analytics.

Desde que se publicó Universal Analytics, esta función es todavía más flexible puesto que nos permite de forma sencilla aplicar está función a cualquier tipo de hit de forma independiente. Seguramente en algúna ocasión habremos leído posts o visto plugins para hacer seguimiento de enlaces salientes ( eventos onClick o onMousedown ), o cuando se envíe un formulario ( evento onSubmit ) , pero a la hora de implementarlos también se nos habrá dado la situación de que tal vez el usuario llegué a la página de destino antes de que se lleguen a enviar los datos de forma correcta a Google Analytics, perdiendo con ellos estos datos.

Aquí es donde entra en escena la función hitCallback, puesto que nos va a permitir saber cuando se han terminado realmente de enviar los hits y con ello una manera de poder asegurarnos de que siempre se envíen los datos.

El funcionamiento sería el siguiente:

Como ejemplo os pongo un pequeño fragmento de código que se encargaría de todo esto, y que os servirá de guía para cualquier otra implementación más avanzada que queráis realizar ( comprobar si el enlace es saliente, etc, etc ). Más abajo comentaremos el script línea por línea:

<script>
function doLink(event,href){
event.preventDefault();
ga('send', 'pageview', {
'page': location.pathname,
'hitCallback': function() {
location.href = href;
}
});
}
</script>
<a href="http://www.google.es/" onClick="doLink(event,this.href);">TEST</a>

Vamos a comentar paso a paso lo que sucede:

<a href="http://www.google.es/" onClick="doLink(event,this.href);">TEST</a>

Aquí tan solo tenemos un enlace ( href ), al cual le estamos diciendo que cualquier un  usuario pinche en el enlace ( evento onclick ), lance la función doLink(), con los parémetros del evento como primer parámetro y en enlace en el cual ha hecho click el usuario. Entonce veamos que pasa después.

event.preventDefault();

event.preventDefault(). Lo que va a hacer es detener la acción por defecto que realizaría el nevagador en el evento en cuestión, en este caso el evento sería el click y lo que haría es llevarnos al enlace que tengamos. Pues ahora mismo esto no sucederá y no redigirá al usuario, no nos preocupemos esto lo forzaremos  depués para que el usuario termine yendo a donde marca el enlace :)

ga('send', 'pageview', {
'page': location.pathname,
'hitCallback': function() {
location.href = href;
}
});

Aquí tenemos lo que sería el _trackPageview de toda la vida en formato Universal Analytics. Al estar pasándole unos parámetros deberemos pasarle obligatoriamente el parámetro 'page' , o no nos recogerá bien los datos, por ello le pasamos la URI actual del usuario ( location.href ), o bien podríamos incluso personalizarla.

Y seguido le estamos pasando el hitCallback, ¿qué quiere decir esto? , le estamos diciendo a Universal Analytics, mira cuando hayas enviado el hit de la página vista, haz esto. Por lo tanto una vez los datos se hayan enviado vamos a redigir al usuario a su página de destino.

Pues es tan sencillo como esto, de esta forma, el usuario no se redigirá al enlace hasta que los datos e hayan enviado correctamente. Por supuesto esto es extrapolable al enviar un evento, social hit, hit de ecommerce, o cualquier otro tipo de hit disponible en Universal Analytics, así como a cualquier otro evento de JavaScript ( Form submits, etc ).

A partir de ahora podremos estar seguros que los datos se van a enviar cuando el usuario realice una acción concreta.