En esta página, se describe cómo usar los comandos gtag.js para enviar datos desde tu sitio a Google Analytics.
Envía datos con el comando event
Después de agregar el fragmento global a una página web, usa el comando event para enviar datos a Google Analytics. Por ejemplo, usa el siguiente comando event para indicar que un usuario accedió con su Cuenta de Google:
gtag('event', 'login', {'method': 'Google'});
Obtén más información sobre el comando event en la referencia de la API.
Cómo enrutar datos a grupos y propiedades
Puedes enviar un conjunto de información de medición a uno o más IDs de propiedad de Google Analytics y otro conjunto de información a otros IDs de propiedad. Puedes organizar las propiedades en grupos y enrutarles los datos.
En el siguiente ejemplo de código, se muestra cómo enrutar un evento sign_in a un grupo "agencia" 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' });
Obtén más información sobre cómo agrupar y enrutar datos.
Cómo saber cuándo se envió un evento
En algunos casos, necesitas saber cuándo un evento se envió correctamente 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 comienza a cargarse la siguiente página, lo que significa que es posible que los comandos event de gtag.js nunca se ejecuten.
Por ejemplo, puedes 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 inmediatamente la página siguiente antes de que se pueda ejecutar cualquier comando event.
La solución es interceptar el evento para evitar que se cargue la página siguiente y poder enviar el evento a Google Analytics. Después de enviar el evento, envía el formulario de manera programática.
Implementa funciones de devolución de llamada de eventos
Puedes implementar una función de devolución de llamada de evento que se llame tan pronto como se haya enviado correctamente un evento.
En el siguiente ejemplo, se muestra cómo cancelar la acción predeterminada de envío de un formulario, enviar un evento a Google Analytics y, luego, volver a enviar el formulario con la función de devolución de llamada 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();
}
});
});
Cómo administrar los tiempos de espera
El ejemplo anterior presenta una desventaja: si no se carga la biblioteca gtag.js, la función de devolución de llamada del evento nunca se ejecutará y los usuarios nunca podrán enviar el formulario.
Cada vez que coloques funcionalidades críticas del sitio dentro de la función de devolución de llamada del evento, siempre deberías usar una función de tiempo de espera para controlar los casos en los que no se cargue la biblioteca gtag.js.
En el siguiente ejemplo, se mejora el código anterior para usar el tiempo de espera. Si pasa un segundo después de que el usuario hace clic en el botón de envío y la función de devolución de llamada del evento no se ejecuta, 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);
// 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 todo tu sitio, crea 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 llama a 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 todas las funciones de devolución de llamada de eventos con un tiempo de espera para asegurarte de que tu sitio funcione como se espera, incluso en los casos en que los eventos no se envían o la biblioteca gtag.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.
gtag('event', 'signup_form', { 'event_callback': {
createFunctionWithTimeout(function() {
form.submit();
})
}});
});
Especificar diferentes mecanismos de transporte
De forma predeterminada, gtag.js elige el método HTTPS y el mecanismo de transporte mediante el cual se envían los hits de forma óptima. Estas son las tres opciones:
- “image” (con un objeto
Image) - "xhr" (con un objeto
XMLHttpRequest) - 'beacon' (con el método
navigator.sendBeacon)
Los dos primeros métodos comparten el problema descrito en la sección anterior, en la que no se envían hits si se descarga la página. El método navigator.sendBeacon resuelve este problema mediante la transmisión asíncrona de hits al servidor web sin tener que configurar una devolución de llamada de hit.
El siguiente código configura el mecanismo de transporte en 'beacon' para los navegadores compatibles:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});