Mide el rendimiento con web-vitals.js, Google Analytics y BigQuery

1. Antes de comenzar

Actividades

En este codelab, realizarás las siguientes acciones:

  • Vincular tu propiedad Google Analytics 4 a BigQuery
  • Agregar la biblioteca de web-vitals a una página web
  • Preparar y enviar los datos de web-vitals a Google Analytics
  • Consultar tus datos de Métricas web esenciales en BigQuery
  • Crear un panel en Google Data Studio para visualizar tus datos de Métricas web esenciales

Requisitos

  • Una cuenta de Google Analytics con una propiedad GA4
  • Una cuenta de Google Cloud
  • Un navegador web basado en Chromium, como Google Chrome o Microsoft Edge (para obtener más información sobre por qué necesitas un navegador web basado en Chromium, consulta Compatibilidad con navegadores)
  • El editor de texto que prefieras, como Sublime Text o Visual Studio Code
  • Algún lugar en el que se alojan las páginas de prueba, a fin de ver cómo funciona la biblioteca de web-vitals (puedes usar un servidor local para publicar páginas web estáticas o alojar tus páginas de prueba en GitHub)
  • Un sitio público en el que puedes implementar tu código de análisis (si tienes un código en producción, los ejemplos de BigQuery y Data Studio al final de este codelab se vuelven más comprensibles)
  • Conocimiento de HTML, CSS, JavaScript y Herramientas para desarrolladores de Chrome

Antes de comenzar

Primero, vincula Google Analytics 4 a BigQuery para asegurarte de que puedes comenzar a analizar el rendimiento apenas se publique tu código.

Sigue los pasos del Centro de ayuda de Google Analytics para vincular tu propiedad GA4 a BigQuery.

Ahora que tu propiedad Google Analytics está lista para exportar datos de eventos a BigQuery, integra la biblioteca de web-vitals en tu sitio.

2. Agrega la biblioteca de web-vitals y gtag a una página web

Primero, agrega la biblioteca de web-vitals a una página web.

  1. Abre la plantilla de una página donde quieras agregar la biblioteca de web-vitals. En este ejemplo, usaremos una página simple:

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>
</body>
</html>
  1. Pega el código fuente en un archivo en blanco en tu editor de texto.
  2. Guarda el archivo de forma local como basic.html.
  3. Copia esta secuencia de comandos del módulo y pégala justo antes de la etiqueta de cierre de </body>. Esta secuencia de comandos carga la biblioteca de web-vitals desde una red de distribución de contenidos.

basic.html

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>

El código resultante debería verse así.

basic.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Web Vitals Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <p><img style="max-width: 360px" src="https://placekitten.com/g/3840/2160" alt="Kitten" /></p>
  <p>Text below image</p>

<script type="module">
  import {getCLS, getFID, getLCP} from 'https://unpkg.com/web-vitals?module';

  getCLS(console.log);
  getFID(console.log);
  getLCP(console.log);
</script>
</body>
</html>
  1. Guarda el archivo.

Agregaste la biblioteca de web-vitals a la página web.

3. Mide las Métricas web esenciales de la página web

Las Métricas web esenciales son una medición de las experiencias de usuarios reales, tal como se captura en Chrome o la biblioteca de web-vitals en los navegadores Chromium. Cuando lanzas web-vitals a producción, aparece una amplia variedad de resultados basados en las velocidades de conexión de los usuarios, la alimentación del dispositivo y la manera en la que interactúan con tu sitio. Para demostrar las capacidades de la biblioteca de web-vitals, simularemos una experiencia del usuario con una conexión lenta.

  1. Abre el archivo guardado en tu navegador web.
  2. Haz clic con el botón derecho en la página web.
  3. Haz clic en Inspeccionar para abrir las Herramientas para desarrolladores de Google Chrome.

1d60156133044215.png

  1. Haz clic en la pestaña Consola > Configuración de la consola b5c716ebfacfd86.png.

