Mide los datos del campo de las Métricas web esenciales con las métricas de anuncios

1. Antes de comenzar

En este codelab, aprenderás a medir las Métricas web esenciales con una plantilla de etiqueta precompilada de Google Tag Manager (GTM) y a enviar los datos a una propiedad Google Analytics 4 (GA4). También aprenderás a extraer datos de Google Ad Manager y Google AdSense a GA4 para correlacionar los datos del campo de las Métricas web esenciales y las métricas de rendimiento de los anuncios con un panel de Looker Studio compilado previamente.

Actividades

• Importa una etiqueta y configúrala en tu contenedor de Google Tag Manager.
• Mide las Métricas web esenciales de la página web en GA4.
• Configure una etiqueta del evento de GA4 en Google Tag Manager.
• Explora los datos de métricas web en el dataLayer y en los informes de GA4.
• Vincula tu propiedad GA4 con Google Ad Manager y Google AdSense.
• Correlaciona las Métricas web esenciales y los ingresos publicitarios a través de un panel de Looker Studio.

Requisitos

• Una cuenta de Google Analytics y una propiedad web GA4 con acceso de editor
• Una cuenta de Google Tag Manager y un contenedor web con derechos de publicación
• Una red de Google Ad Manager o una cuenta de Google AdSense con acceso de administrador
• Una cuenta de Looker Studio

2. Agregar la plantilla de etiqueta de GitHub a GTM

La medición de las Métricas web esenciales con una plantilla de etiqueta de GTM se basa en la biblioteca de web-vitals. Primero, descargaremos la plantilla de etiqueta de GTM.

1. Abre el archivo template.tpl.
2. Descarga el archivo en tu computadora

Ahora, ve a tu cuenta de Google Tag Manager.

1. Abre tu contenedor web.
2. Crea un lugar de trabajo nuevo y, luego, ingresa un nombre (p.ej., "Medición de Métricas web esenciales").
3. Ve a "Plantillas".
4. En la pestaña "Plantillas de etiquetas", haz clic en el botón "Nuevo" .

5. Haz clic en el menú Más acciones y selecciona Importar.

6. Selecciona el archivo TPL descargado previamente desde tu computadora.
7. Haga clic en el botón "Guardar".

Agregaste la plantilla de etiqueta a tu contenedor de Google Tag Manager.

3. Configura la etiqueta de Métricas web

1. En tu lugar de trabajo de Google Tag Manager, ve a "Etiquetas".
2. Haz clic en "Nuevo" y, luego, en "Configuración de la etiqueta" para agregar la etiqueta de Métricas web. y elige la pestaña "Métricas web" etiqueta de la sección "Personalizada" sección.
3. El siguiente paso es establecer los diferentes parámetros de configuración. Toda la configuración se explica en el repositorio de GitHub. Para que este codelab y el panel final funcionen, basta con los siguientes parámetros de configuración.

4. Aplica uno de los activadores de vista de página, p.ej., con la opción "Todas las páginas" un activador.
5. Además, agrega excepciones de activador si es necesario.
6. Asigna a la etiqueta el nombre "Métricas web esenciales: Todas las páginas" y guárdala.

4. Explora los datos de Métricas web en dataLayer

Para ver la etiqueta en acción, cambia al modo de vista previa de Google Tag Manager. Se abrirá Tag Assistant y se te pedirá una URL para obtener una vista previa de tu configuración y depurarla. Proporciona una URL a una página con el contenedor de Google Tag Manager implementado y haz clic en "Conectar". Se abrirá una pestaña aparte con la URL proporcionada.

1. Para interactuar con la página, desplázate y haz clic en elementos o espacios en blanco.
2. Luego, vuelve a la pestaña con Tag Assistant y el modo de vista previa de Google Tag Manager.
3. A la izquierda, verás los diferentes eventos enviados a dataLayer.
4. Primero, debes verificar si la etiqueta de Métricas web se activó en el activador de vistas de página que elegiste.

