Mide aplicaciones de una sola página con Google Tag Manager

En este instructivo, se muestra cómo configurar la medición de Google Analytics para una aplicación de una sola página (SPA) con Google Tag Manager. Aprenderás a configurar tu propiedad de Google Analytics, habilitar las variables necesarias de GTM y crear etiquetas que se activen con los cambios en el historial.

Antes de comenzar

En este instructivo, se supone que ya tienes lo siguiente:

• Una cuenta y una propiedad de Google Analytics
• Un contenedor de Google Tag Manager instalado en tu SPA
• El rol de editor (o superior) tanto para Google Analytics como para Google Tag Manager

Paso 1: Prepara el flujo de datos de GA4

Para hacer un seguimiento manual de los eventos page_view en una SPA, primero debes inhabilitar las vistas de página automáticas basadas en el historial en GA4 para evitar el doble recuento.

1. Abre Google Analytics.
2. En Administrador, en Recopilación y modificación de datos, haz clic en Flujos de datos.
3. Selecciona tu flujo de datos web.
4. En Medición optimizada, haz clic en el ícono de configuración .
5. En Vistas de página > Mostrar configuración avanzada, borra Cambios en la página basados en eventos del historial de navegación.
6. Haz clic en Guardar.

Paso 2: Habilita las variables integradas de Historial en Tag Manager

Para usar activadores o variables basados en el historial en GTM, primero debes habilitar las variables integradas de Historial.

1. Abre Google Tag Manager.
2. En tu espacio de trabajo, navega a Variables.
3. En Variables integradas, haz clic en Configurar.
4. En la sección Historial, habilita las siguientes variables:
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. Cierra el panel de configuración.

Nota: Estas variables no son estrictamente necesarias para la configuración básica de vistas de página. Solo se usan si deseas filtrar el activador o implementar una lógica personalizada, como la lógica de la página anterior que se menciona en la nota final de esta página.

Nota: Es posible que en documentación anterior se haga referencia a Old History URL o New History URL. Estas no son variables integradas estándar. En su lugar, usa las variables que se indican.

Paso 3: Crea el activador de cambio de historial

A continuación, crea un activador que se active cada vez que se produzca un evento de cambio de historial (como pushState o replaceState) en tu SPA.

1. En tu espacio de trabajo de Tag Manager, navega al menú Activadores.
2. Haz clic en Nuevo.
3. En Configuración del activador, elige el activador Cambio de historial.
4. (Opcional) Si solo deseas hacer un seguimiento de ciertos cambios en la pantalla, actualiza el activador para que se active en Algunos cambios en el historial.
5. Asigna un nombre al activador (p.ej., "Cambio de historial") y haz clic en Guardar.

Paso 4: Crea la etiqueta de Google

Ahora, crea una etiqueta de Google que actualice el parámetro page_location cada vez que se produzca un cambio en el historial.

1. En el menú Etiquetas, haz clic en Nueva.
2. En Configuración de la etiqueta, elige la etiqueta de Google.
3. Ingresa tu ID de etiqueta (el mismo ID que se usó para tu etiqueta de Google inicial).

4. En Configuration settings, agrega los siguientes parámetros:

   • page_location: {{Page URL}}
   • page_title: {{Page Title}}
   • update: true
   Nota: El parámetro update combina los valores de configuración en la configuración de la etiqueta existente y suprime un evento page_view duplicado inmediato. page_referrer no se incluye aquí porque Google Analytics hace un seguimiento automático del sitio de referencia externo original en la carga inicial de la página, y omitirlo permite que Google Analytics complete automáticamente la URL de la página virtual anterior como sitio de referencia para el seguimiento de rutas de navegación en tus informes.

5. Asigna un nombre a la etiqueta (por ejemplo, "Etiqueta de Google: Actualización de SPA") y haz clic en Guardar.

   Nota: No agregues un activador en la sección Activación para esta etiqueta de Google. Se activa como una etiqueta de configuración con la secuenciación de etiquetas en el paso 5.

Paso 5: Envía el evento virtual page_view

Por último, crea una etiqueta de evento de GA4 para enviar el evento page_view real para cada carga de página virtual.

1. Haz clic en Nuevo en el menú Etiquetas.
2. En Configuración de la etiqueta, elige Google Analytics: Evento de GA4.
3. Ingresa tu ID de medición.
4. Establece el Nombre del evento como page_view.
5. En Configuración avanzada > Secuencia de etiquetas, selecciona Activa una etiqueta antes de que se active el evento de GA4: Vista de página virtual y, luego, selecciona la etiqueta Etiqueta de Google - Actualización de SPA que creaste en el paso 4.
6. En Activación, selecciona el activador Cambio de historial que creaste en el paso 3.
7. Asigna un nombre a la etiqueta (por ejemplo, "Evento de GA4: Vista de página virtual") y haz clic en Guardar.

Paso 6: Verificar tu configuración

Para asegurarte de que tus vistas de página virtuales se registren correctamente, haz lo siguiente:

1. En Tag Manager, haz clic en Vista previa para ingresar al modo de vista previa.
2. Navega por tu SPA.
3. En DebugView de Google Analytics, verifica que aparezca un nuevo evento page_view para cada cambio de pantalla.
4. Verifica que los valores de page_location coincidan con tus expectativas.

Nota: El uso de {{Referrer}} estándar captura la fuente inicial que dirigió al usuario a tu sitio. Para hacer un seguimiento de la página virtual anterior dentro de tu SPA como URL de referencia, deberás implementar una variable personalizada de GTM para almacenar la ubicación de la página anterior.