a310e2b6e03891a1.png

  1. Selecciona la casilla de verificación Guardar el registro para hacer que los registros persistan cuando actualices la página web.

cdfbcd3315aa45cd.png

  1. Haz clic en la pestaña Red > En línea > 3G lenta para simular una conexión de red lenta.

b1fab3d167d032f0.png

  1. Haz clic en la pestaña Consola.
  2. Haz clic en cualquier parte de la página web para forzar la impresión de las métricas de Procesamiento de imagen con contenido más grande (LCP) y Retraso de primera entrada (FID).
  3. Haz clic en Volver a cargar esta página acaaa8c0fdd33b1.png para forzar la impresión de la métrica de Cambio de diseño acumulado (CLS).

e18b530e48108a4.png

  1. Haz clic en la pestaña Red > En línea > 3G rápida para simular una conexión de red rápida.
  2. Haz clic en la pestaña Consola.
  3. Haz clic en cualquier parte de la página web para volver a forzar la impresión de las métricas de LCP y FID.

e5d5ca555ded9f7a.png

  1. Haz clic en Volver a cargar esta página acaaa8c0fdd33b1.png para volver a forzar la impresión de la métrica de CLS.

e8bde4594a01021b.png

Eso es todo. Mediste las Métricas web esenciales de la página web.

4. Explora los datos de web-vitals con mayor detalle

Para cada uno de los eventos de Métricas web esenciales que mides, existe un host de información disponible en los datos que se muestran, el cual puedes utilizar para depurar los cuellos de botella del rendimiento. Cada evento de web-vitals contiene un array de entries con información sobre los eventos que contribuyen al valor actual de la métrica.

CLS entries

Cuando se expande la propiedad de entries del objeto registrado por getCLS(), se muestra una lista de las entradas LayoutShift. Cada LayoutShift contiene una propiedad de value que refleja la puntuación de cambio de diseño y un array de sources que podemos usar para ver qué elementos se cambiaron.

355f0ff58e735079.png

En este ejemplo, se produjeron dos cambios de diseño y se movió un elemento h1 de la página. La propiedad currentRect nos indica dónde está el elemento ahora y el elemento previousRect nos indica dónde solía estar.

LCP entries

Cuando se expande la propiedad de entradas del objeto registrado por getLCP(), se muestra qué elementos fueron candidatos para el Procesamiento de imagen con contenido más grande antes de informar el valor final.

737ebf826005dbe7.png

En este ejemplo, el array de entries contiene una lista de todos los candidatos de LCP en orden cronológico. En este caso, primero se renderiza un elemento h1 y, luego, un elemento img. El elementoimg fue el Procesamiento de imagen con contenido más grande. El elemento de LCP informado es siempre el último elemento del array.

FID entries

Cuando expandes la propiedad entries del objeto registrado por getFID(),, se muestra un array que contiene la entrada PerformanceEventTiming para la primera entrada del usuario en la página.

a63ef33575c3218d.png

La propiedad name te indica qué tipo de entrada del usuario activó el temporizador para la disponibilidad del subproceso principal. El elemento value que informa web-vitals es el retraso entre las propiedades startTime y processingStart de la entrada PerformanceEventTiming, convertida de microsegundos a milisegundos. En este caso, el FID medido es de 2 milisegundos.

5. Prepara y envía datos de web-vitals a Google Analytics 4

Para poder enviar datos de web-vitals a Google Analytics 4, deben convertirse a un formato que pueda obtener GA4. Además, agregarás algunas funciones útiles que extraen información de diagnóstico valiosa.

Genera un selector para ayudar a identificar el nodo de destino de entrada

Primero, agrega una función al bloque de secuencia de comandos que genera una representación de string del nodo y su lugar en el DOM, en un formato similar a un selector CSS. El resultado de esta función ayuda a identificar qué elementos de la página son responsables de tus valores de CWV.