5. También deberías ver tres "web_vitals" eventos, en los que cada uno de ellos representa una Métrica web esencial: LCP, INP y CLS.

6. Haz clic en la primera y, a la derecha, abre la "Llamada a la API". En la pestaña correspondiente, verás los datos enviados desde la plantilla de etiqueta a dataLayer.

7. Consulta también las otras entradas de los campos "web_vitals" eventos. Usa la documentación de web-vitals.js como referencia para los diferentes tipos de datos.

5. Envía datos de Métricas web a GA4

Para extraer los datos de Métricas web esenciales de dataLayer y enviarlos a GA4, debes hacer lo siguiente:

• Crea un activador para la etiqueta de GA4
• Crea variables para extraer datos de dataLayer
• Cree la etiqueta del evento de GA4

Crea el activador

1. En tu lugar de trabajo de Google Tag Manager, ve a "Activadores".
2. Haz clic en “Nuevo” y, luego, en “Configuración del activador” para agregar un activador nuevo. y elige "Evento personalizado" del “Otro” sección.
3. Configurar "web_vitals" En el campo Nombre del evento, asígnale un nombre al activador y guárdalo.

Crea las variables dataLayer

1. En tu lugar de trabajo de Google Tag Manager, ve a "Variables".
2. Crea una nueva variable definida por el usuario a partir del tipo "Variable de capa de datos".
3. Configura "webVitalsData.name" En el campo de nombre de variable de Data Layer, asigne un nombre a la variable (p.ej., "DLV - webVitalsData.name") y guárdela.

4. Repite estos pasos para las otras cuatro variables requeridas de capa de datos. Crea "webVitalsData.value".

5. Crea otra variable con el campo de nombre "webVitalsData.id".

6. Crea "webVitalsData.rating".

7. Crea "webVitalsData.delta".

8. Deberías terminar con las siguientes variables dataLayer definidas por el usuario:

Cree la etiqueta del evento de GA4

Antes de crear una etiqueta del evento de GA4, asegúrate de que tu etiqueta de Google ya esté configurada.

1. En tu lugar de trabajo de Google Tag Manager, ve a "Etiquetas".
2. Para agregar una etiqueta del evento de GA4, haz clic en "Nuevo" y, luego, en "Configuración de la etiqueta". y elige "Google Analytics: evento de GA4" etiqueta de "Google Analytics" sección.
3. Ingresa tu ID de medición en el campo correspondiente.

4. Para el "Nombre del evento" campo de entrada, elige la variable dataLayer “DLV - webVitalsData.name” del paso creado anteriormente.

5. Agrega las otras variables dataLayer como parámetros de evento, como se muestra en la captura de pantalla. Además, asegúrate de agregar el parámetro "event_category" con un valor como "Métricas web" para agrupar los eventos de Métricas web esenciales.

6. Registra estos parámetros de evento como dimensiones personalizadas en la IU de GA4.
7. Aplica parámetros de configuración adicionales según tus requisitos de configuración de GA4.
8. Establece el campo "web_vitals" un evento personalizado como activador de la etiqueta de GA4.
9. Además, agrega excepciones de activador si es necesario.

6. Verifica los datos en GA4

Para validar el flujo de datos a GA4, vuelve a cambiar al modo de vista previa de Google Tag Manager. Proporciona una URL a Tag Assistant y haz clic en "Connect".

1. Para interactuar con la página, desplázate y haz clic en elementos o espacios en blanco.
2. Luego, vuelve a la pestaña con Tag Assistant y el modo de vista previa de Google Tag Manager.
3. A la izquierda, haz clic en cada uno de los campos "web_vitals". y confirma que se activa la etiqueta de GA4 Core Web Vitals.

4. Haz clic en la tarjeta que deseas validar para abrir la etiqueta de GA4. Los datos se extraen correctamente de dataLayer. Asegúrate de mostrar las variables como valores.

