Enviar datos a Google Analytics con gtag.js

En esta guía se explica cómo enviar datos de tu sitio web a Google Analytics mediante gtag.js.

Enviar datos con el comando event

Una vez que hayas instalado el fragmento global en tu sitio web, utiliza el comando event para enviar datos a Google Analytics. Por ejemplo, para registrar un evento de inicio de sesión en Google Analytics, utiliza el siguiente comando event:

gtag('event', 'login');

El comando event tiene esta sintaxis:

gtag('event', 'event_name', {
  // Event parameters
  'parameter_1': 'value_1',
  'parameter_2': 'value_2',
  // ...
});

Para obtener una descripción detallada del comando event, consulta Enviar eventos. Si deseas obtener una descripción detallada de los parámetros de un evento de Google Analytics, consulta Parámetros de evento.

Especificar los grupos y las propiedades que recibirán los datos

Al enviar datos a Google Analytics, puedes indicar los grupos o las propiedades que los recibirán. Un grupo contiene una o más propiedades.

Definir grupos

Antes de enviar datos a un grupo, primero debes definir tanto el grupo como los ID de seguimiento de las propiedades asociadas.

Definir grupos default

Los grupos default, que contienen una o más propiedades de Google Analytics, se definen de la siguiente manera:

gtag('config', 'GA_TRACKING_ID');

Este código equivale a:

gtag('config', 'GA_TRACKING_ID', {'groups': 'default'});

Por ejemplo, en el código siguiente se define un grupo default, el cual contiene dos propiedades de Google Analytics:

gtag('config', 'GA_TRACKING_ID_1');
gtag('config', 'GA_TRACKING_ID_2');

Este código equivale a:

gtag('config', 'GA_TRACKING_ID_1', {'groups': 'default'});
gtag('config', 'GA_TRACKING_ID_2', {'groups': 'default'});

Al definir un grupo default, gtag.js envía automáticamente una página vista a las propiedades del grupo.

Definir grupos no predeterminados

Los grupos no predeterminados, que contienen una o más propiedades de Google Analytics, se definen de la siguiente manera:

gtag('config', 'GA_TRACKING_ID', {'groups': 'group_name'});

Por ejemplo, en el código siguiente se define el grupo access, el cual contiene dos propiedades de Google Analytics:

gtag('config', 'GA_TRACKING_ID_1', {'groups': 'access'});
gtag('config', 'GA_TRACKING_ID_2', {'groups': 'access'});

Al definir un grupo no predeterminado, gtag.js envía automáticamente una página vista a las propiedades del grupo.

Enviar datos a un grupo predeterminado

Para enviar datos al grupo default, utiliza el siguiente comando event:

gtag('event', 'event_name', {
  'parameter_1': 'value_1',
  'parameter_2': 'value_2',
  // ...
});

Por ejemplo:

gtag('event', 'sign_up', {'method': 'Google'});

Enviar datos a un grupo no predeterminado

Para enviar datos a un grupo no predeterminado, indica el nombre del grupo como el valor del parámetro send_to:

gtag('event', 'event_name', {
  'send_to': 'group_name',
  'parameter_1': 'value_1',
  'parameter_2': 'value_2',
  // ...
});

Por ejemplo:

gtag('event', 'sign_up', {
  'send_to': 'access',
  'method': 'Google'
});

Enviar datos a varios grupos

Para enviar datos a propiedades de Google Analytics que pertenecen a dos o más grupos, indica los nombres de los grupos como los valores del parámetro send_to:

gtag('event', 'event_name', {
  'send_to': ['group_name_1', 'group_name_2', ... ],
  'parameter_1': 'value_1',
  'parameter_2': 'value_2',
  // ...
});

Por ejemplo:

gtag('event', 'sign_up', {
  'send_to': ['default', 'group_1', 'group_2'],
  'method': 'Google'
});

Enviar datos a propiedades específicas

Para enviar datos a propiedades específicas de Google Analytics, indica los ID de seguimiento de las propiedades como valores del parámetro send_to:

