Skip to content

Single-Page Application (SPA) setup and configuration


In Single Page Applications (SPAs), users can navigate between different pages without requiring the browser to make full page requests. For these types of websites, you want to send a Parse.ly pageview on each virtual navigation event (push and pop events). The Parse.ly tracker can automatically detect and track these events, with no additional integration required.

Note

Getting started with a SPA? Let support@parsely.com know, and we’ll activate a version of the Parse.ly tracker that automatically tracks SPA-style page navigation.

How Parse.ly SPA tracking works

Upon request, Parse.ly support will activate SPA autotracking. This version of the Parse.ly tracker listens for virtual navigation changes and sends pageview events when detected.

Under the hood, the tracker listens for various calls to the browser’s history interface.

Is the Parse.ly SPA tracking compatible with my SPA?

Parse.ly SPA tracking should work with any common framework, but it has been specifically tested and confirmed for the following:

  • React.js
  • Gatsby.js
  • Next.js

I originally integrated my SPA using dynamic tracking, how can I migrate to the new SPA tracking integration?

This is easy, and only takes a few steps and coordination with the Parse.ly team.

  1. You add a configuration that deactivates SPA autotrack: var PARSELY = window.PARSELY || {}; PARSELY.spa = PARSELY.spa || {}; PARSELY.spa.autotrack = false;
  2. Parse.ly activates the SPA tracker feature
  3. You update your site to remove dynamic tracking (manual calls to PARSELY.trackPageView() based on history state changes) AND re-enable SPA autotrack (revert the change from the first step)

Last updated: October 07, 2024