Mide las aplicaciones de una sola página

Este documento está dirigido a los desarrolladores que deseen medir las vistas de páginas 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 mediante 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
  • Es la segunda pantalla en la que los clientes indican interés en ciertos servicios.
  • Página de la tercera pantalla para registrarse en seminarios en línea relacionados con los intereses del cliente.

La clave para medir correctamente las vistas de página desde las SPA es contar las páginas vistas en cada pantalla con la que interactúa un usuario y hacer que la referrer de la página sea correcta, de modo que puedas hacer un seguimiento correcto del recorrido del usuario.

Antes de comenzar

En esta página, se da por sentado que ya cuentas con lo siguiente:

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

Para implementar una medición de SPA precisa, utiliza uno de estos métodos a fin de activar una vista de página virtual nueva:

  • Cambios en el historial del navegador (recomendados): Si tu SPA usa la API de History, específicamente el método pushState() y replaceState() para actualizar 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 de cambios 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 optimizada, mueve el interruptor a Activada para habilitar todas las opciones.

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

    Imagen que muestra el parámetro de configuración de vistas de página

  5. Guarda los cambios.