diagnostics.html

function getSelector(node, maxLen = 100) {
 let sel = '';
 try {
   while (node && node.nodeType !== 9) {
     const part = node.id ? '#' + node.id : node.nodeName.toLowerCase() + (
       (node.className && node.className.length) ?
       '.' + Array.from(node.classList.values()).join('.') : '');
     if (sel.length + part.length > maxLen - 1) return sel || part;
     sel = sel ? part + '>' + sel : part;
     if (node.id) break;
     node = node.parentNode;
   }
 } catch (err) {
   // Do nothing...
 }
 return sel;
}

Recupera la información de LayoutShift

Para registrar cada cambio de diseño que ocurra, es probable que se genere una cantidad excesiva de datos. Las siguientes funciones se enfocan solo en la entrada de LayoutShift más grande y en la LayoutShiftSource más grande dentro de ella. Esto te permite enfocar tus optimizaciones en las causas más importantes de los cambios de diseño en tu sitio. A medida que identifiques las causas de los cambios de diseño y encuentres formas de minimizarlos, la fuente del cambio de diseño que verás en tus informes cambiará para mostrar la peor fuente de error nueva.

diagnostics.html

function getLargestLayoutShiftEntry(entries) {
 return entries.reduce((a, b) => a && a.value > b.value ? a : b);
}

function getLargestLayoutShiftSource(sources) {
 return sources.reduce((a, b) => {
   return a.node && a.previousRect.width * a.previousRect.height >
       b.previousRect.width * b.previousRect.height ? a : b;
 });
}
  • getLargestLayoutShiftEntry() solo muestra la entrada de cambio de diseño más grande a lo largo del ciclo de vida de la vista de página.
  • getLargestLayoutShiftSource() solo muestra la fuente del cambio de diseño más grande dentro de esa entrada.

Determina si el FID ocurrió antes o después de DOMContentLoaded

El evento DOMContentLoaded se lleva a cabo después de que el HTML de la página se carga y analiza por completo, lo que incluye la espera de cualquier carga síncrona, diferida o de secuencias de comandos de módulo (incluidos todos los módulos estáticos). Esta función muestra true si la primera entrada del usuario ocurrió antes del DOMContentLoaded o del false si ocurrió después.

diagnostics.html

function wasFIDBeforeDCL(fidEntry) {
 const navEntry = performance.getEntriesByType('navigation')[0];
 return navEntry && fidEntry.startTime < navEntry.domContentLoadedEventStart;
}

Identifica el elemento objetivo de FID

Otro indicador de depuración potencialmente útil es el elemento con el que se interactuó. Si bien la interacción con el elemento en sí no contribuye al FID (recuerda que el FID es solo la demora de la latencia total del evento), saber con qué elementos interactúan los usuarios puede ser útil para determinar la mejor manera de mejorar el FID.

Para obtener el elemento asociado con el primer evento de entrada, haz referencia a la propiedad target de la entrada first-input:

diagnostics.html

function getFIDDebugTarget(entries) {
  return entries[0].target;
}

Identifica el tipo de evento de entrada de FID

También puede resultar útil capturar qué tipo de evento activó la medición del FID para identificar cómo los usuarios interactúan con tus páginas.

diagnostics.html

function getFIDEventType(entries) {
  return entries[0].name;
}

Estructura la información de depuración para cada CWV

El último paso antes de enviar este código a Google Analytics es estructurar la información de las entradas, incluida la información que muestran las funciones anteriores.

diagnostics.html

