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.
[null,null,["Última actualización: 2025-04-29 (UTC)"],[[["\u003cp\u003eThis guide helps developers track page views within single-page applications using Google Analytics 4.\u003c/p\u003e\n"],["\u003cp\u003eAccurate tracking involves counting views for each screen a user interacts with and ensuring correct referral data for user journey analysis.\u003c/p\u003e\n"],["\u003cp\u003eImplementation relies on leveraging browser history changes or custom events to trigger virtual page views for different screens within the application.\u003c/p\u003e\n"],["\u003cp\u003eBefore starting, ensure you have a Google Analytics 4 account and a Google tag implemented on your website.\u003c/p\u003e\n"],["\u003cp\u003eVerification involves enabling debug mode and confirming that new \u003ccode\u003epage_view\u003c/code\u003e events are triggered with updated page referrer and location data upon screen transitions.\u003c/p\u003e\n"]]],["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"],null,["# Measure single-page applications\n\n\u003e This document is for developers who want to measure page views on their\n\u003e single-page application using Google Analytics.\n\n[Single-page applications](//developer.mozilla.org/en-US/docs/Glossary/SPA)\n(SPA) are websites that load an HTML document once and fetch any additional\ncontent using JavaScript APIs.\n\u003e Example: Suppose you have a form to acquire some leads. The form has three\n\u003e screens:\n\u003e\n\u003e - First screen to capture the customer information.\n\u003e - Second screen where customers indicate interest in certain services.\n\u003e - Third screen page to sign up for webinars related to the customer's interests.\n\nThe key to measuring page views from SPAs correctly is to count page views for\neach screen a user interacts with and get the page [referrer](//developer.%0Amozilla.org/en-US/docs/Web/API/Document/referrer) right, so you can correctly\ntrace the user journey.\n\nBefore you begin\n----------------\n\nThis page assumes that you already have:\n\n- A Google Analytics 4 account and property for your website. Learn how to\n [Set up Google\n Analytics](//support.google.com/analytics/answer/9304153).\n\n- A Google tag implemented on your website that fires when the page initially\n loads. Learn how to [Set up the Google\n tag](/analytics/devguides/collection/ga4/tag-options).\n\nImplement single-page application measurement\n---------------------------------------------\n\nTo implement accurate SPA measurement, use one of these methods to trigger a new\nvirtual page view:\n\n- Browser history changes (recommended): If your SPA uses the [History\n API](//developer.mozilla.org/en-US/docs/Web/API/History), specifically\n the `pushState()` and `replaceState()` method to update screens, use this\n option.\n\n- Custom events: If your website uses the [`DocumentFragment`](//developer.mozilla.org/en-US/docs/Web/API/DocumentFragment)\n object to render different screens, use this option.\n\nBrowser history implementation Custom event implementation\n\n\u003cbr /\u003e\n\nVerify your measurement setup\n-----------------------------\n\nTo verify your single-page application measures page views correctly:\n\n1. Enable debug mode for every tag in your SPA measurement setup. Learn how to\n [Monitor events in\n DebugView](//support.google.com/analytics/answer/7201382).\n\n2. Click through your single-page application. When you click to a new virtual\n screen, you should see a new `page_view` event in DebugView. Compare the\n `page_view` event parameters with the preceding `page_view` event to check\n if the page referrer and page location have been updated correctly."]]
