Code Helpers
Inhaltsverzeichnis
Kurz & Knapp
Die Code Helpers helfen dir als Webentwickler beim Aufsetzen von A/B-Tests, insbesondere bei der Entwicklung für Single Page Applications.
JavaScript Helper Funktionen
varifyHelpers.waitFor
Mit der Funktion waitFor wird mit Hilfe eines Mutation Observers auf ein definiertes Element gewartet. Sobald neue Elemente, die dem definierten Selektor entsprechen, dem DOM hinzugefügt werden (z. B. durch AJAX oder JavaScript), wird die Callback-Funktion ausgeführt.
Die Callback-Funktion wird für jedes neu identifizierte Element aufgerufen.
Code Beispiel
<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';
});
Hinzufügen mehrerer Selektoren
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
Diese Funktion ruft den CallBack jedes mal auf, wenn Elemente im DOM hinzugefügt oder gelöscht werden. Sie basiert ebenfalls auf einem Mutation Observer.
window.varify.helpers.onDomChanged(() => {
// Write code here, which will run everytime the dom changes.
});
varifyHelpers.onDomLoaded
Diese Funktion ruft den Callback auf, sobald das DOM geladen wurde. Ist der DOM bereits geladen, wird der Callback sofort aufgerufen.
window.varify.helpers.onDomLoaded(() => {
// Write code here, which will run, when the DOM has loaded.
});
varifyHelpers.isInView
Mit der Funktion isInView wird darauf gewartet, dass ein bestimmtes DOM-Element im Viewport vollständig sichtbar ist. Der Callback wird standardmäßig nur einmal ausgeführt, kann aber optional jedes mal ausgeführt werden, wenn das Element im Viewport ist.
// 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
Mit dieser Funktion werden alle Observer (Intersection- und Mutation-Observer), der oben genannten Funktionen zurückgesetzt. Somit werden die definierten Callback-Funktionen nicht mehr ausgeführt.
// 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()