GA4 Single Page Application Tracking: How to Fix Missing Pageviews

Single Page Applications (SPAs) built with React, Angular, Vue, and similar frameworks update content without fully reloading the browser document. This can cause GA4 to miss pageviews after the initial page load.

Why do GA4 pageviews go missing in SPAs?

Traditional websites load a new document for every page. SPAs instead use client-side routing to update the URL and content without triggering a new document load.

As a result, GTM's Container Load trigger and GA4's initial page_view event fire only once. Subsequent route changes may not be tracked correctly.

GA4 Enhanced Measurement can detect browser history changes, but it may record outdated page titles or count non-navigation changes such as filters, tabs, and modals as pageviews.

What is the best solution?

For reliable SPA tracking, send a custom dataLayer event from the application's router after navigation is complete.

The event should include:

• page_location
• page_path
• page_title
• page_referrer

GTM can then use a Custom Event trigger to send a GA4 page_view event.

This approach gives developers better control over when a route should count as a pageview and ensures that the page title and URL match the content users actually see.

What about the GTM History Change trigger?

A GTM History Change trigger can provide a faster solution when developers cannot modify the application.

However, it may also fire for state changes that aren't real page navigations. You may need exclusion conditions to prevent false pageviews.

For production analytics and experimentation, a custom dataLayer push from the application's router provides greater control.

How do you prevent duplicate pageviews?

Double counting is a common SPA tracking problem.

If you manually send page_view events, disable automatic history-based pageview tracking and configure the Google tag appropriately. Otherwise, both automatic and manual tracking can record the same route change.

How should you validate SPA tracking?

Test the implementation across multiple routes and browser navigation.

Check that:

• Each route generates one pageview.
• Page titles match the displayed page.
• Back and forward navigation work correctly.
• Filters and modals don't create false pageviews.
• The entry page isn't counted twice.
• Scroll and interaction tracking continues after route changes.
• GA4 DebugView receives the correct parameters.

Final takeaway

Accurate GA4 tracking for SPAs requires more than installing the standard GA4 or GTM setup. Route changes need an explicit tracking mechanism that understands the application's navigation lifecycle.

For production analytics and A/B testing, a custom dataLayer push from the router provides the most reliable control over SPA pageviews.

Read the complete guide:
https://www.brillmark.com/ga4-single-page-application-tracking-how-to-fix-missing-pageviews-in-react-angular-and-vue/