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 on 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:
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
Make any loaded popup persistent across pages
By default, any displayed popup will be closed when you call
You can change this behavior by adding a second parameter:
In that case, any loaded popup on the first page will behave as if the page did not change, only if no new popup has been matched from the new page view.