Mide las aplicaciones de una sola página

Este documento está dirigido a 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 clientes potenciales. El formulario tiene tres pantallas:

  • Primera pantalla para capturar la información del cliente.
  • Segunda pantalla en la que los clientes indican interés en ciertos servicios.
  • Página de 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 de los SPA es contar las vistas de página de cada pantalla con la que interactúa un usuario y obtener el referente de la página correcto para que puedas rastrear correctamente el recorrido del usuario.

Antes de comenzar

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

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

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

  • Cambios en el historial del navegador (recomendado): 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 del cambio 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 las cargas de página y los cambios de página basados en eventos del historial de navegación.

    Imagen que muestra la configuración de vistas de página

  5. Guarda los cambios.