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.

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, and after the 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');

Make any loaded popup persistent across pages

By default, any displayed popup will be closed when you call wisepops('pageview');
You can change this behavior by setting a 2nd parameter: true 

wisepops('pageview', true);

In such case, any loaded popup on the first page will be behave as if the page did not change, only if no new popup has been matched from the new pageview.

Did this answer your question?