For the Audience to work correctly on a Single page application you need to change the audience mode and implement a callback. This means that you tell Symplify when Audience needs to be (re-)evaluated. The default setting is On load so you need to change this. We recommend using Manual activation mode.
The default Audience mode for the website is set in website settings. Go to My websites -> click the website -> choose Edit website. Then scroll down to the Audience setting and select Manual activation and hit Save. From now on all your (new) projects will use this mode. If you already have created a project before changing this you need to change the audience mode for that project manually. You do this in the editor for that project under Settings -> Audience mode.
Implement the callback
For Audience evaluation to work correctly on a dynamic website you need to tell Symplify when to (re-)evaluate the Audience. This is done by calling symplify.newPage(); both on the first load and then every time content is changed on the site.
if(typeof symplify !== 'undefined') {
symplify.newPage();
} else {
document.addEventListener("symplify-loaded", function(e) {
symplify.newPage();
});
}Notice! If you are using privacy mode: Cookie consent you need to listen for symplify-booted instead of symplify-loaded in the above callback code.
This callback needs to be implemented in your code. To cover "content change" the callback should be placed at the same spot you probably added the event push for Google Analytics that tracks Page Visits. This however might need to be tweaked if this turns out to be too late (you experience "flickering" in your projects) or if Audience is evaluated before the content has changed, resulting in a faulty Audience evaluation (Audience becomes true/false when it's not supposed to because it's evaluated on the previous content).
If you are not able to implement the callback
If you aren't able to implement the callback that is necessary for Manual activation mode you can try to use the mode On load & URL change. This might work well if your URL changes when the visitor navigates, however, the Audience might be evaluated too fast (before the content has loaded) or too late (which can cause "flickering")
Please make sure to open up a preview for your project and check that your changes work on navigation between pages where Audience should be true and pages where Audience should be false, and vice versa. If this doesn't work well, please use Manual activation mode (see above).
If you want to know more about coding on a single page application, we have a playbook that you can read here!