Zum Hauptinhalt springen

Code-Helfer

Zuletzt aktualisiert am 24. März 20261 Min. Lesezeit
Inhaltsverzeichnis

Kurz gefasst​

Code Helpers unterstützen dich als Webentwickler beim Einrichten von A/B-Tests, insbesondere bei der Entwicklung von A/B-Tests für Single Page Applications.

JavaScript-Helferfunktionen​

waitFor -> Auf Elemente im DOM warten​

Mit der Funktion waitFor wird ein Mutation Observer verwendet, um auf ein definiertes Element zu warten. 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.

Codebeispiel​

<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 ist. Wenn das DOM bereits geladen ist, 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 gewartet, bis ein bestimmtes DOM-Element vollständig im Viewport sichtbar ist. Der Callback wird standardmäßig nur einmal ausgeführt, kann aber optional jedes Mal ausgeführt werden, wenn sich das Element im Viewport befindet.

// 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 -> Prüfung auf Varify Editor​

Mit dieser Hilfsfunktion kannst du prüfen, ob du dich aktuell im Varify Editor befindest. Dadurch wird sichergestellt, dass dein Code nur auf der Live-Website ausgeführt wird - und nicht im Editor.

Dies ist besonders hilfreich, wenn dein Skript z. B. eine Weiterleitung via JavaScript auslöst: Mit der Abfrage kannst du die Weiterleitung im Editor gezielt verhindern, sodass du dort problemlos weiter testen und bearbeiten kannst.

if (window.varify.helpers.isInEditor()) {
  return
}

// Your JavaScript Code (won't run in editor)

resetListeners -> Alle Observer zurücksetzen​

Diese Funktion setzt alle Observer (Intersection und Mutation Observer) der oben genannten Funktionen zurück. Dadurch 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()
Auf dieser Seite