La última línea del fragmento de medición de JavaScript agrega un comando send a la cola de comandos ga() para enviar una pageview a Google Analytics:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
El objeto que realiza el envío es el servicio de seguimiento programado para su creación en la línea de código anterior, y los datos que se envían son los datos almacenados en esa herramienta de seguimiento.
En esta guía, se describen las diversas maneras de enviar datos a Google Analytics y se explica cómo controlar qué datos se envían.
Éxitos, tipos de hits y el Protocolo de medición
Cuando un rastreador envía datos a Google Analytics, se denomina envío de un hit, y cada hit debe tener un tipo de hit. La etiqueta de Google Analytics envía un hit del tipo pageview; otros tipos de hits incluyen screenview, event, transaction, item, social, exception y timing. En esta guía, se describen los conceptos y métodos comunes a todos los tipos de hits. Puedes encontrar guías individuales para cada tipo de hit en la sección Medición de interacciones comunes del usuario, en el panel de navegación izquierdo.
El hit es una solicitud HTTP, que consta de pares de campo y valor codificados como una cadena de consulta y enviados al Protocolo de medición.
Si tiene abiertas las herramientas para desarrolladores de su navegador cuando carga una página que utiliza analytics.js, podrá ver los hits que se envían en la pestaña de red. Busca solicitudes que se hayan enviado a google-analytics.com/collect.
Qué datos se envían
Cuando se envía un hit al Protocolo de medición, los rastreadores envían todos los campos que están almacenados actualmente y que son parámetros del Protocolo de medición válidos. Por ejemplo, se envían campos como title y location, pero no cookieDomain ni hitCallback.
En algunos casos, querrás enviar campos a Google Analytics para el hit actual, pero no para los hits posteriores. Un ejemplo de esto es una visita al evento en la que los campos eventAction y eventLabel solo son relevantes para el hit actual.
Para enviar campos solo con el hit actual, puedes pasarlos como argumentos al método send. Para enviar datos de campo con todos los hits posteriores, debes actualizar la herramienta de seguimiento con el método set.
Método de envío
Se puede llamar al método send de un rastreador directamente en el objeto de seguimiento o agregando un comando send a la cola de comandos de ga(). Como la mayoría de las veces no tienes una referencia al objeto de seguimiento, se recomienda usar la cola de comandos ga() para enviar datos de seguimiento a Google Analytics.
Usa la cola de comandos de ga()
La firma para agregar un comando send a la cola de comandos ga() es la siguiente:
ga('[trackerName.]send', [hitType], [...fields], [fieldsObject]);
Como se mencionó anteriormente, los valores especificados mediante los parámetros hitType, ...fields y fieldsObject se envían solo para el hit actual. No se almacenan en el objeto de seguimiento ni se envían con los hits posteriores.
Si alguno de los campos pasados con el comando send ya está configurado en el objeto de seguimiento, se usarán los valores pasados en el comando en lugar de los valores almacenados en la herramienta de seguimiento.
Las llamadas al comando send deben especificar un hitType y, según el tipo especificado, también se pueden requerir otros parámetros. Consulta las guías individuales para medir las interacciones comunes del usuario en el panel de navegación izquierdo para obtener más detalles.
La forma más sencilla de usar el comando send, que funciona para todos los tipos de hits, es pasar todos los campos con el parámetro fieldsObject. Por ejemplo:
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: 'cats.mp4'
});
Para mayor comodidad, algunos tipos de hits permiten pasar directamente los campos de uso frecuente como argumentos al comando send. Por ejemplo, el comando send anterior para el tipo de hit "event" podría reescribirse de la siguiente manera:
ga('send', 'event', 'Video', 'play', 'cats.mp4');
Si deseas obtener una lista completa de los campos que se pueden pasar como argumentos para los distintos tipos de hits, consulta la sección "parámetros" de la referencia del método de envío.
Usa un rastreador con nombre
Si usas un rastreador con nombre en lugar del predeterminado, puedes pasar su nombre en la cadena de comandos.
Se llamará al siguiente comando send en el rastreador llamado "myTracker":
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
En el objeto de seguimiento
Si tienes una referencia al objeto de seguimiento, puedes llamar directamente al método send de ese rastreador:
ga(function(tracker) {
tracker.send('event', 'Video', 'play', 'cats.mp4');
});
Saber cuándo se envió el hit
En algunos casos, necesitas saber cuándo se envía un hit a Google Analytics para poder tomar medidas inmediatamente después. Esto es común cuando necesitas registrar una interacción en particular que alejaría a un usuario de la página actual. Muchos navegadores dejan de ejecutar JavaScript en cuanto la página comienza a descargarse, lo que significa que es posible que los comandos de analytics.js para enviar hits quizás nunca se ejecuten.
Un ejemplo de esto es cuando deseas enviar un evento a Google Analytics para registrar que un usuario hizo clic en el botón de envío de un formulario. En la mayoría de los casos, si haces clic en el botón de envío, se comenzará a cargar de inmediato la página siguiente y no se ejecutarán los comandos ga('send', ...).
La solución es interceptar el evento para impedir que la página se descargue. Luego, puedes enviar tu hit a Google Analytics como de costumbre y, una vez que se envíe el hit, puedes volver a enviar el formulario de manera programática.
hitCallback
Si deseas recibir una notificación cuando se termine de enviar un hit, configura el campo hitCallback. hitCallback es una función a la que se llama en cuanto se envía correctamente el hit.
En el siguiente ejemplo, se muestra cómo cancelar la acción de envío predeterminada de un formulario, enviar un hit a Google Analytics y, luego, volver a enviar el formulario con la función hitCallback:
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: function() {
form.submit();
}
});
});
Administra los tiempos de espera
El ejemplo anterior funciona bien, pero tiene un problema grave. Si (por cualquier motivo) la biblioteca analytics.js no se carga, la función hitCallback nunca se ejecutará. Además, si la función hitCallback nunca se ejecuta, los usuarios nunca podrán enviar el formulario.
Cada vez que coloques funcionalidades críticas del sitio dentro de la función hitCallback, siempre debes usar una función de tiempo de espera para controlar los casos en los que no se cargue la biblioteca analytics.js.
En el siguiente ejemplo, se actualiza el código anterior para usar un tiempo de espera. Si transcurre un segundo después de que el usuario hace clic en el botón de envío y no se ejecuta hitCallback, el formulario se vuelve a enviar de todas formas.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call `submitForm` after one second.
setTimeout(submitForm, 1000);
// Keeps track of whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where `hitCallback` fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: submitForm
});
});
Si estás usando el patrón anterior en muchos lugares de tu sitio, probablemente sea más fácil crear una función de utilidad para controlar los tiempos de espera.
La siguiente función de utilidad acepta una función como entrada y muestra una nueva. Si se llama a la función que se muestra antes del tiempo de espera (el tiempo de espera predeterminado es de un segundo), se borra el tiempo de espera y se invoca la función de entrada. Si no se llama a la función que se muestra antes del tiempo de espera, se llama a la función de entrada de todos modos.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
Ahora puedes unir fácilmente todas las funciones de hitCallback con un tiempo de espera para garantizar que tu sitio funcione como se espera, incluso en los casos en que no se envían los hits o no se carga la biblioteca analytics.js.
// Gets a reference to the form element, assuming
// it contains the id attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
ga('send', 'event', 'Signup Form', 'submit', {
hitCallback: createFunctionWithTimeout(function() {
form.submit();
})
});
});
Cómo especificar diferentes mecanismos de transporte
De forma predeterminada, analytics.js elige el método de HTTP y el mecanismo de transporte mediante los cuales enviar hits de forma óptima. Las tres opciones son 'image' (con un objeto Image), 'xhr' (con un objeto XMLHttpRequest) o 'beacon' con el nuevo método navigator.sendBeacon.
Los dos primeros métodos comparten el problema descrito en la sección anterior (donde, a menudo, no se envían hits si se descarga la página). El método navigator.sendBeacon, por el contrario, es una función HTML nueva creada para resolver este problema.
Si el navegador de tu usuario es compatible con navigator.sendBeacon, puedes especificar 'beacon' como el mecanismo transport y no tendrás que preocuparte por configurar una devolución de llamada de hit.
El siguiente código establece el mecanismo de transporte en 'beacon' en los navegadores compatibles.
ga('create', 'UA-XXXXX-Y', 'auto');
// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');
Próximos pasos
A veces, la medición de ciertos tipos de interacciones del usuario puede requerir implementaciones complejas. Sin embargo, en muchos casos, estas implementaciones ya se han desarrollado y puesto a disposición como complementos de analytics.js. En la siguiente guía, se explica cómo usar los complementos analytics.js con la cola de comandos de ga().