SPA
All OneDollarStats integrations—whether via the npm package or the script support all rendering patterns for web applications. You don’t need to take any extra steps to make it work with SPAs.
Using the npm Package
If you’re using the npm package, simply install it and initialize it at your app’s entry point—usually in the root layout. The configure function should be called only once during page initialization.
You can find the full npm installation guide here.
See integration examples:
Using the Script via CDN
If you’re using the script via CDN, simply add it to your HTML file inside the <head> tag or in your app’s template.
How We Track Pages in SPAs
Since client-side navigation in an SPA does not load a new HTML document and does not trigger the visibilitychange event, the analytics script sends page views whenever history.pushState() is called, as well as on the popstate event, which fires when the active history entry changes.
During client-side navigation, the script waits for the next frame to render using window.requestAnimationFrame(). This ensures that when navigating to another page in the SPA, the document has time to update its content before collecting the props for the page view for the page view from the DOM and sending the page view.