Realice un seguimiento de Core Net Vitals en GA4 con Google Tag Supervisor

Actualizado el 3 de marzo de 2023: Se agregó una casilla de verificación a la plantilla para permitir la recopilación de métricas FCP, INP y TTFB también.

Elementos vitales net básicos se describe en la página dedicada recurso net.dev como (el énfasis es mío):

“Core Net Vitals son el subconjunto de Net Vitals que se aplican a todas las páginas, debe ser medido por todos los propietarios del sitioy aparecerá en todas las herramientas de Google”.

Umbrales recomendados de Core Net Vitals: desde https://net.dev/vitals/

El Centro Las mediciones de Net Vitals sugeridas por Google son:

• Pintura con contenido más grande (LCP), que mide el tiempo que tomó cargar la imagen o bloque de texto más grande en la ventana gráfica. Esto debería estar óptimamente por debajo 2500 milisegundos.
• Retraso de la primera entrada (FID), que mide el tiempo que le tomó al navegador reaccionar a la interacción del usuario (por ejemplo, hacer clic o tocar). Esto debería estar óptimamente por debajo 100 milisegundos.
• Cambio de diseño acumulativo (CLS), que mide el alcance de inesperado cambios en el diseño durante la vida útil de la página. Lo perfect es que tenga una puntuación de menos de 0,1.

También hay otras métricas disponible a través de la biblioteca Net Vitals (FCP, INP y TTFB).

El seguimiento de Core Net Vitals ya se ha explorado bastante a fondo en artículos como esta pieza de TagManagerItaliapero quería contribuir a la discusión con algo único.

En este artículo, te mostraré cómo usar un nueva plantilla personalizada para configurar el seguimiento de Core Net Vitals sin tener que utilizar etiquetas HTML personalizadas. También mostraré cómo usar la salida de esta plantilla para enviar los datos a Google Analytics 4.

Muchas gracias a Felipe Walton de Google por aclarar muchas de las cosas de este artículo. Philip es el autor detrás del contenido de Net Vitals en net.dev entre otras cosas, así que hazte un favor y suscríbete a su contenido en Gorjeo, GitHuby en su Weblog.

X

El boletín a fuego lento

Suscríbete al Boletín a fuego lento para recibir las últimas noticias y contenido de Simo Ahava en su bandeja de entrada de correo electrónico.

Obtener la plantilla

Para cargar la plantilla, vaya a la interfaz de usuario de Google Tag Supervisor y haga clic en el Plantillas navegación.

A continuación, haga clic en Buscar galería botón en el Plantillas de etiquetas área.

En la superposición, busque la plantilla titulada Core Net Vitalsselecciónelo y haga clic en Agregar al espacio de trabajo siguiendo las indicaciones para realizar el trabajo.

Una vez que la plantilla se haya agregado a su espacio de trabajo, puede abrir el Etiquetas vista desde la navegación y haga clic para crear una nueva etiqueta.

Elige el nuevo Elementos vitales net básicos plantilla personalizada para la etiqueta.

La primera configuración en la etiqueta es la Objetos de espacio de nombres configuración, que es apagado por defecto. Si marca la casilla, entonces el objeto empujado hacia dataLayer almacenará cada medición tipo (LCP, CLS, FID) en su propio espacio de nombres bajo el webVitalsMeasurement clave de capa de datos de nivel superior. Vea a continuación un ejemplo.

También puede marcar la casilla etiquetada Recopile todas las métricas de Net Vitals (disponibles) para recopilar también mediciones de FCP, INP y TTFB.

Añade el Todas las páginas desencadenarlo. Si solo desea que funcione en determinadas páginas, utilice en su lugar un activador de Vista de página con una condición de activación adecuada.

Guarde la etiqueta cuando esté lista.

Pruébalo

A continuación, vaya a modo de vista previa haciendo clic en el botón Vista previa en la interfaz de usuario.

Una vez que navegue por su sitio en modo de vista previa, vuelva a cargar la página y espera a que se cargue por completo (algunos Core Net Vitals no funcionan si la página se carga en segundo plano). Haga clic un poco por si acaso.

De hecho, si quieres cobrar FID allí debe Ser una interacción de usuario registrada en la página. Interactuar con la página también tendrá el efecto de finalizar el informe LCP, ya que la resolución del elemento más grande en la ventana gráfica se detiene tan pronto como se recibe una interacción del usuario.

Cuando cambia a la pestaña del modo de vista previa, idealmente debería ver tres coreWebVitals eventos en la lista. A veces solo verás dos, por ejemplo si DEFENSOR no se registró. A veces verá más de tres, por ejemplo, si las métricas se reevalúan antes de recibir una interacción del usuario o si la pestaña o el navegador están en segundo plano.

La mejor manera de garantizar que se informen los tres elementos básicos de la net es permitir que la página se cargue completamente en primer plano, hacer clic un poco y luego cambiar la pestaña al modo Vista previa.

Seleccione uno de los eventos y expanda el Llamada API vista. Debería ver algo como esto:

El objeto capa de datos

Esto es lo que el dataLayer objeto contiene:

Si usted tiene Objetos de espacio de nombres seleccionado, las propias teclas de medición (identify, id, worth, and so on.) se anidarán bajo el nombre de la medición. Así que en lugar de webVitalsMeasurement.idla ruta clave sería webVitalsMeasurement.FID.idsi la medición fue para el Retraso de la Primera Entrada.

