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:

1. Paramos la acción por defecto ( bien el click del usuario, o bien por ejemplo la acción de enviar el formulario ).
2. Enviamos los datos a Universal Analytics.
3. Utilizamos el hitCallback para una vez que estamos seguros los datos se han enviados continuar con la acción que empezó el usuario.

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.