Cómo compilar un panel de CrUX en Looker Studio

Looker Studio (anteriormente Data Studio) es una potente herramienta de visualización de datos que te permite crear paneles sobre fuentes de macrodatos, como el Informe de UX de Chrome (CrUX). En esta guía, aprenderás a crear tu propio panel de CrUX personalizado para hacer un seguimiento de las tendencias de la experiencia del usuario de un origen.

Captura de pantalla del panel de CrUX en la que se muestran varios gráficos de barras apiladas que cambian a lo largo de varios meses.
Panel de CrUX

El panel de CrUX se diseñó con una función de Looker Studio llamada Conectores de la comunidad. Este conector es un vínculo preestablecido entre los datos de CrUX sin procesar en BigQuery y las visualizaciones de Looker Studio. Elimina la necesidad de que los usuarios del panel escriban consultas o generen gráficos. Todo se creó para ti; solo necesitas proporcionar un origen, y se generará un panel personalizado para ti.

El panel de CrUX predeterminado

CrUX tiene un panel predeterminado que lo mantiene el equipo de CrUX. El equipo agrega métricas nuevas (por ejemplo, INP) y estas estarán disponibles la próxima vez que se cargue el panel.

Crea un panel personalizado

Es posible que algunos usuarios deseen personalizar el panel de control, en cuyo caso puedes crear tu propia copia del panel predeterminado y cambiarlo cuando lo creas conveniente.

Para crear un panel personalizado, ve a g.co/chromeuxdash. Esta acción te llevará a la página del conector de comunidades de CrUX, en la que podrás proporcionar el origen para el que se generará el panel. Ten en cuenta que es posible que los usuarios nuevos deban completar los permisos o las instrucciones de preferencias de marketing.

Captura de la pantalla de configuración del conector del panel de CrUX con un campo para ingresar una URL de origen y una casilla de verificación que permite modificar ese campo en los informes
El conector del panel de CrUX

El campo de entrada de texto solo acepta orígenes, no URL completas. Por ejemplo:

Origen (compatible)
https://developer.chrome.com
URL (no compatible)
https://developer.chrome.com/docs/crux/guides/looker-studio-dashboard

Si omites el protocolo, se supone que es HTTPS. Los subdominios son importantes, por ejemplo, https://developers.google.com y https://www.google.com se consideran orígenes diferentes.

