En esta página se explica cómo enviar datos de tu sitio web a Google Analytics mediante comandos gtag.js.
Enviar datos con el comando event
Una vez que hayas añadido el fragmento global a una página web, usa el comando event para enviar datos a Google Analytics. Por ejemplo, para indicar que un usuario ha iniciado sesión con su cuenta de Google, utiliza el siguiente comando event:
gtag('event', 'login', {'method': 'Google'});
Consulta más información sobre el comando event en la referencia de la API.
Enrutar datos a grupos y propiedades
Puedes enviar un conjunto de información de medición a uno o varios IDs de propiedad de Google Analytics y otro conjunto de información a otros IDs de propiedad. Puedes organizar las propiedades en grupos y enviarles datos.
En el siguiente ejemplo de código se muestra cómo enrutar un evento sign_in a una "agencia" de un grupo que incluye dos propiedades de Google Analytics.
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
Consulta más información sobre cómo agrupar y enrutar datos.
Saber cuándo se ha enviado un evento
En algunos casos, es necesario saber cuándo se ha enviado un determinado evento a Google Analytics para poder realizar las acciones oportunas inmediatamente después. Un ejemplo habitual sería cuando quieres registrar una determinada interacción que hace que los usuarios abandonen una página en concreto. Muchos navegadores dejan de ejecutar JavaScript en cuanto se empieza a cargar la página siguiente, lo que hace que los comandos event de gtag.js nunca se ejecuten.
Esto puede producirse, por ejemplo, cuando se quiere enviar un evento a Google Analytics para registrar que un usuario ha hecho clic en el botón de envío de un formulario. La mayoría de las veces, al hacer clic en el botón de envío se inicia inmediatamente la carga de la siguiente página y no se ejecutan los comandos event.
La solución consiste en interceptar el evento para detener la carga de la página siguiente y poder enviar el evento a Google Analytics. Una vez hecho, puedes enviar el formulario programáticamente.
Implementar funciones de retrollamada de eventos
Puedes implementar una función de retrollamada de eventos a la que se llame en cuanto se envíe un evento.
En el ejemplo siguiente se muestra cómo cancelar la acción de envío predeterminada de un formulario, enviar un evento a Google Analytics y, a continuación, volver a enviar el formulario con la función de retrollamada de eventos:
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
Gestionar los tiempos de espera
El ejemplo anterior tiene un inconveniente: si no se carga la biblioteca gtag.js, la función de retrollamada de eventos no se ejecutará y los usuarios no podrán enviar el formulario.
Cuando incluyas funciones esenciales de sitio en la función de retrollamada de eventos, siempre debes usar una función de tiempo de espera para gestionar los casos en los que la biblioteca gtag.js no se carga.
En el siguiente ejemplo se ha modificado el código anterior para usar un tiempo de espera. Si un segundo después de que el usuario haga clic en el botón de envío no se ejecuta la función de retrollamada de eventos, el formulario se vuelve a enviar igualmente.
// 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);
// Monitors whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where the event callback function 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.
gtag('event', 'signup_form_complete', {
'event_callback': submitForm
});
});
Si utilizas el patrón anterior en muchas partes del sitio, crea una función de utilidad para gestionar los tiempos de espera.
En la siguiente función de utilidad se acepta una función como entrada y se devuelve una nueva función. Si se llama a la función devuelta antes de que termine el tiempo de espera, que es de un segundo de forma predeterminada, se anula el tiempo de espera y se llama a la función de entrada. Si no se llama a la función devuelta antes de que acabe el 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 agrupar fácilmente todas las funciones de retrollamada de eventos con un tiempo de espera para asegurarte de que tu sitio funcione del modo previsto, incluso en los casos en los que los eventos no consigan enviarse o la biblioteca gtag.js no se cargue.
// 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.
gtag('event', 'signup_form', { 'event_callback': {
createFunctionWithTimeout(function() {
form.submit();
})
}});
});
Especificar diferentes mecanismos de transferencia
De forma predeterminada, gtag.js elige el método HTTPS y el mecanismo de transferencia más eficaces para enviar los hits. Hay tres opciones:
- 'image' (con un objeto
Image) - 'xhr' (con un objeto
XMLHttpRequest) - 'beacon' (con el método
navigator.sendBeacon)
Los dos primeros métodos tienen el problema que se ha descrito en la sección anterior; es decir, al descargarse la página, los hits no se envían. El método navigator.sendBeacon resuelve este problema enviando los hits de forma asíncrona al servidor web sin tener que configurar ninguna retrollamada.
En el código siguiente se define el mecanismo de transferencia como 'beacon' en los navegadores que lo admiten:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});