5. Ahora, cambia a tu propiedad GA4 y abre el informe En tiempo real.
6. En "Cantidad de eventos por nombre del evento", que puedes validar si tus eventos de Métricas web esenciales se recopilaron correctamente.

7. Si se procesa una gran cantidad de datos en el informe en tiempo real, es posible que los eventos no sean tan fáciles de identificar. En ese caso, usa el informe de debugview, que te permite ver los datos de un dispositivo específico.

7. Publica tu configuración

Una vez que hayas probado correctamente tu configuración, es hora de publicar tu lugar de trabajo.

1. Abre tu lugar de trabajo de Google Tag Manager.
2. En la parte superior derecha de la IU, haz clic en “Enviar”.
3. Proporciona un nombre y una descripción para la versión, y haz clic en "Publicar" para publicar tu configuración.

8. Conecta GA4 con Google Ad Manager o Google AdSense.

Después de recopilar datos de Métricas web esenciales en GA4, las métricas relacionadas con los anuncios también deben estar disponibles en GA4 para que el panel funcione. Conecta Google Ad Manager y Google AdSense con GA4 o solo una de estas soluciones publicitarias. Ten en cuenta que debes tener permiso de editor (o superior) en GA4 y permiso de administrador en Google Ad Manager y Google AdSense para la vinculación.

Conecta GA4 con Google Ad Manager

1. Ve a tu red de Google Ad Manager.
2. Haz clic en "Administrador". -> "Configuración global" -> "Configuración de red".
3. En "Configuración de informes", habilita la opción "Informes de la propiedad Google Analytics 4 en los informes de Ad Manager".

4. Revisa los términos y condiciones y, luego, haz clic en "Confirmar".
5. Guarda la actualización.
6. Ir a "Administrador" -> “Cuentas vinculadas” -> “Google Analytics 4”.
7. Haz clic en "New Google Analytics 4 property link".
8. Busca y selecciona la propiedad GA4 que deseas vincular.
9. Haz clic en Guardar y listo.

Conecta GA4 con Google AdSense.

1. Ve a tu cuenta de Google AdSense.
2. Haz clic en "Cuenta". -> "Acceso y autorización" -> “Integración con Google Analytics”.
3. Haz clic en "+ Nuevo vínculo".

4. Busca y selecciona la propiedad GA4 que deseas vincular.
5. Haz clic en "Crear vínculo".

9. Visualiza datos con Looker Studio

Para obtener una presentación visual de los datos de Métricas web esenciales junto con las métricas de anuncios, este paso implica configurar un panel de Looker Studio. Sigue estos pasos para correlacionar las Métricas web esenciales y los ingresos publicitarios.

1. Abre esta plantilla de panel de Looker Studio.
2. Copia el panel.
3. Para actualizar la fuente de datos, selecciona tu propiedad GA4 de la lista desplegable.
4. Listo

Ten en cuenta que, para que el panel funcione y muestre los datos correctamente, estos se basan en la sintaxis y la convención de nomenclatura de este codelab.

En la primera página del panel, encontrarás una vista histórica de tu rendimiento en las Métricas web esenciales:

En la segunda página, puedes correlacionar las Métricas web esenciales con los ingresos publicitarios de Google Ad Manager o Google AdSense:

La tercera página te permite analizar el rendimiento de las Métricas web esenciales a nivel de la ruta de la página junto con las métricas relacionadas con los anuncios:

10. Conclusión

¡Felicitaciones! Aprendiste a medir y generar informes sobre las Métricas web esenciales con GA4, así como las métricas de rendimiento de los anuncios desde Google Ad Manager y Google AdSense.

Más información

• Cómo cargar anuncios de forma eficaz sin afectar la velocidad de la página
• Optimiza el procesamiento de imagen con contenido más grande
• Optimiza el cambio de diseño acumulado
• Optimiza la interacción con el siguiente procesamiento de imagen