Tracking Virtual Page Change

This article covers using our virtualPage function to track virtual page change on your site. This implementation is only required for sites that use virtual page change.

Single page apps & virtual page change implementation

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

Anytime a visitor internally 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.

Optional: End Tracking

Note: Most integrations will never need to use the endTracking() function

If your website has virtual pages you don't wish to track please call pSUPERFLY.endTracking() when a user arrives to the non-tracked page via an internal page on your website. If the user then moves on to another dynamic page (i.e. a page that loads without a page refresh) and you want to track it, call virtualPage again for that new dynamic page.

Sample flow:

Step	User Action	Chartbeat Action
1	User arrives on homepage from an external source	The chartbeat.js tracker handles the first pageview; virtualPage should not be called.
2	User moves from homepage to a dynamic article page (i.e. an article page that loads without a page refresh)	Call virtualPage for the new page
3	User moves from the article page to a dynamic page you don't want to track.	Call pSUPERFLY.endTracking() on the dynamic page you don't want to track. Note: This non-tracked page should also not load our chartbeat.js snippet
4	User moves from non-tracked page to another dynamic page you want to track	Call virtualPage for the new page

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.