La última línea del fragmento de código de medición de JavaScript agrega un comando send a la cola de comandos ga() para enviar una vista de página a Google Analytics:
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
El objeto que realiza el envío es el rastreador cuya creación se programó en la línea de código anterior, y los datos que se envían son los datos almacenados en ese rastreador.
Esta guía describe las diversas formas de enviar datos a Google Analytics y explica cómo controlar qué datos se envían.
Hits, tipos de hits y el protocolo de medición
Cuando un rastreador envía datos a Google Analytics, se le llama enviar un hit y cada hit debe tener un tipo de hit. La etiqueta de Google Analytics envía un hit de tipo pageview ; otros tipos de visitas incluyen screenview , event , transaction , item , social , exception y timing . Esta guía describe los conceptos y métodos comunes a todos los tipos de visitas. Las guías individuales para cada tipo de visita se pueden encontrar en la sección Medición de las interacciones comunes del usuario en la navegación del lado 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 de desarrollo de su navegador cuando carga una página que usa analytics.js, puede ver los hits que se envían en la pestaña de red. Busque las solicitudes enviadas a google-analytics.com/collect .
Qué datos se envían
Al enviar un hit al Protocolo de medición, los rastreadores envían todos los campos que están actualmente almacenados y son parámetros válidos del Protocolo de medición . Por ejemplo, se envían campos como title y location , pero no cookieDomain ni hitCallback .
En algunos casos, desea enviar campos a Google Analytics para el hit actual pero no para los hits posteriores. Un ejemplo de esto es un hit de evento donde los campos eventAction y eventLabel son relevantes solo para el hit actual.
Para enviar campos solo con el hit actual, puede pasarlos como argumentos al método send . Para que los datos de campo se envíen con todos los resultados posteriores, debe actualizar el rastreador utilizando el método set .
El método de envío
El método send de un rastreador se puede llamar directamente en el propio objeto rastreador o agregando un comando send a la cola de comandos ga() . Dado que la mayoría de las veces no tiene una referencia al objeto de seguimiento, el uso de la cola de comandos ga() es la forma recomendada de enviar datos de seguimiento a Google Analytics.
Usando la cola de comandos 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 a través de 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 visitas posteriores.
Si alguno de los campos pasados con el comando send ya está establecido en el objeto de seguimiento, se utilizarán los valores pasados en el comando en lugar de los valores almacenados en el rastreador.
Las llamadas al comando send deben especificar un hitType y, según el tipo especificado, también se pueden requerir otros parámetros. Consulte las guías individuales para medir las interacciones comunes de los usuarios en la navegación del lado 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 usando el parámetro fieldsObject . Por ejemplo:
ga('send', {
hitType: 'event',
eventCategory: 'Video',
eventAction: 'play',
eventLabel: 'cats.mp4'
});
Por conveniencia, ciertos tipos de aciertos permiten que los campos de uso común se pasen directamente como argumentos al comando send . Por ejemplo, el comando send anterior para el tipo de hit "evento" podría reescribirse como:
ga('send', 'event', 'Video', 'play', 'cats.mp4');
Para obtener una lista completa de los campos que se pueden pasar como argumentos para los distintos tipos de visitas, consulte la sección "parámetros" de la referencia del método de envío .
Usar un rastreador con nombre
Si está utilizando un rastreador con nombre en lugar del rastreador predeterminado, puede pasar su nombre en la cadena de comando.
Se llamará al siguiente comando send en el rastreador llamado "myTracker":
ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');
En el propio objeto rastreador
Si tiene una referencia al objeto rastreador, puede llamar directamente al método send de ese rastreador:
ga(function(tracker) {
tracker.send('event', 'Video', 'play', 'cats.mp4');
});
Saber cuándo se ha enviado el golpe
En algunos casos, necesita saber cuándo se envía un hit a Google Analytics, para que pueda tomar medidas inmediatamente después. Esto es común cuando necesita registrar una interacción particular que alejaría a un usuario de la página actual. Muchos navegadores dejan de ejecutar JavaScript tan pronto como la página comienza a descargarse, lo que significa que es posible que sus comandos de analytics.js para enviar hits nunca se ejecuten.
Un ejemplo de esto es cuando desea 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, al hacer clic en el botón Enviar, se comenzará a cargar inmediatamente la siguiente página y no se ejecutarán los comandos ga('send', ...) .
La solución a esto es interceptar el evento para evitar que la página se descargue. A continuación, puede enviar su hit a Google Analytics como de costumbre y, una vez que se haya enviado el hit, puede volver a enviar el formulario mediante programación.
hitCallback
Para recibir una notificación cuando se termine de enviar un hit, configure el campo hitCallback . hitCallback es una función a la que se llama tan pronto como el hit se ha enviado con éxito.
El siguiente ejemplo 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 usando 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();
}
});
});
Manejo de tiempos de espera
El ejemplo anterior funciona bien, pero tiene un problema serio. Si (por cualquier motivo) la biblioteca analytics.js no se carga, la función hitCallback nunca se ejecutará. Y si la función hitCallback nunca se ejecuta, los usuarios nunca podrán enviar el formulario.
Cada vez que coloque la funcionalidad crítica del sitio dentro de la función hitCallback , siempre debe usar una función de tiempo de espera para manejar los casos en los que la biblioteca analytics.js no se carga.
El siguiente ejemplo 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 hitCallback no se ha ejecutado, el formulario se vuelve a enviar de todos modos.
// 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á utilizando el patrón anterior en muchos lugares de su sitio, probablemente sea más fácil crear una función de utilidad para manejar los tiempos de espera.
La siguiente función de utilidad acepta una función como entrada y devuelve una nueva función. Si se llama a la función devuelta antes del período de tiempo de espera (el tiempo de espera predeterminado es de un segundo), borra el tiempo de espera e invoca la función de entrada. Si la función devuelta no se llama antes del período de tiempo de espera, la función de entrada se llama 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 puede ajustar fácilmente todas las funciones hitCallback con un tiempo de espera para asegurarse de que su sitio funcione como se espera, incluso en los casos en que sus visitas no se envían o la biblioteca analytics.js nunca se carga.
// 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();
})
});
});
Especificación de diferentes mecanismos de transporte
De forma predeterminada, analytics.js elige el método HTTP y el mecanismo de transporte con los que enviar hits de manera óptima. Las tres opciones son 'image' (usando un objeto Image ), 'xhr' (usando un objeto XMLHttpRequest ) o 'beacon' usando el nuevo método navigator.sendBeacon .
Los dos métodos anteriores comparten el problema descrito en la sección anterior (donde los hits a menudo no se envían si la página se está descargando). El método navigator.sendBeacon , por el contrario, es una nueva función HTML creada para resolver este problema.
Si el navegador de su usuario es compatible con navigator.sendBeacon , puede especificar 'beacon' como mecanismo transport y no tener que preocuparse por establecer una devolución de llamada de éxito.
El siguiente código establece el mecanismo de transporte en 'beacon' en los navegadores que lo admiten.
ga('create', 'UA-XXXXX-Y', 'auto');
// Updates the tracker to use `navigator.sendBeacon` if available.
ga('set', 'transport', 'beacon');
Próximos pasos
Medir ciertos tipos de interacciones del usuario a veces puede requerir implementaciones complejas. Sin embargo, en muchos casos, estas implementaciones ya se han desarrollado y están disponibles como complementos de analytics.js. La siguiente guía explica cómo usar los complementos de analytics.js con la cola de comandos ga() .