How to Track Single Page Apps in Google Analytics 4

If you're running a Single Page Application (SPA) built with a framework like React, Vue, or Angular, you might notice something odd after setting up Google Analytics 4. Your real-time reports show users arriving, but as they browse to different pages like /about or /products, GA4 doesn't seem to track any new page views. This article will explain why this happens and walk you through the simple, built-in GA4 feature to fix it for good.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Why Standard Tracking Fails on a Single Page App

Understanding the problem starts with the key difference between a traditional website and a single page app. A traditional website loads a brand-new HTML document from the server every time you click a link. That full page reload is the browser event that traditionally tells Google Analytics, "Hey, a new page has loaded, count a pageview!"

A single page app, however, lives up to its name. It loads just once. After that initial load, navigating between different sections doesn't trigger a full page reload. Instead, JavaScript dynamically rewrites the content on the current page to give the illusion of moving to a new one. The URL in the address bar may change from your-app.com/dashboard to your-app.com/settings, but in the background, you're technically still on the same initial page.

From GA4's default perspective, if there's no page reload, there's no new page view to track. The good news is that GA4 was built with modern apps in mind and includes a straightforward fix called Enhanced Measurement.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

The Simple Fix: Enabling Enhanced Measurement in GA4

Enhanced Measurement is a collection of features within GA4 that automatically tracks common user interactions without requiring you to add any extra code or configure complex tags in Google Tag Manager. One of these features is designed specifically to solve the SPA tracking problem.

This feature tells Google Analytics to listen for changes in the browser's history instead of only watching for page loads. Modern SPAs use something called the Browser History API to change the URL in the address bar. By enabling this setting, you’re simply telling GA4 to count one of these "history changes" as a new page view. Here’s how to turn it on (or confirm it’s already enabled).

Step 1: Navigate to Your Data Stream

First, log into your Google Analytics 4 account. From the home screen, click on the Admin gear icon in the bottom-left corner. In the "Property" column, find and click on Data Streams, then select the web data stream for your single page app.

Step 2: Check Your Enhanced Measurement Settings

Once you’re in your data stream details, you’ll see a section called Enhanced measurement. By default, this is usually turned on for new properties. You should see a blue toggle in the "On" position. Click the gear icon on the right to view and manage the specific events it's tracking.

Step 3: Enable Tracking for Browser History Events

This is the most important step. On the Enhanced Measurement screen, you'll see a list of interactions like "Scrolls" and "Outbound clicks." The one we care about is at the top: Page views.

Click on Show advanced settings under the "Page views" toggle. This will reveal a checkbox: Page changes based on browser history events. Make sure this box is checked. If it isn't, check it now and click Save in the top-right corner.

That's it! With this one box checked, GA4 will now automatically fire a page_view event every time your SPA changes the URL in the address bar.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

How to Make Sure It's Actually Working

Of course, you’ll want to confirm your change worked. Standard GA4 reports can take 24 hours or more to populate, so you can't just check your page reports right away. The trick is to use GA4's real-time testing tools.

Method 1: Using the GA4 Realtime Report (The Quick Check)

The Realtime report is a simple way to get a quick confirmation. It shows you activity that happened on your site in the last 30 minutes.

1. Open your single page app in a new tab.
2. Click through several different "pages" or sections of your app. For example, visit your home page, then the about page, then the contact page.
3. Go back to your GA4 account and navigate to Reports > Realtime.
4. Look at the card titled "Views by Page title and screen name." You should now see multiple page titles appear in this list, corresponding to the different sections you just browsed. If you see them, it’s working!

For more definitive and detailed proof, however, the DebugView tool is your best friend.

Method 2: Using GA DebugView (The Best Way)

DebugView gives you a granular, second-by-second stream of every event being recorded from your browser. It’s perfect for making sure specific events are firing as you expect.

1. First, you'll need a way to tell GA4 to send debug data from your browser. The easiest method is to install the official Google Analytics Debugger Chrome extension.
2. Once installed, click the extension's icon in your browser toolbar to turn it "ON." The icon will show a small "ON" badge.
3. Open your SPA and refresh the page.
4. Now, navigate through your app as you did before, clicking to several different sections or "pages."
5. In GA4, go to Admin > DebugView (it's under "Property" settings).

You will now see a live-updating timeline of events hitting your GA4 property from your browser. As you click around your app, you should see a new page_view event appear in the vertical timeline for each navigation. Click on any page_view event to inspect its parameters. You should see a parameter called page_location that contains the exact URL of the SPA page you were visiting at that moment. This is absolute proof that your tracking is correctly configured.

Troubleshooting Common SPA Tracking Issues

If you've followed the steps above and still aren't seeing page views in DebugView, here are a couple of things to check.

Is Your Routing Using the History API?

GA4's Enhanced Measurement feature specifically listens for "history events" pushed via the Browser History API. Virtually all modern SPA frameworks, like React Router (in browser mode), Vue Router, and Angular Router, use this method by default. Look at your URLs. If they look clean like myapp.com/about, you're likely using the History API.

However, if your routing uses a hash (#) in the URL, like myapp.com/#/about, it might not trigger the automatic detection. This "hash-based routing" is an older technique. If this is the case, your best solution is often to trigger page_view events manually through Google Tag Manager when the hash changes.

Graphed

Still Building Reports Manually?

Watch how growth teams are getting answers in seconds — not days.

Watch the Demo

Are You Excluding Your Own Traffic?

It's a classic mistake: you set everything up perfectly, but you have an IP filter active that excludes all traffic from your office or home. This is great for keeping your main reports clean, but it will also prevent your page views from showing up in the Realtime report or DebugView.

To check, go to Admin > Data Streams > Configure tag settings > Show all > Define internal traffic. Make sure you don't have an active rule filtering out your current IP address while you're trying to test.

Final Thoughts

Tracking your single page app in Google Analytics 4 seems daunting, but it often comes down to activating a single setting. By ensuring "Page changes based on browser history events" is enabled in your Enhanced Measurement configuration, you can get the accurate page view data you need to understand user behavior and properly attribute conversions.

Once you have that accurate GA4 data flowing, the next challenge is often combining it with information from other platforms to see the full picture. Trying to manually stitch together your website's behavioral data with sales figures from Shopify or lead data from Salesforce is exactly what kills so many marketing teams' momentum. We built Graphed to solve this by connecting all your data sources into one place. From there, you just ask simple, natural language questions to instantly build real-time reports and dashboards, allowing you to get answers like “which marketing channels in Google Analytics are driving the most revenue in Shopify?” in seconds, not hours.