Add JavaScript Reset
Kurz & Knapp
Mit der Funktion Add JavaScript Reset kannst du von dir hinzugefügten JavaScript Code wieder entfernen. Diese Funktion ist gerade bei Single Page Applications (SPAs) nützlich, wenn die Applikation keinen neuen Page load erzwingt, wenn zwischen verschiedenen Seiten gewechselt wird. Dementsprechend bleiben JavaScript Veränderungen weiterhin auf der neuen Seite sichtbar, auch wenn das Targeting des Experiments nicht mehr zutrifft. Die JavaScript Reset Funktion wird kurz vor dem Wechsel zur neuen Seite ausgeführt.
Anwendungsbeispiel zu JavaScript Reset
Per JavaScript wird ein Banner erstellt und dieser soll auf einer spezifischen Seite ausgeliefert werden. Bei Seitenwechsel wird dieser weiterhin ausgeliefert, trotz dass das Targeting auf der Seite nicht zutrifft.
Folgender JavaScript Code wird genutzt:
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());
});
Mit folgendem JavaScript Reset Code kannst du sicherstellen, dass der Banner vor Seitenwechsel wieder entfernt wird:
const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
[...elementsToRemove].forEach(element => element.remove());