Saltar al contenido principal

Añadir reinicio de JavaScript

Última actualización el 24 mar 20261 min de lectura
Índice de contenidos

En resumen​

Puedes usar la función Add JavaScript Reset para eliminar código JavaScript que hayas añadido. Esta función es especialmente útil para Single Page Applications (SPAs), cuando la aplicación no fuerza una nueva carga de página al cambiar entre diferentes páginas. En consecuencia, los cambios de JavaScript permanecen visibles en la nueva página, incluso si el targeting del experimento ya no se aplica. La función de reset de JavaScript se ejecuta justo antes de cambiar a la nueva página.

Editor de Varify con el menú de código abierto, una flecha en «JavaScript Reset» y el diálogo vacío «Add JS Reset»

Ejemplo de aplicación para JavaScript Reset​

Se crea un banner mediante JavaScript y debe entregarse en una página específica. Cuando se cambia la página, sigue entregándose, a pesar de que el targeting en la página ya no se aplica.

Se utiliza el siguiente código JavaScript:

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());
});

Con el siguiente código JavaScript reset puedes asegurarte de que el banner se elimine antes del cambio de página:

const elementsToRemove = document.querySelectorAll('#systemchange-styles, .systemchange');

[...elementsToRemove].forEach(element => element.remove());
En esta página