Mide los tiempos de los usuarios con gtag.js

Reducir el tiempo de carga de las páginas puede mejorar la experiencia general del usuario de un sitio. En esta página, se describe cómo enviar información sobre los tiempos del usuario a Google Analytics.

Implementación

Usa el comando event para enviar un evento timing_complete:

gtag('event', 'timing_complete', {<timing_parameters>});

donde <timing_parameters> es uno o más pares parámetro-valor. Separa cada par con una coma. Por ejemplo, este comando envía un evento de sincronización del usuario a Google Analytics indicando que la página web actual tardó 3,549 milisegundos en cargar todas las dependencias externas de JavaScript.

gtag('event', 'timing_complete', {
  'name' : 'load',
  'value' : 3549,
  'event_category' : 'JS Dependencies'
});

Parámetros de tiempos del usuario

En esta tabla, se resumen los parámetros de tiempos del usuario:

Nombre del parámetro Tipo de datos Obligatorio Descripción
name string Es una cadena para identificar la variable que se está registrando (p.ej., 'load').
value integer La cantidad de milisegundos en el tiempo transcurrido que se informa a Google Analytics (p.ej., 20).
event_category string No. Es una cadena para categorizar todas las variables de tiempo del usuario en grupos lógicos (p.ej., 'JS Dependencies').
event_label string No Es una cadena que se puede usar para agregar flexibilidad en la visualización de los tiempos de los usuarios en los informes (p.ej., 'Google CDN').

Medición del tiempo

El evento timing_complete requiere un parámetro value que especifique el tiempo transcurrido en milisegundos. Debes escribir un código que capture este valor.

La manera más fácil de hacerlo es crear una marca de tiempo al comienzo de un período y crear otra marca de tiempo al final de este. A continuación, calcula el tiempo transcurrido entre las marcas de tiempo.

La mayoría de los navegadores modernos admiten la API de Navigation Timing, que incluye métodos en el objeto window.performance para medir el rendimiento de las páginas web mediante datos de tiempo de alta resolución.

En el siguiente ejemplo, se usa el método performance.now(), que muestra la cantidad de tiempo transcurrido desde que la página comenzó a cargarse por primera vez:

// Feature detects Navigation Timing API support.
if (window.performance) {
  // Gets the number of milliseconds since page load
  // (and rounds the result since the value must be an integer).
  var timeSincePageLoad = Math.round(performance.now());

  // Sends the timing event to Google Analytics.
  gtag('event', 'timing_complete', {
    'name': 'load',
    'value': timeSincePageLoad,
    'event_category': 'JS Dependencies'
  });
}

Consideraciones de muestreo

Google Analytics tomará muestras de eventos de tiempo a fin de garantizar una distribución equitativa de los recursos del sistema para esta función.

La tasa a la que se muestrean los eventos de tiempo se determina según la cantidad total de vistas de página recibidas durante el día anterior de la propiedad. En la siguiente tabla, se describe cómo se determina la tasa de muestreo de sincronización:

Recuento total de vistas de página (día anterior) Cantidad máxima de eventos de tiempo que se procesarán
Entre 0 y 1,000 100
Entre 1,000 y 100,000 10% del recuento total de vistas de página
Entre 100,000 y 1,000,000 10,000
Más de 1,000,000 El 1% del recuento total de vistas de página