Universal Analytics (UA) dejará de estar disponible el 1 de julio de 2023, lo que significa que dejará de procesar datos. Las propiedades de Analytics 360 dejarán de funcionar el 1 de octubre de 2023. Migra a Google Analytics 4.

Cómo enviar datos a Google Analytics

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

La última línea del fragmento de medición de JavaScript agrega un comando send a la cola de comandos de ga() para enviar una página vista a Google Analytics:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

El objeto que realiza el envío es el rastreador 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 ese rastreador.

En esta guía, se describen las distintas formas de enviar datos a Google Analytics y se explica cómo controlar qué datos se envían.

Hits, tipos de hits y el Protocolo de medición

Cuando una herramienta de seguimiento envía datos a Google Analytics, esto se denomina 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. Puede encontrar guías individuales para cada tipo de hit en la sección Cómo medir las interacciones de usuario comunes del 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 se envía al Protocolo de medición.

Si tiene abiertas las herramientas para desarrolladores de su navegador cuando carga una página que utiliza analytics.js, puede ver los hits que se envían en la pestaña Red. Busca las solicitudes enviadas 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 y son parámetros de protocolo de medición válidos. Por ejemplo, se envían campos como title y location, pero no cookieDomain y hitCallback.

En algunos casos, deseará enviar campos a Google Analytics para el hit actual, pero no para los hits posteriores. Un ejemplo de esto es un hit del evento en el que los campos eventAction y eventLabel son relevantes solo para el hit actual.

Para enviar solo campos con el hit actual, puedes pasarlos como argumentos al método send. Para que se envíen datos de campo con todos los hits posteriores, debes actualizar la herramienta de seguimiento con el método set.

El método de envío

Se puede llamar directamente al método send de una herramienta de seguimiento en el objeto de seguimiento o si se agrega 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 de 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 de 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 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 que se pasan 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. Si desea obtener más información, consulte las guías individuales para medir las interacciones comunes de los usuarios en la navegación de la izquierda.

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, ciertos tipos de hits 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 visita "event" podría reescribirse de la siguiente manera:

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 hits, consulta la sección "parameters" de la referencia del método de envío.

Cómo usar un rastreador con nombre

Si usas un rastreador con nombre en lugar del rastreador predeterminado, puedes pasar su nombre en la string de comandos.

El siguiente comando send se llamará en el rastreador "myTracker&quot:

ga('myTracker.send', 'event', 'Video', 'play', 'cats.mp4');

En el propio objeto de seguimiento

Si tienes una referencia al objeto de seguimiento, puedes llamar directamente al método send de esa herramienta de seguimiento:

ga(function(tracker) {
  tracker.send('event', 'Video', 'play', 'cats.mp4');
});

Cómo saber cuándo se envió el hit

En algunos casos, debe saber cuándo se envía un hit a Google Analytics, de modo que pueda tomar medidas de inmediato. Esto es común cuando necesitas registrar una interacción en particular que aleje 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 sus comandos analytics.js para enviar hits nunca se ejecuten.

Por ejemplo, puede 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 Enviar, 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 evitar que la página se descargue. Luego, puede enviar su hit a Google Analytics como de costumbre y, una vez que se envíe, puede volver a enviar el formulario de manera programática.

hitCallback

Para recibir una notificación cuando finalice el envío de un hit, configura el campo hitCallback. hitCallback es una función a la que se llama cuando 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 una coincidencia 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();
    }
  });
});

Cómo controlar los tiempos de espera

El ejemplo anterior funciona bien, pero tiene un problema grave. Si (por alguna razón) 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.

Siempre que coloques una funcionalidad importante del sitio en la función hitCallback, siempre debes usar una función de tiempo de espera para controlar los casos en los que no se puede cargar la biblioteca analytics.js.

En el siguiente ejemplo, se actualiza el código anterior para usar un tiempo de espera. Si pasa un segundo después de que el usuario hace clic en el botón de enviar y no se ejecuta hitCallback, 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 usas 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 mostrada 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 hitCallback con un tiempo de espera para asegurarte de que tu sitio funcione como se espera incluso en los casos en que tus hits no se envíen o de que la biblioteca analytics.js nunca 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.
  ga('send', 'event', 'Signup Form', 'submit', {
    hitCallback: createFunctionWithTimeout(function() {
      form.submit();
    })
  });
});

Especificar diferentes mecanismos de transporte

De forma predeterminada, analytics.js elige el método HTTP y el mecanismo de transporte con el cual enviar los hits de manera ó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 métodos anteriores comparten el problema descrito en la sección anterior (donde los hits no suelen enviarse si la página se descarga). Por el contrario, el método navigator.sendBeacon es una nueva función HTML creada para resolver este problema.

Si el navegador de tu usuario admite la navigator.sendBeacon, puedes especificar 'beacon' como el mecanismo transport y no tendrás que preocuparte por establecer una devolución de llamada exitosa.

El siguiente código configura el mecanismo de transporte como '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

A veces, medir ciertos tipos de interacciones del usuario puede requerir implementaciones complejas. Sin embargo, en muchos casos, estas implementaciones ya se desarrollaron y están disponibles como complementos de analytics.js. En la siguiente guía, se explica cómo usar complementos de analytics.js con la cola de comandos de ga().