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 de Google Tag Manager (GTM) precompilada y a enviar los datos a una propiedad de Google Analytics 4 (GA4). También aprenderás a extraer datos de Google Ad Manager y Google AdSense a GA4 para correlacionar los datos de campo de las Métricas web esenciales y las métricas de rendimiento de los anuncios con un panel de Looker Studio precompilado.

Actividades

• Importar y configurar una etiqueta en tu contenedor de Google Tag Manager
• Medir las Métricas web esenciales de la página web en GA4
• Configurar una etiqueta del evento de GA4 en Google Tag Manager
• Explorar los datos de Métricas web en la dataLayer y en los informes de GA4
• Vincular tu propiedad GA4 con Google Ad Manager y Google AdSense
• Correlacionar 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 de 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. Agrega la plantilla de etiqueta de GitHub a GTM

La medición de las Métricas web esenciales a través de una plantilla de etiqueta de GTM se basa en la web-vitals biblioteca. 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 espacio de trabajo nuevo y, luego, ingresa un nombre (p.ej., "Medición de Métricas web esenciales").
3. Ve a "Plantillas".
4. En la sección "Plantillas de etiquetas", haz clic en el botón "Nueva".

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

6. Selecciona el archivo TPL que descargaste anteriormente de tu computadora.
7. Haz 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 espacio de trabajo de Google Tag Manager, ve a "Etiquetas".
2. Para agregar la etiqueta de Métricas web, haz clic en "Nueva", luego en "Configuración de la etiqueta" y elige la etiqueta "Métricas web" en la sección "Personalizadas".
3. El siguiente paso es configurar los diferentes parámetros. Todos los parámetros se explican en el repositorio de GitHub. Para que este codelab y el panel final funcionen, los siguientes parámetros son suficientes.

4. Aplica uno de los activadores de página vista, p.ej., el activador "Todas las páginas".
5. Si es necesario, agrega excepciones de activadores.
6. Nombra la etiqueta como "Métricas web esenciales - Todas las páginas" y guárdala.

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

Para ver la etiqueta en acción, cambia al modo de vista previa de Google Tag Manager. Se abrirá Tag Assistant y te pedirá una URL para obtener una vista previa y depurar tu configuración. 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 independiente con la URL proporcionada.

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

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

6. Haz clic en el primero y, a la derecha, abre la pestaña "Llamada a la API", donde verás los datos que se enviaron desde la plantilla de etiqueta a la dataLayer.

7. Consulta también las otras entradas de los eventos "web_vitals". Usa la web-vitals.js documentación 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 la dataLayer y enviarlos a GA4, debes hacer lo siguiente:

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

Crea el activador

1. En tu espacio de trabajo de Google Tag Manager, ve a "Activadores".
2. Para agregar un activador nuevo, haz clic en "Nueva", luego en "Configuración del activador" y elige "Evento personalizado" en la sección "Otros".
3. Establece "web_vitals" en el campo Nombre del evento, nombra el activador y guarda los cambios.

Crea las variables de dataLayer

1. En tu espacio de trabajo de Google Tag Manager, ve a "Variables".
2. Crea una variable nueva definida por el usuario del tipo "Variable de capa de datos".
3. Establece "webVitalsData.name" en el campo Nombre de la variable de capa de datos, nombra la variable (p.ej., "DLV - webVitalsData.name") y guarda los cambios.

4. Repite estos pasos para las otras cuatro variables de capa de datos obligatorias. 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 obtener las siguientes variables dataLayer definidas por el usuario:

Crea la etiqueta del evento de GA4

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

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

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

5. Agrega las otras variables dataLayer como parámetros de eventos, como se muestra en la captura de pantalla. También 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 eventos como dimensiones personalizadas en la IU de GA4.
7. Aplica parámetros de configuración adicionales según los requisitos de configuración de GA4.
8. Establece el evento personalizado "web_vitals" como activador para la etiqueta de GA4.
9. Si es necesario, agrega excepciones de activadores.

6. Verifica los datos en GA4

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

1. Para interactuar con la página, desplázate y haz clic en los elementos o los espacios en blanco.
2. Luego, vuelve a la pestaña con Tag Assistant y al modo de vista previa de Google Tag Manager.
3. A la izquierda, haz clic en cada una de las entradas "web_vitals" y confirma que se active la etiqueta de Métricas web esenciales de GA4.

4. Para validar que los datos se extraigan correctamente de la dataLayer, haz clic en la tarjeta para abrir la etiqueta de GA4. Asegúrate de mostrar las variables como valores.

5. Ahora, cambia a tu propiedad GA4 y abre el informe En tiempo real.
6. En la tarjeta "Recuento de eventos por nombre del evento", puedes validar si tus eventos de Métricas web esenciales se recopilan 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 espacio de trabajo.

1. Abre tu espacio de trabajo de Google Tag Manager.
2. En la esquina superior derecha de la IU, haz clic en "Enviar".
3. Proporciona un nombre y una descripción de la versión, y haz clic en "Publicar" para que tu configuración esté disponible.

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 la sección "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 haz clic en "Confirmar".
5. Guarda la actualización.
6. Ve a "Administrador" -> "Cuentas vinculadas" -> "Google Analytics 4".
7. Haz clic en "Nuevo vínculo a la propiedad Google Analytics 4".
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 de 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 en la lista desplegable.
4. Listo

Ten en cuenta que, para que el panel funcione y muestre los datos correctamente, los datos dependen de la sintaxis y la convención de nombres de este codelab.

La primera página del panel te proporcionará una vista histórica del rendimiento de tus 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 acceso de la página junto con las métricas relacionadas con los anuncios:

10. Conclusión

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

Más información

• Correlaciona las Métricas web esenciales y los ingresos publicitarios con las herramientas de Google
• Carga anuncios de manera 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 Interaction to Next Paint