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
waitFor -> Warten auf Elemente im DOM
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';
});
onDomChanged -> Änderungen im DOM
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.
});
onDomLoaded -> DOM wurde geladen
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.
});
isInView -> Element vollständig im Viewport
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);
isInEditor -> Auf Varify Editor prüfen
Mit dieser Helper-Funktion kannst du prüfen, ob du dich gerade im Varify Editor befindest. So stellst du sicher, dass dein Code nur auf der Live-Website ausgeführt wird – und nicht im Editor.
Das ist besonders hilfreich, wenn dein Script z. B. Weiterleitungen per JavaScript auslöst: Durch die Abfrage kannst du die Weiterleitung im Editor gezielt unterbinden, damit du dort weiterhin problemlos testen und bearbeiten kannst.
if (window.varify.helpers.isInEditor()) {
return
}
// Your JavaScript Code (won't run in editor)
resetListeners -> Zurücksetzen aller Observer
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()