Passa al contenuto principale

Assistenti al codice

Ultimo aggiornamento il 24 mar 20261 min di lettura
Indice

In breve​

I Code Helpers ti aiutano, in quanto sviluppatore web, a impostare A/B test, specialmente quando sviluppi A/B test per single page application.

Funzioni Helper JavaScript​

waitFor -> Attendere elementi nel DOM​

Con la funzione waitFor viene utilizzato un mutation observer per attendere un elemento definito. Non appena vengono aggiunti al DOM nuovi elementi corrispondenti al selettore definito (ad es. tramite AJAX o JavaScript), viene eseguita la funzione di callback.

La funzione di callback viene chiamata per ogni nuovo elemento identificato.

Esempio di codice​

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

Aggiunta di più selettori​

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 -> Modifiche nel DOM​

Questa funzione chiama il CallBack ogni volta che vengono aggiunti o eliminati elementi nel DOM. Si basa anch'essa su un Mutation Observer.

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

onDomLoaded -> Il DOM è stato caricato​

Questa funzione chiama il callback non appena il DOM è caricato. Se il DOM è già stato caricato, il callback viene chiamato immediatamente.

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

isInView -> Elemento completamente nel viewport​

Con la funzione isInView si attende che un determinato elemento DOM sia completamente visibile nel viewport. Il callback viene eseguito di default una sola volta, ma può opzionalmente essere eseguito ogni volta che l'elemento è nel 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 -> Verifica per Varify Editor​

Puoi usare questa funzione helper per verificare se ti trovi attualmente nel Varify Editor. Questo garantisce che il tuo codice venga eseguito solo sul sito live - e non nell'editor.

Questo è particolarmente utile se il tuo script, ad es. Forwarding via JavaScript, viene attivato: puoi usare la query per impedire specificamente il forwarding nell'editor, in modo da poter continuare a testare e modificare lì senza problemi.

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

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

resetListeners -> Reimposta tutti gli observer​

Questa funzione reimposta tutti gli observer (intersection e mutation observer) delle funzioni sopra indicate. Di conseguenza, le funzioni di callback definite non vengono più eseguite.

// 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()
Su questa pagina