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.