Custom JavaScript

Der Visual Editor deckt viele Änderungen ohne Code ab. Für alles andere kannst du eigenes JavaScript und CSS hinzufügen. ABlyft bietet Code-Felder auf drei Ebenen, und das Snippet führt sie in einer festen Reihenfolge aus.

Wo du Code hinzufügen kannstCopy Anchor Link

Was jedes Feld bewirkt:

Verwende die Felder auf Experiment-Ebene für Code, den alle Variations benötigen, damit du ihn nicht in jede Variation kopieren musst.

Die Code-Felder einer Variation werden für die Variation-Typen Code, Visual Editor und FullStack angezeigt. Eine Variation vom Typ Code ist die richtige Wahl, wenn du die Variation vollständig mit eigenem Code bauen möchtest. Eine Variation vom Typ Unchanged oder Redirect führt keinen Code aus.

In welcher Reihenfolge wird Code ausgeführt?Copy Anchor Link

Wenn ein Visitor in einer Variation ist, führt ABlyft Folgendes in dieser Reihenfolge aus:

1. Project JS helper code
2. Project CSS code und Project JS code
3. Experiment CSS code und Experiment JS code
4. Variation CSS code und Variation JS code
5. Visual Editor-Änderungen der Variation (falls vorhanden)

Der Code einer Ebene läuft bei jedem Seitenaufruf. Schreibe ihn deshalb so, dass er gefahrlos erneut ausgeführt werden kann.

Tools in deinem CodeCopy Anchor Link

In Code von Experiments, Variations, Projects und Page Rules steht ablyftTools ohne jede Einrichtung zur Verfügung. Es ist dasselbe Objekt wie ablyft.getTools(). Der Variation-Editor zeigt neben den Code-Feldern einen Code Helper mit den häufigsten Aufrufen, die du mit einem Klick kopierst:

// Wait for an element to appear in the DOM
ablyftTools.waitForElement(selector, (elem) => {
  // Handle element
});

// Wait for an element to be in the viewport
ablyftTools.elementIsInView(selector, (elem) => {
  // Handle element
});

// Wait for the DOM to be loaded
ablyftTools.domLoaded(() => {
  // Code after dom is loaded
});

// Redirect to url or query string
ablyftTools.redirect(redirectUrl);

Ersetze selector und redirectUrl durch deine Werte. Alle Funktionen, etwa für Cookies, URL-Helfer sowie Warte- und Data-Layer-Funktionen, sind in der Tools-Referenz aufgelistet.

Ein vollständiges BeispielCopy Anchor Link

Ändere die Überschrift und den Button einer Landing Page und stelle sicher, dass die Änderung rückgängig gemacht werden kann.

Variation JS code

ablyftTools.waitForElement('.hero h1', (headline) => {
  headline.dataset.originalText = headline.textContent;
  headline.textContent = 'Free shipping on all orders';
});

Variation CSS code

.hero .cta-button {
  background-color: #e4002b;
}

Variation Reset JS code

document.querySelectorAll('.hero h1[data-original-text]').forEach((headline) => {
  headline.textContent = headline.dataset.originalText;
  delete headline.dataset.originalText;
});

Das CSS braucht keinen Reset. ABlyft entfernt es zusammen mit dem Experiment.

Gut zu wissenCopy Anchor Link

• Fehler werden abgefangen. Wenn dein Code einen Fehler wirft, protokolliert ABlyft ihn (im Debug-Modus) und fährt mit dem nächsten Schritt fort. Eine fehlerhafte Variation stoppt keine anderen Experiments.
• Minification. Wenn Minify JavaScript in den Snippet-Einstellungen aktiviert ist, wird dein JavaScript beim Publishing minifiziert. Enthält der Code einen Syntaxfehler, veröffentlicht ABlyft ihn unverändert.
• DOM-Observer ignorieren deine Änderungen. Während dein Code läuft, werden DOM-Änderungen, die er vornimmt, nicht an domChanged-Callbacks gemeldet.
• Code läuft bei erneuten Ausführungen noch einmal. Nach ablyft.reInit() oder einem Page-Trigger kann Code erneut laufen. Reset JS wird zuerst ausgeführt (nur mit Use SPA features).

FehlerbehebungCopy Anchor Link

• Nichts ändert sich: Prüfe die Browser-Konsole im Debug-Modus auf Fehler aus deinem Code. Prüfe, ob dein CSS-Selektor auf der Seite existiert und ob das Experiment auf einer aktiven Page läuft.
• Code läuft auf Seiten, auf denen er nicht laufen soll: Code auf Project-Ebene läuft bei jedem Seitenaufruf. Verschiebe seitenspezifischen Code in ein Experiment oder umgib ihn mit einer Bedingung wie if (location.pathname.startsWith('/checkout')) { … }.
• Weitere Hilfe findest du unter Debugging.

Nächste SchritteCopy Anchor Link