BlueConic works with single page applications (SPAs) by detecting hashchange, popstate, and history API events. It tracks each URL change as a new page view, ensuring accurate data collection even when the page itself doesn't reload.
For the best results, be sure that the URL displayed in the address bar changes for the user and is representative of the content they are viewing. Though technically there is a single page view for the user, BlueConic will track each URL change as a new page view, enabling you to collect data based on the contents of the URL as well as the page.
How to verify a single-page design
Single-page design web pages come in a wide variety. They are typically based on JavaScript frameworks such as AngularJS, ReactJS, Ember.js, Backbone.js, Polymer, etc. Verifying BlueConic works correctly with your web pages is easy. Follow these steps:
- Open your website in the BlueConic Simulator.
- Click the Clean Up button to make sure you're working with a clean profile.
- Examine the number of page views in your profile. After the cleanup, it should be +1.
- Now navigate to your single-page website while keeping an eye on the number of page views. The number should increase with every click.
BlueConic works with your single page application if the number correctly increases with every navigation move, as demonstrated in the video:
- Starting page: https://www.blueconic.com/pricing/
- Page views: 1
- Navigating to a regular page: https://www.blueconic.com/what-am-i-getting
- Page views: 2
- Navigating to the single-page app form (Note: the URL changes):
https://www.blueconic.com/what-am-i-getting/#startfreenow- Page views: 3
Note: If certain navigation moves do not increase the number of page views, the most likely cause is that BlueConic is missing the transition from one page to another. This may be because the URL of the page does not change. Ask your web developer to ensure every page has a different URL and run the verification above again.
Technical details
BlueConic is dependent on your single page application for notifications on page changes. There are a couple of events that can be picked up on:
- The hashchange event (fired when the URL after the "#" changes)
- The popstate event
- Calling history.pushState()
- Calling history.replaceState()
Not all single page applications are the same. So if you keep on having problems with the page views count, ask your developers which of the above events your single page application uses and contact us! We can likely help you out with a listener customized for your specific situation.
Using the Page Change Listener with a single page application
BlueConic’s Page Change Listener can be set up to detect when a new view is rendered in SPAs by listening to URL or DOM changes, ensuring seamless tracking without the need for a full page reload. The listener automatically detects and tracks new content when a page’s structure or URL changes, even if the browser doesn't refresh.
For full details on setup and technical requirements, check out the Page Change Listener documentation.