Guías prácticas

Añade Google Analytics 4 a Webflow con Tag Manager (parte 2)

__wf_reservado_decorativo
Preferred source on google logo
__wf_reserved_heredar
December 6, 2023

  · 5 min

Parte 2: crea una propiedad de Google Analytics 4, añade la etiqueta de Google en Tag Manager con tu Measurement ID, publica el contenedor y compruébalo con Tag Assistant.

Normalmente es muy sencillo añadir Google Analytics a un proyecto de Webflow: copias el ID de seguimiento, abres los ajustes de Webflow y lo pegas. Con el lanzamiento de Google Analytics 4, sin embargo, las cosas han cambiado un poco, sobre todo porque la integración sencilla de Webflow todavía no admite Google Analytics 4 y solo permite añadir Universal Analytics.

Actualización: hoy GA4 funciona sin problemas en Webflow, pero Tag Manager sigue ofreciendo mucha más flexibilidad.

Actualización, octubre de 2026: Google ha cambiado algunas cosas desde que escribimos esto. Universal Analytics dejó de procesar datos en julio de 2023 (y Google Optimize se cerró en septiembre de 2023), así que puedes saltarte los pasos de Universal Analytics que aparecen más abajo y configurar solo GA4. En Tag Manager, la etiqueta "Google Analytics: GA4 Configuration" se llama ahora simplemente Google tag, y el Measurement ID (empieza por G-) se introduce en su campo Tag ID. Webflow también ha añadido un ajuste nativo de Google tag en Site settings, Apps & Integrations, así que si lo único que quieres son las páginas vistas básicas, ya no necesitas Tag Manager. Aun así, nos sigue gustando Tag Manager por su flexibilidad, como verás en nuestro artículo sobre el seguimiento de eventos en GA4. Si prefieres ejecutar tus etiquetas en el edge, echa un vistazo a nuestra guía de Cloudflare Zaraz y Google Analytics 4 en Webflow.

En Milk Moon Studio somos un estudio de Webflow centrado en el diseño, y como diseñador de Webflow querrás la solución más limpia, y Tag Manager lo es. Además de darte una enorme libertad para las funciones de seguimiento avanzadas y para implementar fácilmente el seguimiento de eventos, mantiene todo ordenado: se acabó la basura en tu etiqueta <head>, solo Tag Manager, y todo lo demás dentro de Tag Manager. Ya hemos explicado por qué deberías usar siempre Tag Manager en otro artículo, y también tenemos artículos sobre el seguimiento de los envíos de formularios de Webflow en GA4 y sobre los eventos en Tag Manager, pero eso lo dejamos para otro día. Para la Parte 1 de Instalar Google Tag Manager y Google Analytics en Webflow, entra aquí.

Pero primero:

Paso 1: configurar Google Analytics

Vamos a ver rápidamente cómo configurar tu cuenta de Google Analytics 4 y tu cuenta de Universal Analytics (atento a otro artículo sobre los ajustes avanzados de GA4 y UA).

Crear una cuenta de Google Analytics 4 (y una de Universal Analytics, si la quieres)

Regístrate, pulsa Create Account y ponle un nombre.

Nombre de la cuenta de Google Analytics
Nombre de la cuenta de Google Analytics

Ahora pulsa siguiente e introduce un nombre para la propiedad, selecciona tu país (el país del sitio), la zona horaria y la moneda, y pulsa Advanced si quieres configurar una cuenta UA (Universal Analytics; la querrás si vas a usar cosas como Google Optimize y las Smart Ads de Google Ads, otro artículo más sobre eso en camino).

Configurar los detalles de la propiedad de Google Analytics
Configurar los detalles de la propiedad de Google Analytics

Adelante, marca la casilla de Advanced para la cuenta UA si la vas a necesitar (mejor hacerlo ya, no te costará nada).

Activar Universal Analytics
Activar Universal Analytics

Yo me voy a saltar el siguiente paso, pero tú marca las casillas que te correspondan y luego pulsa Create.

Ahora vamos a crear tu flujo de datos (data stream): selecciona Web.

Configuración del flujo de datos (Data Stream) de Google Analytics 4
Configuración del flujo de datos (Data Stream) de Google Analytics 4

Ahora puedes introducir tu URL, seleccionar https para Webflow (ya que obtienes un certificado SSL) y poner otro nombre. Todo lo demás puedes dejarlo marcado, lo vas a necesitar.

URL y nombre del flujo de datos de Google Analytics 4
URL y nombre del flujo de datos de Google Analytics 4

Y ya está configurado: copia el Measurement ID de la página siguiente y ve a Tag Manager.

Paso 2: configurar tu etiqueta de Google Analytics 4

Measurement ID del flujo de datos de Google Analytics
Measurement ID del flujo de datos de Google Analytics

Abre el contenedor de Tag Manager del primer artículo. Ahora ve al Workspace, luego a Tags y crea una etiqueta.

Nueva etiqueta de Google Analytics 4 en Tag Manager
Nueva etiqueta de Google Analytics 4 en Tag Manager

Ahora ponle un nombre a tu etiqueta y elige el tipo de etiqueta que quieres añadir.

Añadir una nueva etiqueta GA4 en Google Tag Manager
Añadir una nueva etiqueta GA4 en Google Tag Manager

Selecciona la etiqueta GA4 Configuration.

Etiqueta GA4 Configuration de Google Analytics
Etiqueta GA4 Configuration de Google Analytics