Un caso de uso para comprobar Objetos de espacio de nombres es si desea enviar todas las mediciones CWV con un solo evento. Si no tiene marcado Objetos de espacio de nombres, cada medición CWV sobrescribirá la medición anterior en la capa de datos, lo que significa que solo podrá acceder a la medición más reciente, independientemente del tipo.

Cree el activador y las variables de Google Tag Supervisor

Para utilizar estos valores en Google Tag Supervisor, primero deberá crear un Activador de evento personalizado y uno Variable de capa de datos para cada uno de los webVitalsMeasurement claves que desea medir.

El activador de evento personalizado

El activador de evento personalizado debería verse así:

Asegúrate de configurar coreWebVitals como el valor de la Nombre del evento campo.

Las variables de la capa de datos

A continuación, cree estos seis Variables de la capa de datos, utilizando la imagen siguiente como modelo.

Recuerda, si tienes Objetos de espacio de nombres seleccionado, los nombres de las variables son diferentes. Esto es lo que necesitarías crear para FID, por ejemplo:

Enviar los datos a Common Analytics

Para enviar los datos a Common Analytics, te recomiendo seguir esta excelente guía en Tag Supervisor Italia: Cómo realizar un seguimiento de los elementos básicos de la net con Google Tag Supervisor.

¡NOTA! Una cosa que tendrás que hacer es configurar el transport campo en su etiqueta Common Analytics para beacon:

El beacon El campo garantiza que la etiqueta utiliza el API de baliza. La API Beacon está diseñada para “proteger” las solicitudes asincrónicas para que se completen incluso si la página se ha descargado en el proceso. Esto es importante para algunas de las mediciones de Core Net Vitals, que podrían no informar un valor hasta que el usuario esté a punto de abandonar la página.

Tenga en cuenta que GA4 no no requieren que establezca explícitamente algo para que las visitas se envíen con la API Beacon. Por defecto usa navigator.sendBeacon() en toda solicitud.

Otra cosa a tener en cuenta es que Common Analytics solo acepta números enteros en Valor del evento y Métrica personalizada campos. Por este motivo, deberá utilizar el DLV – webVitalsMeasurement.valueRounded y DLV – webVitalsMeasurement.deltaRounded variables en lugar de los valores brutos.

Enviar los datos a Google Analytics 4

Para enviar los datos a Google Analytics 4, necesitará utilizar un Etiqueta de eventoasí que adelante y crea uno.

La forma de configurar el nombre y las propiedades del evento depende completamente de usted, pero así es como construí mi etiqueta de evento:

puse el Nombre del evento al nombre de la métrica que se recopila (LCP, FIDo CLS). Recuerde que GA4 se está moviendo hacia una versión más semántico enfoque en la denominación de eventos, donde el nombre del evento debe reflejar qué sucedió en lugar de una etiqueta genérica como la que solía ser la categoría de evento en Common Analytics.

Elegí enviar solo los cuatro parámetros “sin procesar”, ya que GA4 puede procesar valores de punto flotante donde Common Analytics no podía. Los cuatro nombres de parámetros que elegí son:

• web_vitals_measurement_name para el nombre de la métrica.
• web_vitals_measurement_id para el ID de métrica.
• web_vitals_measurement_value Para el crudo valor métrico.
• worth Para el crudo delta métrico.

estoy configurando worth a la métrica delta porque worth es un parámetro recomendado para el valor principal del evento. opté por usar delta simplemente porque tiene sentido para la medición de CLS. Si la métrica valor fue enviado como el evento worth en cambio, un agregado de CLS reportaría valores inflados ya que sumaría los totales en lugar de los deltas.

Asegúrese de que la etiqueta se dispare en el Activador de evento personalizado tu creaste antes.

Una vez que haya guardado la etiqueta, puede probar la configuración nuevamente. Restablezca el modo de vista previa haciendo clic en el botón Vista previa y cargue una página en el sitio. Debería ver que se activa su etiqueta GA4 y, si abre su contenido, debería ver que se envían valores válidos a GA4.

Recuerde que GA4 se puede depurar en su propia interfaz del modo de vista previa haciendo clic en el ID de medición respectivo en la barra superior de la interfaz del modo de vista previa. Aquí puede seleccionar uno de los eventos, como por ejemplo CLSpara ver exactamente qué se envió a GA4 en la solicitud HTTP.

No olvides comprobar Vista de depuración ¡También en la interfaz de Google Analytics 4!

Finalmente, no hay nada tan satisfactorio como ver cómo fluyen los datos Google BigQuery.

Resumen

¡Espero que este artículo te haya sido útil!

En specific, espero que la plantilla personalizada presentada aquí le ayude a implementar el seguimiento de Core Net Vitals, ya que podrá evitar trabajar con molestas etiquetas HTML personalizadas.

La plantilla siempre recupera el el último versión de la web-vitals biblioteca, lo que significa que si se introduce un cambio importante, la plantilla también se romperá. No creo que esto sea muy realista, pero incluso si sucede, me aseguraré de arreglar la plantilla tan pronto como surja este problema.

El seguimiento de Core Net Vitals tiene mucho sentido, especialmente en Google Analytics 4 con sus cuotas más liberales y restricciones de tipo de valor. Estar al tanto de todo en lo que respecta al rendimiento del sitio es muy importante hoy en día, y todo comienza con buenos datos.

¡Déjame saber en los comentarios si tienes preguntas sobre esta solución!