Variantencode
Jede Variante bringt eigenes CSS und JavaScript mit. Beides wird eingespielt, bevor die Seite sichtbar wird — zuerst das CSS, dann das Skript.
Wo
Im Experiment unter Varianten → Bearbeiten. Das Original bekommt in aller Regel keinen Code: Es ist der Vergleichsmaßstab.
Ändern kannst du den Code jederzeit, auch während der Test läuft. Beachte nur, dass eine Änderung ab dem Moment für alle gilt — die Besucher davor haben etwas anderes gesehen, und beides steht danach in denselben Zahlen.
Die Helfer
Drei Fälle, an denen selbstgeschriebener Code reihenweise scheitert: Das Element ist noch nicht da, es ist noch nicht sichtbar, oder das Dokument steht noch nicht. Dafür liegt abvantageTools bereit — im Editor findest du sie rechts zum Kopieren.
Element abwarten
abvantageTools.waitForElement(".preis", function (element) {
element.textContent = "statt 99 €";
});Jeder Aufruf gibt eine Abbruchfunktion zurück. Mit { all: true } als drittem Argument bleibt der Beobachter aktiv und meldet auch später nachgeladene Elemente — praktisch bei Produktlisten, die beim Scrollen wachsen.
Erst wenn es sichtbar wird
abvantageTools.elementIsInView(".empfehlungen", function (element) {
element.classList.add("hervorgehoben");
});Wenn das Dokument steht
abvantageTools.domLoaded(function () {
document.body.dataset.variante = "b";
});Ohne diese Helfer greift Code, der beim Einspielen läuft, oft ins Leere: Das Snippet arbeitet absichtlich früh, und da existiert das halbe Dokument noch nicht.
Was sonst zur Verfügung steht
| ab.variant(key) | Die zugewiesene Variante eines Experiments, oder null. |
| ab.isVariant(key, variante) | Kurzform für den Vergleich. |
| ab.track(metric, wert) | Eigenes Ereignis melden; der Wert ist optional. |
| ab.ready(fn) | Läuft, sobald die Zuweisungen feststehen. |
| ab.onChange(fn) | Läuft bei jeder Änderung — etwa wenn eine Callback-Seite später auslöst. |
| ab.getContext() | Gerät, Sprache, Referrer und Land, wie erkannt. |
| ab.diagnose() | Was auf dieser Seite passiert ist und warum. |
Eigene Ereignisse messen
Für alles, was das Snippet nicht von selbst erkennt. Der Key muss dem eines Goals entsprechen, sonst wird die Meldung verworfen.
ab.track("konfigurator-fertig");
ab.track("angebot", 249.9);Wenn das Snippet asynchron lädt
Steht dein Code vor dem Snippet, gibt es ab noch nicht. Dafür gibt es eine Warteschlange:
window.abq = window.abq || []; abq.push(["track", "newsletter"]);
Beim Prüfen
Läuft neben deinem Test noch ein anderer auf derselben Seite, siehst du eine Mischung aus beiden und weißt hinterher nicht, welche Änderung woher kam. In der Vorschau gibt es dafür den Schalter Andere laufende Experimente ausschließen.