Pega el Measurement ID de GA4 y selecciona un activador (Trigger).

Measurement ID de la etiqueta de configuración de Google Analytics en Tag Manager
Measurement ID de la etiqueta de configuración de Google Analytics en Tag Manager

Selecciona el activador All Pages.

Activador All Pages en Google Tag Manager para la etiqueta GA4
Activador All Pages en Google Tag Manager para la etiqueta GA4

Ahora pulsa Save y crea una nueva etiqueta si también vas a añadir una cuenta de Universal Analytics.

Configuración de la etiqueta de Google Analytics 4 completada
Configuración de la etiqueta de Google Analytics 4 completada

Añadir Universal Analytics

Si vas a hacer este paso, vuelve a Analytics, cambia de propiedad, abre Tracking y copia el código de seguimiento UA.

ID de seguimiento de Universal Analytics
ID de seguimiento de Universal Analytics

Ahora vuelve a Tag Manager, crea una nueva etiqueta, ponle un nombre y selecciona la etiqueta que quieres usar.

Selección de la etiqueta de Universal Analytics en Google Tag Manager
Selección de la etiqueta de Universal Analytics en Google Tag Manager

Crea una nueva variable en el menú desplegable.

Selección de la variable de seguimiento de Universal Analytics en Tag Manager
Selección de la variable de seguimiento de Universal Analytics en Tag Manager

Ponle un nombre a la variable y pega el código de seguimiento.

Añadir el ID de seguimiento de Universal Analytics a la configuración de la variable en Google Tag Manager
Añadir el ID de seguimiento de Universal Analytics a la configuración de la variable en Google Tag Manager

Pulsa Save y selecciona el activador All Pages.

Selección de la variable UA en la etiqueta de configuración de Universal Analytics de Tag Manager
Selección de la variable UA en la etiqueta de configuración de Universal Analytics de Tag Manager

El 1 será tu variable y el 2 será el activador All Pages. Pulsa Save.

Ahora publica pulsando Submit.

Publicar la etiqueta de Universal Analytics en Google Tag Manager
Publicar la etiqueta de Universal Analytics en Google Tag Manager

Después pulsa Publish y listo.

Vamos a probarlo

Publicar la etiqueta y enviar los cambios en Google Tag Manager
Publicar la etiqueta y enviar los cambios en Google Tag Manager

Asegúrate de haber instalado Tag Assistant. Más información sobre esto en la parte 1. Ve a tu página. Pulsa Enable en la extensión y actualiza la página (command+R). La extensión debería mostrar el número de etiquetas que detecta y tus flamantes etiquetas de analítica.

Usar Google Tag Assistant para probar las etiquetas de Google Analytics
Usar Google Tag Assistant para probar las etiquetas de Google Analytics

El 1 es mi etiqueta GA4, el 2 es mi etiqueta de Universal Analytics y el 3 es mi contenedor de Tag Manager. Debajo verás los IDs de contenedor, que deben coincidir con los que tienes en Google Analytics.

Preguntas frecuentes

¿Cómo añado Google Analytics a Webflow?

Tienes dos opciones. La rápida es el ajuste integrado de Google tag de Webflow, en Site settings, Apps & Integrations, donde pegas tu ID de Google tag. La flexible, y la que explica este artículo, es añadir una etiqueta de Google Analytics 4 dentro de Google Tag Manager con tu Measurement ID y el activador All Pages, y después publicar el contenedor. Si todavía no has instalado Tag Manager, empieza por la parte 1 sobre cómo añadir Google Tag Manager a Webflow.

¿Sigo necesitando una propiedad de Universal Analytics?

No. Universal Analytics dejó de procesar datos el 1 de julio de 2023 en las propiedades estándar, y las últimas propiedades 360 se desactivaron el 1 de julio de 2024, así que una etiqueta UA nueva no recopilará nada. Configura solo Google Analytics 4 y sáltate los pasos de Universal Analytics de este artículo.

¿Dónde encuentro mi Measurement ID de Google Analytics 4?

En Google Analytics ve a Admin, luego a Data streams, haz clic en tu flujo web y copia el Measurement ID que aparece en la parte superior de los detalles del flujo. Empieza por G- seguido de letras y números. Es el ID que pegas en la etiqueta de Tag Manager en el Paso 2.

¿Por qué la etiqueta GA4 Configuration se llama ahora Google tag?

Google le cambió el nombre. Cuando escribimos este artículo, el tipo de etiqueta se llamaba "Google Analytics: GA4 Configuration", y hoy eliges Google tag como tipo de etiqueta e introduces tu Measurement ID como Tag ID. El resto de los pasos son básicamente los mismos, así que las capturas de pantalla se verán algo distintas a lo que ves en Tag Manager.

Felicidades, ya has terminado. Escríbenos en los comentarios si tienes cualquier duda, y no olvides visitar la sección How-To de nuestro blog para ver más tutoriales. Tu siguiente paso debería ser vincular tu cuenta de Google Analytics 4 con BigQuery; aquí tienes el tutorial. Para saber más sobre cómo acelerar las etiquetas retrasando su carga, echa un vistazo a este artículo.

Actualización: hemos añadido contenido en vídeo al principio del artículo para que sea más fácil seguirlo, así que esperamos que ayude. Suscríbete al canal para estar al día de nuestros últimos tutoriales y novedades.

Preferred source on google logo

Compartir

Todas las publicaciones

__wf_reserved_heredar