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