Mide las aplicaciones de una sola página

Este documento está dirigido a los desarrolladores que desean medir las vistas de página en su aplicación de una sola página con Google Analytics.

Las aplicaciones de una sola página (SPA) son sitios web que cargan un documento HTML una vez y recuperan cualquier contenido adicional con las APIs de JavaScript.

Ejemplo: Supongamos que tienes un formulario para adquirir algunos clientes potenciales. El formulario tiene tres pantallas:

• Primera pantalla para capturar la información del cliente
• Segunda pantalla en la que los clientes indican su interés en ciertos servicios
• Tercera pantalla para registrarse en seminarios web relacionados con los intereses del cliente

La clave para medir correctamente las vistas de página de las SPA es contarlas para cada pantalla con la que interactúa un usuario y obtener la página de referencia correcta, de modo que puedas hacer un seguimiento correcto del recorrido del usuario.

Antes de comenzar

En esta página, se supone que ya tienes lo siguiente:

• Una cuenta y una propiedad de Google Analytics 4 para tu sitio web (obtén más información para configurar Google Analytics) Set up Google Analytics.

• Una etiqueta de Google implementada en tu sitio web que se activa cuando se carga la página por primera vez (obtén más información para configurar la etiqueta de Google)

Implementa la medición de aplicaciones de una sola página

Para implementar una medición precisa de las SPA, usa uno de estos métodos para activar una nueva vista de página virtual:

• Cambios en el historial del navegador (recomendado): Si tu SPA usa la API de History, específicamente los métodos pushState() y replaceState() para actualizar las pantallas, usa esta opción.

• Eventos personalizados: Si tu sitio web usa el DocumentFragment objeto para renderizar diferentes pantallas, usa esta opción.

Implementación del cambio en el historial del navegador

Si tu SPA usa la API de History, puedes habilitar la medición mejorada en Google Analytics para hacer un seguimiento automático de las vistas de página en función de los eventos del historial del navegador.

Habilita la medición mejorada en GA4

Para medir page_views automáticamente en función del historial del navegador, haz lo siguiente:

1. Abre Google Analytics.

2. En Administrador, en Recopilación y modificación de datos, haz clic en Flujos de datos > Web.

3. En Medición mejorada, mueve el interruptor a Activada para habilitar todas las opciones.

4. Haz clic en para editar las opciones individuales. En Vistas de página, haz clic en Mostrar configuración avanzada. Asegúrate de habilitar Cargas de página y Cambios en páginas basados en eventos del historial de navegación.

   

5. Guarda los cambios.

Nota: Cuando la medición mejorada está habilitada para "Cambios en páginas basados en eventos del historial de navegación", Google Analytics escucha automáticamente los eventos del historial (como los que se usan en las SPA) y envía eventos page_view. No es necesario que configures variables o activadores de historial específicos en Google Tag Manager para enviar vistas de página a GA4.

Usa activadores de Google Tag Manager para eventos del historial

Si necesitas activar otros tipos de etiquetas en Google Tag Manager en función de los cambios en el historial del navegador, como enviar datos a otras plataformas de marketing, puedes usar el tipo de activador "Cambio de historial".

Cuando configures etiquetas o variables para que funcionen con el activador Cambio de historial, asegúrate de usar las Variables integradas correctas que proporciona Google Tag Manager:

• History New URL Fragment: Es el fragmento de la URL después del evento del historial.
• History Old URL Fragment: Es el fragmento de la URL antes del evento del historial.
• History New State: Es el nuevo objeto de estado del historial.
• History Old State: Es el objeto de estado del historial anterior.
• History Source: Es la fuente del evento del historial (como popstate, pushState, replaceState).

Es posible que primero debas habilitar estas Variables integradas en Google Tag Manager en Variables > Configurar.

Para obtener más detalles sobre este activador, consulta Activador Cambio de historial.

Verifica tu configuración de medición

Para verificar que tu aplicación de una sola página mida correctamente las vistas de página, haz lo siguiente:

1. Habilita el modo de depuración para cada etiqueta en la configuración de medición de tu SPA. Obtén más información para supervisar eventos en DebugView.

2. Haz clic en tu aplicación de una sola página. Cuando hagas clic en una nueva pantalla virtual, deberías ver un nuevo evento page_view en DebugView. Compara los parámetros del evento page_view con el evento page_view anterior para verificar si la página de referencia y la ubicación de la página se actualizaron correctamente.

Impacto en los eventos automáticos

Si implementas correctamente la medición de vistas de página virtuales en tu SPA, Google Analytics manejará adecuadamente otros eventos automáticos. Si no se registran las vistas de página virtuales para los cambios de pantalla, Google Analytics trata la SPA como una sola página, lo que genera métricas sesgadas.

Por ejemplo, el evento user_engagement mide el tiempo que un usuario pasa activamente en una página. Sin vistas de página virtuales, todo el tiempo de participación se atribuye a la carga inicial de la página, lo que imposibilita analizar el tiempo que se pasa en pantallas individuales.

Cuando la medición de vistas de página virtuales se implementa correctamente, sucede lo siguiente:

• El evento user_engagement se envía cuando el usuario navega de una página virtual a otra.
• Se calcula el tiempo de participación de la página virtual anterior y se envía junto con el evento user_engagement, por lo general, justo antes de que se procese el evento page_view de la página virtual nueva.
• Otros eventos, como los clics o los desplazamientos, se asocian con el page_location de la página virtual que el usuario está viendo en ese momento.

Esto te permite analizar la participación del usuario y otras métricas para pantallas o secciones individuales dentro de tu SPA, lo que proporciona una comprensión más precisa del recorrido del usuario.