Varify logo
Login
Try for free
Get a demo

  • Popular keywords

    Categories

    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

    varifyHelpers.waitFor

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

    varifyHelpers.onDomChanged

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

    varifyHelpers.onDomLoaded

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

    varifyHelpers.isInView

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

    varifyHelpers.resetListeners

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

  • First steps

    Tracking & Evaluation

    Targeting

    Advanced

    Function overview

    Further useful content