Single Page Application

Modern web applications often update content dynamically without performing a full browser refresh. Navigation may occur through changes in query parameters (?id=1), hash fragments (#section), or internal paths (/dashboard/settings). In such cases, traditional page load detection may not capture these transitions accurately.

The Single Page Application (SPA) setting ensures that these dynamic URL changes are treated as valid page navigations. This allows proper tracking, correct display of guidance elements, and accurate triggering of Insights, Pins, and Announcements.

Steps

  1. Navigate to the Manage tenant settings
  2. Go to the Applications
  3. Create / Edit Application
  4. Below the Single page application section will displayed

Single Page Application Toggle button

Purpose

The Single Page Application setting ensures that dynamic URL changes are treated as valid page navigations, even when no browser refresh occurs.

This allows:

  • Accurate Insights page load tracking
  • Correct display of Pins based on current page
  • Proper visibility of Announcements
  • Prevention of duplicate tracking events
  • Stable behavior during rapid navigation

Configuration Example

Example 1: Query Parameter Based Navigation

A key must be defined only for query parameters. If the value of the configured key changes, the system treats it as a new page.

Configured Query Key: page

Application URL: https://example-app.com/dashboard?page=1

Navigation occurs as follows: ?page=1 → ?page=2

If the SPA setting is enabled and the key page is configured, the change from page=1 to page=2 will be treated as a new page load.

Result:

  • Insights records proper page load events for the new page
  • Pins update according to the page
  • Announcements refresh accordingly

Example 2: Hash-Based Navigation

No configuration is required for hash changes.

https://app.com/profile#overview to https://app.com/profile#security

Result:

  • Automatically detected as a new page
  • Guidance updates accordingly

Example 3: Dynamic Tab Navigation

No key configuration is required for path changes.

https://app.com/dashboard to https://app.com/settings

Result:

  • Automatically treated as a new page
  • Relevant Pins and Announcements displayed