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. In most cases, Wisepops detects automatically when the S.P.A. page changes. Simply install Wisepops, like on any regular website, and it should work out of the box.
How to check if Wisepops is correctly installed?
We want to make sure that every time the page changes, a request is sent to Wisepops. The following instructions are for Google Chrome, but all browsers have similar features.
Open the developer tools of your browser (F12)
Select the "Network" tab
Filter with "wisepops"
Go to your website
Click internal links to browse your website
These steps should result in lines appearing in the Network table. These lines are request to Wisepops. We're especially interested in the line my-wisepop.
If you don't see any request
Wisepops is not installed on your website. Please choose an installation method to start using Wisepops.
If some lines quickly disappear and reappear when clicking a link
Wisepops is correctly installed. Your website is likely not an S.P.A.
If some lines are added when you click a link
Wisepops is correctly installed. Your website is an S.P.A. and Wisepops successfully detects the page changes.
If some lines appeared for the first page, but nothing new when clicking links
Wisepops isn't detecting the page changes. You need to fix this to have Wisepops working as expected.
The easiest option is to update your Wisepops setup code. In the network table, check the first line. It should be loader.js?v=3&... We're interested in the v=3 parameter. This is a version number. If it's anything lower than 3, try to reinstall Wisepops. By using the latest version of our setup code, the page changes should be automatically detected.
If it's already on version 3 or more, but the page changes aren't detected, please keep reading 👇
Disable the automatic page change detection
In some case, you may want to control exactly when Wisepops looks for campaigns to load. For example, the default behavior may not leave you enough time to set custom properties after the page change.
Wisepops lets you configure the autoPageview setting, to control how the service behaves. 3 values are supported:
'url'– a pageview is automatically fired when a page is loaded. This is the default value for the latest version (v=3 or more).'init'– a pageview is automatically fired after the initialization of Wisepops. For a S.P.A., this means only the first loaded page. This is the default value for the older versions (v=2 or less).false– a pageview is never fired automatically.
To change this setting, place the following snippet at the end of your Wisepops setup code, before the closing </script> tag:
wisepops('options', {
autoPageview: false
});
Manually fire a pageview
If you have chosen to disable the automatic pageview feature, you need to tell Wisepops when the page has changed.
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 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 the auto pageview, or avoid triggering pageviews manually.
Manual pageview with Google Tag Manager
If you have chosen to disable the automatic pageview feature, you can rely on the History Change trigger for manual pageview triggering.
First, set up the installation code.
Then, create a separate tag with the trigger: History Change, and the HTML code:
<script>
wisepops('pageview');
</script>