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

Preface

By default, your changes are cleared when the page reloads. 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 been cleared)

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

 

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 is 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 to litter 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.

mceclip0.png

 

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)

mceclip1.png

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 run (after Audience has been true once). So you can actually use custom goals to remove/undo your changes.

 

If you create a new goal and then in the setup for this add a Custom fact statement 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. 

 

mceclip0.png

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(document.querySelector('.header-usps') !== null) {
        document.querySelector('.header-usps').remove();
    }
}

 

Notice!

It is really important that you make sure that this code only runs when the 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.

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful