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.
• Página de la 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 contar las vistas de página de cada pantalla con la que interactúa un usuario y obtener el referrer de la página correcto, 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.

• Es una etiqueta de Google implementada en tu sitio web que se activa cuando se carga la página inicialmente. 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 objeto DocumentFragment para renderizar diferentes pantallas, usa esta opción.

Implementación del historial del navegador Implementación de eventos personalizados

Implementación del cambio en el historial del navegador

Habilita la medición optimizada 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, mueva el interruptor a Activada para habilitar todas las opciones.

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

   

5. Guarda los cambios.

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 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 se actualizaron correctamente el referente de la página y la ubicación de la página.