• Add JavaScript Reset

    In short

    You can use the Add JavaScript Reset function to remove JavaScript code that you have added. This function is especially useful for Single Page Applications (SPAs), when the application does not force a new page load when switching between different pages. Accordingly, JavaScript changes remain visible on the new page, even if the targeting of the experiment no longer applies. The JavaScript reset function is executed just before switching to the new page.

    Application example for JavaScript Reset

    A banner is created using JavaScript and is to be delivered on a specific page. When the page is changed, it is still delivered, despite the fact that the targeting on the page does not apply.

    The following JavaScript code is used:

    				
    					window.varify?.helpers?.waitFor('main', (main) => {
      if (!main || document.querySelector('.demo-banner')) return;
    
      const css = `.demo-banner{box-sizing:border-box;max-width:800px;margin:12px auto;padding:12px 40px 12px 12px;background:#f33;color:#fff;border-radius:6px;font:14px/1.4 system-ui,sans-serif;position:relative}
        .demo-banner .close{position:absolute;top:6px;right:8px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer;line-height:1}
        .demo-banner a{color:#fff;text-decoration:underline}`;
      const style = document.createElement('style');
      style.textContent = css;
      document.head.appendChild(style);
    
      const html = `
        <div class="demo-banner" role="region" aria-label="Demo Banner">
          <button class="close" aria-label="Close">×</button>
          <strong>Dummy Banner</strong> — Placeholder text. <a href="#">Learn more</a>
        </div>`;
      main.insertAdjacentHTML('beforebegin', html);
    
      const banner = document.querySelector('.demo-banner');
      banner.querySelector('.close').addEventListener('click', () => banner.remove());
    });
    
    				
    			

    With the following JavaScript reset code you can ensure that the banner is removed before the page change:

    				
    					const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
    
    [...elementsToRemove].forEach(element => element.remove());
    				
    			
  • First steps