Usabilla uses page views for certain campaign targeting options. We base these page views on the reload of the entire Usabilla code and therefore on the reload of the HTML document.
If you are using a Single Page Application (SPA), you will need to use virtual pageviews to indicate that a user navigated from one page to the next. In this article, we will explain the usage of virtual pageviews to make optimal use of the Usabilla campaign targeting options.
Before we start, you will need the following:
Prerequisites:
An understanding of campaign targeting
Knowledge of javascript
Access to your website's source code
What is a virtual pageview?
On traditional websites, when a user navigates from one page to another, the content is replaced entirely with the content of the new page - including the Usabilla for Websites code. Through the reload of this Usabilla-code, we update many conditions that are set for the campaign targeting. For instance, we increment the pageview counter by one, we recount the number of seconds a user has been on the page and we allow another campaign to be shown.
However, more and more websites are built as Single Page Applications (SPA). These Single Page Applications do not reload the entire page when a user moves from one page to another, but they only replace necessary bits on the page. On websites that do not reload the entire document - and therefore do not reload the Usabilla code - a virtual pageview replaces the functionality of the actual pageview.
How do virtual pageviews work?
Virtual pageviews are fired by calling our Javascript API when a user switches from one page to another. When a virtual pageview is fired, Usabilla updates the current campaign targeting settings and reevaluates them.
In detail, the following will happen to each targeting option when a virtual pageview is fired:
Visitor on a particular page - Usabilla will re-evaluate whether the campaign can be shown on the URL in question every time a virtual pageview fires. It is necessary to fire the virtual pageview as otherwise a campaign could be shown on a page visited after your targeted page.
Visitors after being on the page for X seconds - If a virtual pageview is fired during a visit, Usabilla will restart counting the number of seconds the user stays on a page.
Visitors potentially exiting the page after X seconds - If a virtual pageview is fired, Usabilla will re-evaluate all the targeting settings to see if a campaign should fire when the user leaves the page. Virtual pageviews ensure that your exit survey targeting is accurate in terms of timing and location.
Visitors having viewed at least X pages - By firing virtual pageviews we increment the page counter, so a campaign can show after a user has visited the right amount of pages.
Manual trigger - Since a campaign can only be shown once per page, a manual trigger will only work the first time it's executed. If a manual trigger is executed a second time (for instance because it's tied to a button click), the campaign will not respond. By inserting a virtual pageview in between, the manual trigger can be executed a second time.
Lastly, firing a virtual pageview, will also ensure that a user is able to see another campaign after having seen one before or after leaving feedback. Without firing a virtual pageview in a SPA, no more than one campaign can be shown during a visit.
Note: Although a virtual pageview will ensure that campaigns can be shown a second time, it could happen that after firing your virtual pageview, a campaign still does not fire a second time depending on its settings. Please find more information about this here.
How are virtual pageviews set up?
A virtual pageview is executed through our Javascript API, with the following command:
window.usabilla_live('virtualPageView');This command can be fired when a user moves from one page to the next. Below you will find examples of possible implementations across commonly used Javascript frameworks.
1. Vanilla JS
2. Angular 2 Router
3. VueJS Router
4. React Router
After implementing the virtualPageView command, your website is ready to use all of our campaign targeting options.
Any questions? Please feel free to reach out to our friendly support team!