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

Si tu SPA usa la API de History, puedes habilitar la medición optimizada en Google Analytics para hacer un seguimiento automático de las páginas vistas en función de los eventos del 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.

Impacto en los eventos automáticos

Si implementas correctamente la medición de vistas de página virtuales en tu SPA, Google Analytics controlará otros eventos automáticos de forma adecuada. Si no se registran 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 de forma activa en una página. Sin las 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 dedicado a las pantallas individuales.

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

• El evento user_engagement se envía cuando el usuario navega de una página virtual a otra.
• El tiempo de participación de la página virtual anterior se calcula y se envía junto con el evento user_engagement, generalmente justo antes de que se procese el evento page_view para 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 de los usuarios y otras métricas para las pantallas o secciones individuales de tu SPA, lo que proporciona una comprensión más precisa del recorrido del usuario.