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