Single page apps & virtual page change implementation

If your site uses infinite scroll, serves up content dynamically, or pages change without the URL subsequently changing or the DOM refreshing, you will need to do some additional implementation for Chartbeat to capture those pageviews.

Anytime a visitor navigates to a new page via virtual page change, the virtualPage function should be called. This function is specifically designed to register dynamic page change events with our tracker, and can be attached to click/swipe events, or to a pixel that is used to trigger content changes. Best practice is to ensure that the virtualPage function is called each and every time that your website serves up new changes to users dynamically.

You’ll need to set up logic to handle these lines of code:

pSUPERFLY.virtualPage({
      sections: "New Section 1,New Section 2",
      authors: "New Author",
      path: "/newpath",
      title: "New Title"
    }):

The section, author, path and title of the newly loaded page must be consistent with those values configured by your team in our JavaScript tag. If we are not passed the updated section, author, path, or title information for the new page, our tracker will attribute the values received from the user's previous page to this new pageview triggered by the virtualPage call.

If for example the dynamically loaded page has no section or author data, simply set that variable to an empty string to prevent our tracker from associating metadata from the previously viewed page of your site with the newly loaded page. For example:

authors:"",

virtualPage should never be called when a user initially arrives on a page from an external source, and should only be called when a user navigates to subsequent pages without causing the DOM to be refreshed. The initial pageview event will be captured instead by our tracker, chartbeat.js.

Next steps

The next article covers how to populate users' subscriber status data in your Chartbeat snippet so your team can filter on Guest, Registered, or Subscribed visitors to your website in our Real-time Dashboard.