Remove / undo changes on Audience false on elements that do not refresh

Preface

By default your changes are cleared when the page reload. You get a "clean slate" for your code every time the visitor navigates. On dynamic websites a reload of the page is never done because new content is fetched dynamically. This can cause issues if you do changes on elements that do not refresh (header, footer, added attributes on body, etc.).

This can cause;

• Duplications of your added functions
• Duplications of your added elements
• Added elements and attributes that still exist after navigation
• Intervals and timeouts that keep running after navigation (if they haven't be cleared)

You will, in other words, have to handle this manually. Below we will show examples of how to do this.

Important! 

Make sure you've added the keyword /* sg_no_proxy */ first in your code. See further information.

If you've done changes to elements that won't be updated on new content load / navigation when audience is (re-)evaluated these changes will still be there even if Audience is false. This because you won't have a page (re)load that brings you that "clean slate" (original website content without your changes).

The CSS code is removed because this is set with an ID and is automatically removed every time audience is (re-)evaluated.

The javascript changes aren't though. So your added elements will still be there, but because Audience is false, the CSS you coded for these elements won't be applied. This can cause "unstyled" elements littering your website.

Example

Let's say you want to add USPs to your header and you want these to be shown on all pages except the checkout page. So you set up an Audience statement for this: URL does not contain checkout. When the user comes into your website on any page that isn't the checkout Audience will be true and the USPs will be added to the header. See the example image below.

But when the user navigates to a page where Audience becomes false (in this example, the checkout) your code is not executed and thus the CSS is never applied. As seen in the image below the elements are still present but without styling (CSS)

These would have been removed if the header were reloaded but this hasn't happened, only the new content has been reloaded / fetched.

Remove things with Goals

To be able to remove / undo your changes you need to be able to run code when Audience is false. Luckily goals are always runned (after Audience has been true once). So you can actually use custom goals to remove / undo your changes.

If you add a project goal and then choose Custom goal you can use this to check if your changes are made and if so AND if they shouldn't be made you simply undo the things you've done. In the example above we would remove the header USPs. 

In the code for the Custom goal we first check that the user is in fact on a page where we don't want our changes to happen, in other words a page where Audience is false, (in this case, the checkout page) and then we check if the elements exist, and if so, we remove / undo them. 

if(window.location.href.indexOf('checkout') > -1) {
    if($('.header-usps').length>0) {
        $('.header-usps').remove();
    }
}

Notice!

It is really important that you set this up as a Project goal. Because you do not want this to run on all your projects. And also to make sure that this code only runs when Audience is false and you want to remove / undo your changes. It's also extremely important to make sure that your code is correct and that it doesn't cause any issues on your website as this will run on all pages.