Algunos problemas habituales relacionados con los orígenes son proporcionar un protocolo incorrecto (por ejemplo, http:// en lugar de https://) y omitir el subdominio cuando es necesario. Algunos sitios web incluyen redireccionamientos, por lo que si http://example.com redirecciona a https://www.example.com, debes usar este último, que es la versión canónica del origen. Como regla general, utiliza el origen que los usuarios vean en la barra de direcciones.

Si marcas la casilla de verificación, el origen se incluirá en la URL del panel, lo que permitirá usar el mismo panel para diferentes orígenes cambiando este parámetro de URL en el futuro, por lo que se recomienda marcar esa casilla.

Haz clic en el botón Conectar. Si marcaste la casilla de verificación, se te pedirá que lo confirmes.

Si tu origen no está incluido en el conjunto de datos de CrUX, es posible que recibas un mensaje de error como el que se muestra en el siguiente diagrama. Hay más de 15 millones de orígenes en el conjunto de datos, pero el que deseas podría no tener suficientes datos para incluirse.

Captura de pantalla de un mensaje de error emergente que dice, entre otros mensajes de error: “Hay más de 15 millones de orígenes en este conjunto de datos, pero https://doesnotexist.origin no es uno de ellos”.
Mensaje de error del conector de la comunidad de CrUX cuando no existe un origen

Si el origen existe, se te dirigirá a la página de esquema del panel. Verás todos los campos que se incluyen: cada tipo de conexión efectiva, cada factor de forma, el mes de la actualización del conjunto de datos, la distribución del rendimiento de cada métrica y, por supuesto, el nombre del origen. No es necesario que haga o cambie nada en esta página. Solo haga clic en Crear informe para continuar.

Captura de pantalla del editor de esquemas del panel de CrUX con varios campos, tipos, agregación y descripciones con la capacidad de cambiarlos o agregar campos nuevos.
Esquema del panel de CrUX

Usa el panel

Cada panel incluye tres tipos de páginas:

  1. Descripción general de las Métricas web esenciales
  2. Rendimiento de las métricas
  3. Datos demográficos de los usuarios

Cada página incluye un gráfico que muestra las distribuciones a lo largo del tiempo para cada versión mensual disponible. A medida que se lanzan nuevos conjuntos de datos, puedes actualizar el panel para obtener los datos más recientes.

Los conjuntos de datos mensuales se publican el segundo martes de cada mes. Por ejemplo, el conjunto de datos compuesto por datos sobre la experiencia del usuario del mes de mayo se publica el segundo martes de junio.

Descripción general de las Métricas web esenciales

La primera página es una descripción general del rendimiento mensual de las Métricas web esenciales del origen. Estas son las métricas de UX más importantes en las que Google recomienda que te enfoques.

Captura de pantalla de la descripción general de las Métricas web esenciales del panel de CrUX en la que se muestra información de las métricas de LCP, INP y CLS.
Descripción general de las Métricas web esenciales del panel de CrUX

Usa la página de Métricas web esenciales para comprender cómo experimentan el origen los usuarios de computadoras de escritorio y teléfonos. De forma predeterminada, se selecciona el mes más reciente en el momento en que creaste el panel. Para alternar entre las versiones mensuales anteriores o más recientes, usa el filtro Mes en la parte superior de la página.

Ten en cuenta que se omite la tablet de estos gráficos de forma predeterminada, pero, si es necesario, puedes quitar el filtro Sin tablet en la configuración del gráfico de barras:

Captura de pantalla de la edición de la opción Filtro en Looker Studio.
Edición del panel de CrUX para mostrar tablets en la página de Métricas web esenciales

Rendimiento de las métricas

Después de la página de Métricas web esenciales, encontrarás páginas independientes para todas las metrics en el conjunto de datos de CrUX.

Captura de pantalla de la página del LCP del panel de CrUX que muestra varios gráficos de barras apiladas que cambian a lo largo de varios meses.
Página del LCP del panel de CrUX

En la parte superior de cada página, se encuentra el filtro Dispositivo, que puedes usar para restringir los factores de forma que se incluyen en los datos de la experiencia. Por ejemplo, puedes desglosar específicamente las experiencias telefónicas. Esta configuración persiste en todas las páginas.

Las visualizaciones principales de estas páginas son las distribuciones mensuales de experiencias clasificadas como "Buena", "Necesita mejorar" y "Deficiente". La leyenda codificada por colores debajo del gráfico indica el rango de experiencias incluidas en la categoría. Por ejemplo, en la captura de pantalla anterior, puedes ver que el porcentaje de experiencias de Largest Contentful Paint (LCP) (LCP) “buena” fluctúan y empeoran un poco en los últimos meses.

Los porcentajes de experiencias "buenas" y "malas" del mes más reciente se muestran sobre el gráfico junto con un indicador de la diferencia porcentual con respecto al mes anterior. Para este origen, las experiencias de LCP "buenas" disminuyeron un 3.2% a 56.04% mes a mes.

Además, para las métricas como el LCP y otras Métricas web esenciales que proporcionan recomendaciones explícitas de percentiles, encontrarás la métrica “P75” entre los porcentajes “bueno” y “deficiente”. Este valor corresponde al percentil 75 de experiencias del usuario del origen. En otras palabras, el 75% de las experiencias son mejores que este valor. Debes tener en cuenta que esto se aplica a la distribución general en todos los dispositivos del origen. Activar o desactivar dispositivos específicos con el filtro Dispositivo no volverá a calcular el percentil.

Advertencias técnicas sobre los percentiles

Ten en cuenta que las métricas del percentil se basan en los datos de histograma de BigQuery, por lo que el nivel de detalle será aproximado: 100 ms para LCP, 25 ms para INP y 0.05 para CLS. En otras palabras, un LCP P75 de 3,800 ms indica que el percentil 75 verdadero se encuentra entre 3,800 ms y 3,900 ms.

Además, el conjunto de datos de BigQuery usa una técnica llamada “distribución binaria”, en la que las densidades de las experiencias del usuario se agrupan intrínsecamente en discretizaciones muy poco precisas con un nivel de detalle decreciente. Esto nos permite incluir densidades en minutos en la cola de la distribución sin tener que exceder los cuatro dígitos de precisión. Por ejemplo, los valores de LCP menores a 3 segundos se agrupan en discretizaciones de 200 ms de ancho. Entre 3 y 10 segundos, los contenedores tienen un ancho de 500 ms. Cuando duran 10 segundos, los depósitos tienen 5000 ms de ancho... En lugar de tener discretizaciones de anchos variables, la distribución de discretizaciones garantiza que todos tengan un ancho constante de 100 ms de ancho (el máximo común divisor), y que la distribución se interpola de forma lineal en cada discretización.

Los valores P75 correspondientes en herramientas como PageSpeed Insights no se basan en el conjunto de datos público de BigQuery y pueden proporcionar valores de milisegundos de precisión.

Datos demográficos de los usuarios

Hay dos dimensiones incluidas en las páginas de datos demográficos de usuarios: dispositivos y tipos de conexiones eficaces (ECT). En estas páginas, se muestra la distribución de las páginas vistas en todo el origen de los usuarios de cada segmento demográfico.

La página de distribución por dispositivos muestra el desglose de usuarios de teléfonos, computadoras de escritorio y tablets a lo largo del tiempo. Muchos orígenes tienden a tener pocos o ningún dato de tablets, por lo que a menudo verás "0%" colgando del borde del gráfico.

Captura de pantalla de la página del dispositivo del panel de CrUX en la que se muestra cómo cambia el desglose de los dispositivos mes a mes.
Página del dispositivo del panel de CrUX

De manera similar, la página de distribución de ECT te muestra el desglose de las experiencias 4G, 3G, 2G, 2G lenta y sin conexión.

Las distribuciones de estas dimensiones se calculan usando segmentos de los datos de histogramas de First Contentful Paint (FCP).

Preguntas frecuentes

Estas son algunas de las preguntas frecuentes sobre la compilación de paneles de CrUX en Looker Studio:

¿Cuándo debería usar el panel de CrUX en lugar de otras herramientas?

El panel de CrUX se basa en los mismos datos subyacentes disponibles en BigQuery, pero no es necesario que escribas ni una sola línea de SQL para extraer los datos ni tendrás que preocuparte por exceder las cuotas gratuitas. Configurar un panel es más rápido y fácil que consultar los datos de los subordinados, todas las visualizaciones se generan automáticamente y puedes compartirlas con quien quieras.

¿Existen limitaciones para el uso del panel de CrUX?

El uso de BigQuery implica que el panel de CrUX también hereda todas sus limitaciones. Está restringida a los datos a nivel del origen con un nivel de detalle mensual.

El panel de CrUX también cambia parte de la versatilidad de los datos sin procesar en BigQuery por simplicidad y conveniencia. Por ejemplo, las distribuciones de las métricas solo se proporcionan como “buena”, “necesita mejorar” y “deficiente”, a diferencia de los histogramas completos. El panel de CrUX también proporciona datos a nivel global, mientras que el conjunto de datos de BigQuery te permite hacer zoom en países específicos.

¿Dónde puedo obtener más información sobre Looker Studio?

Consulta la página de funciones de Looker Studio para obtener más información.