function getDebugInfo(name, entries = []) {
  // In some cases there won't be any entries (e.g. if CLS is 0,
  // or for LCP after a bfcache restore), so we have to check first.
  if (entries.length) {
    if (name === 'LCP') {
      const lastEntry = entries[entries.length - 1];
      return {
        debug_target: getSelector(lastEntry.element),
        event_time: lastEntry.startTime,
      };
    } else if (name === 'FID') {
      const firstEntry = entries[0];
      return {
        debug_target: getSelector(firstEntry.target),
        debug_event: firstEntry.name,
        debug_timing: wasFIDBeforeDCL(firstEntry) ? 'pre_dcl' : 'post_dcl',
        event_time: firstEntry.startTime,
      };
    } else if (name === 'CLS') {
      const largestEntry = getLargestLayoutShiftEntry(entries);
      if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
        const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
        if (largestSource) {
          return {
            debug_target: getSelector(largestSource.node),
            event_time: largestEntry.startTime,
          };
        }
      }
    }
  }
  // Return default/empty params in case there are no entries.
  return {
    debug_target: '(not set)',
  };
}

Envía los datos a Google Analytics

Por último, crea una función que tome parámetros del evento web-vitals y los pase a Google Analytics.

diagnostics.html

function sendToGoogleAnalytics({ name, delta, value, id, entries }) {
  gtag('event', name, {
    // Built-in params:
    value: delta, // Use `delta` so the value can be summed.
    // Custom params:
    metric_id: id, // Needed to aggregate events.
    metric_value: value, // Value for querying in BQ
    metric_delta: delta, // Delta for querying in BQ
    // Send the returned values from getDebugInfo() as custom parameters
      ...getDebugInfo(name, entries)
  });
}

Registra la función con cada una de las funciones de web-vitals, que se activa cuando el navegador está listo para medir cada evento:

diagnostics.html

