Ana içeriğe geç

Code Helpers

JavaScript helpers for building experiments, including waitFor for elements that only appear after AJAX.

Last updated on 24 Mar 20263 min read
Table of contents

In short​

Code Helpers will help you as a web developer to set up A/B tests, especially when developing A/B tests for single page applications.

JavaScript Helper Functions​

waitFor -> Wait for elements in the DOM​

With the function waitFor a mutation observer is used to wait for a defined element. As soon as new elements matching the defined selector are added to the DOM (e.g. by AJAX or JavaScript), the callback function is executed.

The callback function is called for each newly identified element.

Code example​

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

Adding multiple selectors​

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 -> Changes in the DOM​

This function calls the CallBack every time elements are added or deleted in the DOM. It is also based on a Mutation Observer.

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

onDomLoaded -> DOM has been loaded​

This function calls the callback as soon as the DOM is loaded. If the DOM is already loaded, the callback is called immediately.

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

isInView -> Element completely in the viewport​

With the function isInView is waited for a given DOM element to be fully visible in the viewport. The callback is executed only once by default, but can optionally be executed every time the element is in the 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 -> Check for Varify Editor​

You can use this helper function to check whether you are currently in the Varify Editor. This ensures that your code only on the live website is executed - and not in the editor.

This is particularly helpful if your script e.g. Forwarding via JavaScript is triggered: You can use the query to specifically prevent forwarding in the editor so that you can continue to test and edit there without any problems.

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

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

resetListeners -> Reset all observers​

This function resets all observers (intersection and mutation observer) of the above functions. Thus, the defined callback functions are no longer executed.

// 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()
On this page