• Popular keywords

    Support article

    Total Results

    No Record Found

    View All Results

    • Code Helpers

    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()
  • User documentation
    First steps