Comment on page
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.
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.Note: Most integrations will never need to use the
endTracking() functionIf 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 |
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.
Last modified 7d ago