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, execute the Wisepops installation code only once, at page landing. It initializes Wisepops, and triggers a first pageview automatically.
Then, execute the following JS line every time the page changes. Be sure to run this after your URL has been dynamically changed:
wisepops('pageview');
If it's easier for you, you can disable the first pageview triggered automatically by the installation code. It can be helpful if you also execute wisepops('pageview') for the first landing page. Simply place this just after our installation code:
wisepops('options', {
autoPageview: false
});
If on the first landing page, your popup appears and disappear immediately, chances are that it's because two pageviews are triggered consecutively. You should disable auto pageview with the above snippet.
Implementation with Google Tag Manager
You can rely on the History Change trigger for this.
First, set up the installation code.
Then, create a separate tag with the trigger: History Change, and the HTML code:
<script>
wisepops('pageview');
</script>