Table of Contents

Wisepops on Single-Page Applications

Lisa Fockens Updated by Lisa Fockens

S.P.A. are websites that do not reload the document when the page changes. Instead, the new content is injected into a container, and the URL is dynamically changed.

To make Wisepops compatible with your SPA, you only need to indicate when the content has been changed.

How to check if your website is a Single Page Application?

  • Open Chrome
  • Open the developer tools (F12)
  • Select the "Network" tab
  • Filter with "wisepops"
  • Refresh the current page
  • Click on any link on the page to load a second page


When loading the second page you should see these 2 lines appear (get-loader, and my-wisepop, like in the screenshot above).


When you click on any link on the page, and if your website is not a SPA, the 2 lines should disappear and appear again.

If your website is a SPA, nothing should change when you click on any link on your page (or some new lines should stack).

How to set up Wisepops on a Single Page Application

The concept is simple, regardless of the framework you are using:

First, place the Wisepops setup code into the layout of your pages, so it will be loaded only once. Add the following snippet just after our setup code to disable the automatic pageview fired after the Wisepops initialization:

wisepops('options', {
  autoPageview: false
});

So your setup code would look like this:

Then, execute the following JS line each time a page content is loaded. For the initial landing page, and when the user navigates between pages:

wisepops('pageview');

Pay attention to executing this after your URL has been dynamically changed.

Implementation with Google Tag Manager

You probably already trigger virtual pageviews for Google Analytics. You can use the exact same trigger to fire a tag containing wisepops('pageview');

Alternatively, you can rely on the History Change trigger.

Add Wisepops to Neto

Add Wisepops to Mono

Contact