Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
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:
Una cuenta y una propiedad 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 información para configurar la etiqueta de Google.
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.
Verifica tu configuración de medición
Para verificar que tu aplicación de una sola página mida las vistas de página correctamente, sigue estos pasos:
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.
Navega por 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 el referente y la ubicación de la página se actualizaron correctamente.
[[["Fácil de comprender","easyToUnderstand","thumb-up"],["Resolvió mi problema","solvedMyProblem","thumb-up"],["Otro","otherUp","thumb-up"]],[["Falta la información que necesito","missingTheInformationINeed","thumb-down"],["Muy complicado o demasiados pasos","tooComplicatedTooManySteps","thumb-down"],["Desactualizado","outOfDate","thumb-down"],["Problema de traducción","translationIssue","thumb-down"],["Problema con las muestras o los códigos","samplesCodeIssue","thumb-down"],["Otro","otherDown","thumb-down"]],["Última actualización: 2025-04-29 (UTC)"],[[["This guide helps developers track page views within single-page applications using Google Analytics 4."],["Accurate tracking involves counting views for each screen a user interacts with and ensuring correct referral data for user journey analysis."],["Implementation relies on leveraging browser history changes or custom events to trigger virtual page views for different screens within the application."],["Before starting, ensure you have a Google Analytics 4 account and a Google tag implemented on your website."],["Verification involves enabling debug mode and confirming that new `page_view` events are triggered with updated page referrer and location data upon screen transitions."]]],["Developers using Google Analytics to measure page views on single-page applications (SPAs) should count page views for each user-interacted screen and accurately track the page referrer. To implement this, they can trigger virtual page views via browser history changes using the History API's `pushState()` and `replaceState()` methods, or through custom events with the `DocumentFragment` object. After implementation, debug mode should be enabled to verify new `page_view` events for each virtual screen, ensuring referrer and location data updates correctly.\n"]]
