JavaScript Reset Ekle
Kısaca
Eklediğiniz JavaScript kodunu kaldırmak için Add JavaScript Reset fonksiyonunu kullanabilirsiniz. Bu fonksiyon, özellikle Tek Sayfa Uygulamaları (SPA) için kullanışlıdır; çünkü uygulama, farklı sayfalar arasında geçiş yaparken yeni bir sayfa yüklemesi zorlamaz. Buna bağlı olarak, deneyin hedeflemesi artık geçerli olmasa bile JavaScript değişiklikleri yeni sayfada görünür kalır. JavaScript reset fonksiyonu, yeni sayfaya geçmeden hemen önce çalıştırılır.
JavaScript Reset için uygulama örneği
JavaScript kullanılarak bir banner oluşturulur ve belirli bir sayfada gösterilmesi istenir. Sayfa değiştirildiğinde, sayfadaki targeting geçerli olmamasına rağmen banner hâlâ gösterilmeye devam eder.
Aşağıdaki JavaScript kodu kullanılır:
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());
});
Aşağıdaki JavaScript reset kodu ile sayfa değişiminden önce banner'ın kaldırılmasını sağlayabilirsin:
const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');
[...elementsToRemove].forEach(element => element.remove());