Heap provides extra functionality for single-page web apps that other analytics tools don’t, such as automatically capturing all pushState and hashChange events.
Heap detects a pageview whenever the URL’s Path or Hash changes. In the past, if developers wanted to render new information on a page, they would typically redirect the user to a different path, and the user’s browser would load a new HTML page.
Modern front-end frameworks allow developers to rerender the contents of the page without having to redirect the user to a new HTML page. This is called a single page application (SPA). This minimizes the load time and greatly improves the user experience.
Here’s an example Angular site that re-renders the page’s content rather than navigating to a new page. As you can see, the contents of the page change, and it feels a lot faster than loading a new webpage, but here lies the problem:
The path never changes, so Heap doesn’t detect a pageview. Every event captured on this page is on the / path, even though the user is visiting a different section of the application. This can become problematic in larger applications where you will want to analyze events on specific pages.
We recommend implementing some sort of push state or routing (common in frameworks/libraries) to provide semantic/meaningful Path or Hash changes so Heap can detect that a user is navigating to a different section of the application. This will allow Heap to detect that a pageview occurred within the application.
Single-page applications are commonly developed using web frameworks. For additional consideration on things to know when using Heap in sites built with web frameworks, see Using Heap With Popular Web Frameworks & Libraries.