SPAs are web applications or websites that fit on a single scrollable web page, with the appropriate content loaded dynamically in response to user actions. They can support rich interactions with multiple components on a single page.

Multi-page web applications versus SPAs

Traditional web applications are typically composed of static content that require full page loads and data transmission between the client and server, as the user navigates from page to page.

Delivered as one page to the browser, an SPA does not require page reloads, even as the customer moves from one part of the application to another.

Because SPAs separate data from presentation of the data, they can redraw any part of the UI without requiring a server round-trip to retrieve the HTML. Thus, SPAs present a more fluid user experience, faster navigation, and more efficient network transfers.

The challenge of generating page analytics for SPAs

Let's say your developers recently deployed a new single-page application for your organization. As the lead data analyst, you want to use snapshot capture and overlays to generate and track usability metrics for the application. In a standard (non-SPA) application, this involves taking snapshots of each page in the application and applying the overlay to each page separately.

But with a SPA, the entire application is one page only, with a static URL. The content of that page updates dynamically as the visitor progresses through it. So even though the fields and elements of the page are the same from the time the visitor enters the application, to the time that they exit, the data on how the user interacts with those fields and elements varies over the course of the visit.

For example, the Shopping Cart on a SPA will likely have multiple variations over the course of a visitor session. Various aspects of the field, from its content, to how users interact with it, differ from the onset to the end of the visitor's session. From an analysis standpoint, how do you ensure that the page is captured in the state that you are interested in analyzing?

Use the following guidelines and recommendations when using overlays to capture page-level metrics for a single-page application.

Note: The guidelines and recommendations also apply to non-SPAs that include pages with different view states (depending on user actions, content, etc),

Guidelines and recommendations for applying Overlays to SPAs

1. Create snapshots for each page state of the SPA, so that you can capture metrics applicable to the page state and the associated screen view.

   Overlay-generated data for shared elements that span the different states of the SPA (such as a company logo, which might be displayed in the page header) are aggregated together.  Assuming the share element persists across page states, any clicks on the logo are aggregated together, unless you break out the single-page app by page states with different screenviews.

2. Because overlays rely on the screenview value when querying data, If you want data for each page state to exist separately, its recommended that you use the UI Capture to set different screenviews for each page state.

   See the developer documentation "Type 2 Screenview message" in JSON message type schemas and examples for UI Captures.