gtag('event', 'event_name', {
  'send_to': ['GA_TRACKING_ID_1', 'GA_TRACKING_ID_2', ...],
  'parameter_1': 'value_1',
  'parameter_2': 'value_2',
  // ...
});

Por ejemplo:

gtag('event', 'sign_up', {
  'send_to': ['GA_TRACKING_ID_1', 'GA_TRACKING_ID_2'],
  'method': 'Google'
});

Enviar datos a grupos y propiedades específicos

Para enviar datos a grupos y propiedades específicos, indica los nombres de los grupos y los ID de seguimiento de las propiedades como valores del parámetro send_to:

gtag('event', 'event_name', {
  'send_to': ['group_name_1', 'group_name_2', ..., 'GA_TRACKING_ID_1', 'GA_TRACKING_ID_2', ...],
  'parameter_1': 'value_1',
  'parameter_2': 'value_2',
  // ...
});

Por ejemplo:

gtag('event', 'sign_up', {
  'send_to': ['default', 'group_1', 'GA_TRACKING_ID_1', 'GA_TRACKING_ID_2'],
  'method': 'Google'
});

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 que a continuación puedas realizar las acciones oportunas. Un ejemplo habitual sería cuando tienes que registrar una determinada interacción que hace que los usuarios abandonen una página en concreto. Muchos navegadores dejan de ejecutar JavaScript en cuanto la página se empieza a descargar, lo que significa que nunca se ejecutarán los comandos de gtag.js que envían eventos.

Un ejemplo de esta situación se produce 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 gtag('event', eventName, eventParameters).

La solución consiste en interceptar el evento para detener la descarga de la página. A continuación, puedes enviar el evento a Google Analytics de la forma habitual y, una vez que se ha enviado, puedes volver a enviar el formulario programáticamente.

Implementar funciones de devolución de llamada de eventos

Si quieres recibir una notificación cuando los eventos se hayan enviado, implementa una función de devolución de llamada de eventos a la cual se llame después de que el evento se haya enviado correctamente.

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 devolución de llamada de eventos:

// 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_complete', {
    'event_callback': function() {
      form.submit();
    }
  });
});

Gestionar los tiempos de espera

El ejemplo anterior funciona correctamente, pero tiene un problema grave. Si, por cualquier motivo, no se carga la biblioteca gtag.js, la función de devolución de llamada de eventos no se ejecutará y los usuarios no podrán enviar el formulario.

Cuando incluyas funciones esenciales de sitio web en la función de devolución de llamada de eventos, siempre debes usar una función de tiempo de espera para gestionar los casos en los que no se cargue la biblioteca gtag.js.

En el siguiente ejemplo se ha actualizado el código anterior para usar un tiempo de espera. Si después de un segundo a partir del momento en que el usuario haya hecho clic en el botón de envío no se ha ejecutado la función de devolución de llamada 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);

  // Keeps track of 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 web, probablemente será más fácil crear 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 incluir fácilmente todas las funciones de devolución de llamada de eventos con un tiempo de espera para asegurarte de que tu sitio web funcione del modo previsto, incluso en los casos en los que no se envíen eventos o no se cargue la biblioteca gtag.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.
  gtag('event', 'signup_form', { 'event_callback': {
    createFunctionWithTimeout(function() {
      form.submit();
    })
  }});
});

Especificar diferentes mecanismos de transferencia

De forma predeterminada, gtag.js elige el método HTTP y el mecanismo de transferencia más eficaces mediante los que se enviarán los hits. 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 tienen el problema que se ha descrito en la sección anterior; es decir, al descargarse la página, los hits no se suelen enviar. Por el contrario, el método navigator.sendBeacon es una nueva función HTML que se ha creado como solución a este problema.

Si los navegadores de los usuarios admiten navigator.sendBeacon, puedes especificar 'beacon' como el mecanismo de transferencia (transport) para no tener que preocuparte de configurar una devolución de llamada de hits.

En el código siguiente se establece el mecanismo de transferencia con un valor de 'beacon' en los navegadores que lo admiten.

gtag('config', 'GA_TRACKING_ID', { 'transport_type': 'beacon'});

Pasos siguientes

Obtén información sobre el seguimiento de páginas y el seguimiento de eventos adicionales.