getLCP(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getCLS(sendToGoogleAnalytics);

¡Bien hecho! Ahora enviarás eventos de web-vitals a Google Analytics.

6. Verifica que los datos web-vitals web se propaguen en Google Analytics.

Para asegurarte de que tu propiedad Google Analytics 4 registre tus eventos, haz lo siguiente:

  1. Abre tu propiedad Google Analytics 4 y navega a Informes.

ab1bf51ba70f3609.png

  1. Selecciona Tiempo real.

65a5b8087b09b2a.png

  1. Actualiza la página de prueba varias veces y asegúrate de hacer clic en la página entre actualizaciones para activar los eventos de FID.
  2. Busca la sección Recuento de eventos por nombre de evento en la IU de Descripción general en tiempo real. Deberías ver eventos de LCP, FID y CLS.

f92b276df1c2f6ce.png

  1. Haz clic en el nombre de cualquier evento para ver los parámetros que se pasaron con esos eventos.

8529bd743f121dd9.png

  1. Haz clic en esas claves de parámetros para ver un resumen de los valores que recibió Google Analytics.

f0cf6a3dd607d533.png

Es posible que quieras agregar otros datos a tu información de depuración, como nombres de plantillas de página o eventos de otras páginas que sean relevantes para el FID y que se analizaron con anterioridad en este Codelab. Simplemente, modifica las sentencias return en la función getDebugInfo().

Una vez que estés satisfecho con los datos que provienen de las páginas de prueba, implementa tu nuevo código de Google Analytics para la producción en tu sitio y continúa con el siguiente paso.

7. Consulta los datos en BigQuery

Una vez que tu código de Google Analytics esté activo por algunos días, podrás comenzar a consultar los datos en BigQuery. Primero, verifica que los datos se estén transfiriendo a BigQuery.

  1. Abre Google Cloud Console y selecciona tu proyecto en el menú desplegable de la parte superior de la pantalla.
  2. En el menú de navegación 3cbb0e5fcc230aef.png, en la parte superior izquierda de la pantalla, haz clic en BigQuery debajo del encabezado Analytics.
  3. En el panel Explorador, expande el proyecto para ver el conjunto de datos de Google Analytics. El nombre del conjunto de datos es analytics_ seguido del ID de tu propiedad Google Analytics 4 (p.ej., analytics_229787100).
  4. Si expandes el conjunto de datos, deberías ver una tabla events_. La cifra entre paréntesis es la cantidad de días disponibles para la consulta.

Subconsulta para seleccionar solo los eventos de CWV

Para consultar un conjunto de datos que solo incluye nuestros eventos de CWV, comienza con una subconsulta que seleccione los últimos 28 días de eventos de LCP, CLS y FID. Se busca específicamente el último valor informado para cada ID de evento web-vitals con la clave metric_id a fin de asegurar que no se cuenten los mismos eventos de CWV más de una vez.

# Subquery all Web Vitals events from the last 28 days
WITH web_vitals_events AS (
 SELECT event_name as metric_name, * EXCEPT(event_name, is_last_received_value) FROM
 (
   SELECT *
   , IF (ROW_NUMBER() OVER (
     PARTITION BY (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
     ORDER BY (SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = 'metric_value') DESC
   ) = 1, true, false) AS is_last_received_value
   # Make sure to update your project ID and GA4 property ID here!
   FROM `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
   WHERE event_name in ('CLS', 'FID', 'LCP') AND
     _TABLE_SUFFIX BETWEEN FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 28 DAY)) AND FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY))
  )
  WHERE is_last_received_value
)

Esta es la base de todas las consultas en este conjunto de datos. Tu consulta principal se ejecutará en la tabla temporal web_vitals_events.

Cómo se estructuran los eventos de GA4

Cada dato de evento de Google Analytics 4 se conserva en una columna STRUCT (event_params). Cada uno de los parámetros de evento que pasas a GA4 en tu sitio se representa con su clave y el valor es un STRUCT con una clave para cada tipo de datos posible. En el ejemplo anterior, la clave metric_value podía tener un int_value o un double_value, por lo que se usa la función COALESCE(). Para obtener el debug_target que pasaste antes, selecciona la clave string_value en el debug_target.

...
(SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target
...

Encuentra los elementos y las páginas con peor rendimiento

El debug_target es una string de selector CSS que corresponde al elemento en la página que es más relevante para el valor de la métrica.

Con CLS, debug_target representa el elemento más grande del mayor cambio de diseño que contribuyó al valor de CLS. Si no se cambió ningún elemento, el valor de debug_target será null.

La siguiente consulta menciona las páginas de peor a mejor según su CLS con el percentil 75, agrupado por debug_target:

# Main query logic
SELECT
  page_path,
  debug_target,
  APPROX_QUANTILES(metric_value, 100)[OFFSET(75)] AS metric_p75,
  COUNT(1) as page_views
FROM (
  SELECT
    REGEXP_SUBSTR((SELECT value.string_value FROM UNNEST(event_params) WHERE key = "page_location"), r'\.com(\/[^?]*)') AS page_path,
    (SELECT value.string_value FROM UNNEST(event_params) WHERE key = "debug_target") as debug_target,
    ROUND((SELECT COALESCE(value.double_value, value.int_value) FROM UNNEST(event_params) WHERE key = "metric_value"), 3) AS metric_value,
    *
  FROM web_vitals_events
  WHERE metric_name = 'CLS'
)
GROUP BY 1, 2
# OPTIONAL: You may want to limit your calculations to pages with a
# minimum number of pageviews to reduce noise in your reports.
# HAVING page_views > 50
ORDER BY metric_p75 DESC

1bbbd957b4292ced.png

Si sabes qué elementos de la página cambiarán, debería ser mucho más fácil identificar y solucionar la causa raíz del problema.

Ten en cuenta que es posible que los elementos que se informan aquí no sean los mismos que ves cambiar cuando depuras tus páginas a nivel local. Por eso, es tan importante capturar estos datos en primer lugar. Es muy difícil solucionar problemas que no puedes detectar.

Depura otras métricas

La consulta anterior muestra los resultados para la métrica de CLS, pero se puede usar exactamente la misma técnica con el fin de informar sobre los objetivos de depuración para LCP y FID. Solo reemplaza la cláusula WHERE por la métrica relevante para depurar de la siguiente manera:

# Replace:
# WHERE metric_name = 'CLS'
# With:
WHERE metric_name = 'LCP'

8. Visualiza los resultados de las consultas en Data Studio

BigQuery proporciona una forma rápida de visualizar cualquier resultado de consulta a través de Data Studio. Data Studio es una herramienta de visualización y paneles de datos gratuita. Para visualizar los resultados de tu consulta después de ejecutarla en la IU de BigQuery, haz clic en Explorar datos y selecciona Explorar con Data Studio.

Opción Explorar con Data Studio en BigQuery

Esta acción crea un vínculo directo de BigQuery a Data Studio en la vista de exploración. En esta vista, puedes seleccionar qué campos deseas visualizar, elegir los tipos de gráfico, configurar filtros y crear gráficos ad hoc para realizar análisis visuales rápidos. A partir de los resultados de la consulta anterior, puedes crear este gráfico de líneas para ver la tendencia de los valores de LCP a lo largo del tiempo:

Gráfico de líneas de valores diarios de LCP en Data Studio

Con este vínculo directo entre BigQuery y Data Studio, puedes crear gráficos rápidos a partir de cualquiera de tus consultas y realizar análisis visuales. Sin embargo, si deseas realizar un análisis adicional, considera consultar varios gráficos en un panel interactivo para obtener una vista más integral o poder desglosar los datos. Tener un panel práctico significa que no tienes que escribir consultas y generar gráficos de forma manual cada vez que quieres analizar tus métricas.

Puedes crear un panel en Data Studio con el conector nativo de BigQuery. Para ello, navega a datastudio.google.com, crea una fuente de datos nueva, selecciona el conector de BigQuery y elige el conjunto de datos con el que quieres trabajar:

Usa el conector nativo de BigQuery en Data Studio

9. Materializa datos de métricas web

Cuando creas paneles de datos de eventos de métricas web, como se describió anteriormente, no es eficiente usar el conjunto de datos de exportación de Google Analytics 4 directamente. Debido a la estructura de los datos de GA4 y el procesamiento previo requerido para las métricas web, algunas partes de tu consulta se ejecutan varias veces. Esto crea dos problemas: el rendimiento del panel y los costos de BigQuery.

Puedes usar el modo de zona de pruebas de BigQuery de forma gratuita. Con el nivel de uso gratuito de BigQuery, el primer TB de datos de consultas que se procesan por mes es gratis. Para los métodos de análisis que se mencionan en esta publicación, a menos que uses un conjunto de datos demasiado grande o lo consultes con frecuencia, deberías poder mantenerte dentro de este límite gratuito cada mes. Sin embargo, si tienes un sitio web con mucho tráfico y quieres supervisar las diferentes métricas con regularidad mediante un panel interactivo rápido, te sugerimos procesar previamente y materializar tus datos de métricas web y, al mismo tiempo, usar las funciones de eficiencia de BigQuery, como la partición, el agrupamiento en clústeres y el almacenamiento en caché.

La siguiente secuencia de comandos procesa previamente tus datos de BigQuery (tabla de origen) y crea una tabla materializada (tabla de destino).

# Materialize Web Vitals metrics from GA4 event export data

# Replace target table name
CREATE OR REPLACE TABLE YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.web_vitals_summary
  PARTITION BY DATE(event_timestamp)
AS
SELECT
  ga_session_id,
  IF(
    EXISTS(SELECT 1 FROM UNNEST(events) AS e WHERE e.event_name = 'first_visit'),
    'New user',
    'Returning user') AS user_type,
  IF(
    (SELECT MAX(session_engaged) FROM UNNEST(events)) > 0, 'Engaged', 'Not engaged')
    AS session_engagement,
  evt.* EXCEPT (session_engaged, event_name),
  event_name AS metric_name,
  FORMAT_TIMESTAMP('%Y%m%d', event_timestamp) AS event_date
FROM
  (
    SELECT
      ga_session_id,
      ARRAY_AGG(custom_event) AS events
    FROM
      (
        SELECT
          ga_session_id,
          STRUCT(
            country,
            device_category,
            device_os,
            traffic_medium,
            traffic_name,
            traffic_source,
            page_path,
            debug_target,
            event_timestamp,
            event_name,
            metric_id,
            IF(event_name = 'LCP', metric_value / 1000, metric_value) AS metric_value,
            user_pseudo_id,
            session_engaged,
            session_revenue) AS custom_event
        FROM
          (
            SELECT
              (SELECT value.int_value FROM UNNEST(event_params) WHERE key = 'ga_session_id')
                AS ga_session_id,
              (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'metric_id')
                AS metric_id,
              ANY_VALUE(device.category) AS device_category,
              ANY_VALUE(device.operating_system) AS device_os,
              ANY_VALUE(traffic_source.medium) AS traffic_medium,
              ANY_VALUE(traffic_source.name) AS traffic_name,
              ANY_VALUE(traffic_source.source) AS traffic_source,
              ANY_VALUE(
                REGEXP_SUBSTR(
                  (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'page_location'),
                  r'^[^?]+')) AS page_path,
              ANY_VALUE(
                (SELECT value.string_value FROM UNNEST(event_params) WHERE key = 'debug_target'))
                AS debug_target,
              ANY_VALUE(user_pseudo_id) AS user_pseudo_id,
              ANY_VALUE(geo.country) AS country,
              ANY_VALUE(event_name) AS event_name,
              SUM(ecommerce.purchase_revenue) AS session_revenue,
              MAX(
                (
                  SELECT
                    COALESCE(
                      value.double_value, value.int_value, CAST(value.string_value AS NUMERIC))
                  FROM UNNEST(event_params)
                  WHERE key = 'session_engaged'
                )) AS session_engaged,
              TIMESTAMP_MICROS(MAX(event_timestamp)) AS event_timestamp,
              MAX(
                (
                  SELECT COALESCE(value.double_value, value.int_value)
                  FROM UNNEST(event_params)
                  WHERE key = 'metric_value'
                )) AS metric_value,
            FROM
              # Replace source table name
              `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_*`
            WHERE
              event_name IN ('LCP', 'FID', 'CLS', 'first_visit', 'purchase')
            GROUP BY
              1, 2
          )
      )
    WHERE
      ga_session_id IS NOT NULL
    GROUP BY ga_session_id
  )
CROSS JOIN UNNEST(events) AS evt
WHERE evt.event_name NOT IN ('first_visit', 'purchase');

Este conjunto de datos materializado tiene varias ventajas:

  • La estructura de datos es plana y más fácil de consultar.
  • Solo retiene los eventos de Métricas web del conjunto de datos original de GA4.
  • La ID de sesión, el tipo de usuario (nuevo o recurrente) y la información de la participación de la sesión están disponibles directamente en las columnas.
  • La tabla está particionada por fecha y agrupada por nombre de métrica. Esto suele reducir la cantidad de datos que se procesan para cada consulta.
  • Ya que no necesitas usar comodines para consultar esta tabla, se pueden almacenar los resultados de la consulta en caché hasta por 24 horas. Esto reduce los costos si realizas la misma consulta.
  • Si usas BigQuery BI Engine, puedes ejecutar operadores y funciones de SQL optimizados en esta tabla.

Puedes consultar directamente esta tabla materializada desde la IU de BigQuery o usarla en Data Studio con el conector de BigQuery.

Ejecuta trabajos de materialización de manera regular

Si ejecutas la consulta anterior sin un período, se ejecutará en todo tu conjunto de datos de Google Analytics. No es recomendable realizar esta tarea todos los días, ya que vuelves a procesar grandes cantidades de datos históricos. Puedes actualizar la consulta para que solo agregue los datos del último día. Para ello, quita la sentencia CREATE or REPLACE TABLE al comienzo de la consulta y agrega un criterio adicional a la cláusula WHERE de la subconsulta con la tabla events_intraday_:

FROM
  # Replace source table name
  `YOUR_PROJECT_ID.analytics_YOUR_GA_PROPERTY_ID.events_intraday_*`
WHERE
  event_name IN ('LCP', 'FID', 'CLS', 'first_visit', 'purchase')
  # The _TABLE_SUFFIX replaces the asterisk (*) in the table name
  #
  AND _TABLE_SUFFIX = FORMAT_DATE('%Y%m%d', DATE_SUB(CURRENT_DATE, INTERVAL 1 DAY)

Esta consulta muestra solo datos de ayer. Luego, puedes usar BigQuery Console para programar la consulta a fin de que se ejecute a diario.

10. Visualiza los datos en Google Data Studio

Google Data Studio admite de forma nativa la lectura de datos de Google BigQuery. Ahora que tienes datos de web-vitals de Google Analytics 4 que se propagan en BigQuery, puedes usar el conector de BigQuery de Data Studio para leer directamente la tabla materializada.

Usa el conector de métricas web

Dado que crear un panel desde cero lleva mucho tiempo, desarrollamos una solución empaquetada que crea un panel de plantilla para ti. Primero, asegúrate de haber materializado la tabla de Métricas web con la consulta anterior. Luego, accede al conector de Métricas web de Data Studio con este vínculo: goo.gle/web-vitals-connector.

Después de proporcionar una autorización única, deberías ver la siguiente pantalla de configuración:

Pantalla de autorización del conector de Métricas web

Proporciona el ID de la tabla de BigQuery materializada (es decir, la tabla de destino) y el ID del proyecto de facturación de BigQuery. Cuando hagas clic en CONECTAR, Data Studio creará un panel con una nueva plantilla y asociará tus datos. Puedes editar, modificar y compartir el panel de control como desees. Si creas un panel una vez, no tienes que volver a visitar el vínculo del conector, a menos que quieras crear varios paneles a partir de diferentes conjuntos de datos.

A medida que navegas por el panel, puedes ver las tendencias diarias de las métricas de Métricas web y algunos datos de uso de tu sitio web, como usuarios y sesiones, en la pestaña Resumen.

En la pestaña User Analysis, puedes seleccionar una métrica y obtener un desglose del percentil de métricas, así como el recuento de usuarios, según las diferentes métricas empresariales y de uso.

La pestaña Análisis de la ruta de la página te ayuda a identificar las áreas con problemas en tu sitio web. Aquí puedes elegir una métrica para ver la descripción general, pero también puedes ver el mapa de dispersión de todas las rutas de la página con el valor de percentil en el eje Y y el recuento de registros en el eje X. El mapa de dispersión puede ayudar a identificar páginas que tienen valores de métricas inferiores a los esperados. Una vez que hayas seleccionado las páginas, podrás desglosar el área con el diagrama de dispersión de la tabla Ruta de la página o ver la tabla Destino de depuración.

La pestaña Análisis de ingresos es un ejemplo de cómo puedes supervisar tu negocio y las métricas de rendimiento en el mismo lugar. En esta sección se muestran todas las sesiones en las que el usuario realizó una compra. Puedes comparar los ingresos obtenidos con la experiencia del usuario durante una sesión específica.

11. Otros recursos

¡Felicitaciones por completar este Codelab! Ahora deberías poder hacer un seguimiento del rendimiento de las Métricas web esenciales en tu sitio con un alto nivel de detalle. También deberías poder identificar elementos de páginas y tipos de páginas específicos que causan CWV altos para que puedas enfocar tus optimizaciones.

Lecturas adicionales

web.dev tiene una serie de artículos y casos de éxito con estrategias para mejorar las Métricas web esenciales. Comienza con los artículos de optimización para cada métrica:

Documentos de referencia