Install Qwary Intercept with Single Page Applications

An SPA is a type of website that loads all the resources needed to navigate the entire site on the initial page load, unlike traditional websites that load each page individually as visitors navigate through the site. However, the default Qwary installation snippet, similar to tag managers and analytics codes, is optimized for traditional websites. If you have an SPA, you'll need to use refresh pageviews to indicate when a visitor has moved from one page to the next. In this article, we'll explain how to use refresh pageviews for Qwary intercept campaigns.
This article will cover the usage of refresh pageviews for Qwary intercept campaigns. 
These requirements will be elaborated upon in the following sections.
Refresh pageviews in Qwary simulate the function of an actual pageview on websites that do not reload the entire document.
They are triggered by calling Qwary's Javascript API when a visitor switches from one page to another.
When a refresh pageview is triggered, Qwary updates and rechecks the current campaign targeting settings to ensure accuracy.
There are several targeting options available for refresh pageviews in Qwary, including visitor on a particular page, visitors after being on the page for X seconds, visitors potentially exiting the page after X seconds, visitors having viewed at least X pages, and manual trigger.
The refresh pageviews targeting options help ensure that your campaign targeting is accurate and up-to-date, and can be used to achieve your goals.
How to setup virtual pageview?
qwTracking.refreshPageView() command is used to trigger page refresh by SDK API.
​
1.Vanila JS
window.history.pushState('p1', 'Test Title', '/test_page.html'); 
window.qwTracking.refreshPageView();
2.Angular 2 Router
import { Router, NavigationStart, Event as NavigationEvent } from '@angular/router'; 
constructor(router:Router) { router.events.forEach((event: NavigationEvent) => { if(event instanceof NavigationEnd) { window.qwTracking.refreshPageView(); } }); }
3.VueJS Router
import router from './router'; 
router.afterEach((to, from) => { window.qwTracking.refreshPageView(); }); 
new Vue({ el: '#app', router, template: '', components: { App } })
4.React JS Router
Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(, document.body); window.qwTracking.refreshPageView(); });
​
In conclusion, refresh pageviews are a way for Qwary to update and recheck campaign targeting settings when a visitor switches from one page to another.
​
Last modified 6mo ago