Saltar al contenido principal

Ayudantes de código

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

En resumen​

Code Helpers te ayudará como desarrollador web a configurar pruebas A/B, especialmente al desarrollar pruebas A/B para single page applications.

Funciones auxiliares de JavaScript​

waitFor -> Esperar elementos en el DOM​

Con la función waitFor se utiliza un mutation observer para esperar un elemento definido. En cuanto se añaden al DOM nuevos elementos que coincidan con el selector definido (p. ej. mediante AJAX o JavaScript), se ejecuta la función callback.

La función callback se llama para cada nuevo elemento identificado.

Ejemplo de código​

<div>
  <p>This is existing content.</p>
  <!-- <p class="lazyloaded-content">This content will be loaded later.</p> -->
</div>
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
  // After the content was loaded, we want to color it red.
  element.style.color = 'red';
});

Añadir múltiples selectores​

window.varify.helpers.waitFor('.lazyloaded-content, .another-selector, and-another-selector', (element) => {
  // After the content was loaded, we want to color it red.
  element.style.color = 'red';
});

onDomChanged -> Cambios en el DOM​

Esta función llama al CallBack cada vez que se añaden o eliminan elementos en el DOM. También se basa en un Mutation Observer.

window.varify.helpers.onDomChanged(() => {
  // Write code here, which will run everytime the dom changes.
});

onDomLoaded -> El DOM se ha cargado​

Esta función llama al callback tan pronto como se carga el DOM. Si el DOM ya está cargado, el callback se llama inmediatamente.

window.varify.helpers.onDomLoaded(() => {
  // Write code here, which will run, when the DOM has loaded.
});

isInView -> Elemento completamente en el viewport​

Con la función isInView se espera a que un elemento DOM determinado sea completamente visible en el viewport. La función callback se ejecuta solo una vez por defecto, pero opcionalmente se puede ejecutar cada vez que el elemento esté en el viewport.

// The callback here will be triggered ONE TIME, when the element is in view.
window.varify.helpers.isInView('.product', (element) => {
  window.dataLayer.push({
    event: 'product viewed',
    element,
  });
});

// Adding true as third parameter
// will trigger the callback EVERY TIME the element is in view.
window.varify.helpers.isInView('.product', () => {}, true);

isInEditor -> Comprobar el Varify Editor​

Puedes usar esta función auxiliar para comprobar si te encuentras actualmente en el Varify Editor. Esto garantiza que tu código se ejecute solo en el sitio web en vivo - y no en el editor.

Esto es particularmente útil si se activa tu script, por ejemplo, Forwarding via JavaScript: Puedes usar la consulta para evitar específicamente el forwarding en el editor, de modo que puedas seguir probando y editando allí sin problemas.

if (window.varify.helpers.isInEditor()) {
  return
}

// Your JavaScript Code (won't run in editor)

resetListeners -> Restablecer todos los observadores​

Esta función reinicia todos los observadores (intersection y mutation observer) de las funciones anteriores. Por lo tanto, las funciones de callback definidas ya no se ejecutan.

// As an example, we setup a waitFor listener here. This will use a MutationObserver under the hood.
window.varify.helpers.waitFor('.lazyloaded-content', (element) => {
  element.style.color = 'red';
});

// The next resetting function call could e.g. be located in a navigation callback function.
window.varify.helpers.resetListeners()
En esta página