# Custom JavaScript URL: https://docs.ablyft.com/de/developers/application-integration/custom-javascript/ > Wo du eigenes JavaScript und CSS für Projects, Experiments und Variations hinzufügst und in welcher Reihenfolge es ausgeführt wird. Der [Visual Editor](https://docs.ablyft.com/de/guides/experiments/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 kannst | Ebene | Wo in ABlyft | Felder | | -------------- | ---------------------------------------------------------------------- | --------------------------------------------- | | **Project** | **Settings → Project Settings → Project Level Codes** | **JS code**, **JS helper code**, **CSS code** | | **Experiment** | Experiment-Einstellungen (Zahnrad-Symbol) → **Experiment Level Codes** | **JS code**, **Reset JS code**, **CSS code** | | **Variation** | Variation bearbeiten → **Code** | **JS code**, **CSS code**, **Reset JS code** | Was jedes Feld bewirkt: | Feld | Beschreibung | | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | | Project **JS code** | Läuft bei jedem Seitenaufruf, nachdem die [Prerequisites](https://docs.ablyft.com/de/developers/consent-and-security/consent-manager/) "General Startup" des Projects erfüllt sind. | | Project **JS helper code** | Läuft bei jedem Seitenaufruf ohne Abhängigkeiten, bevor die Prerequisites geprüft werden. Nutze es für Hilfsfunktionen, die immer existieren müssen. | | Project **CSS code** | Läuft bei jedem Seitenaufruf, wie der Project JS code (abhängig von den Prerequisites "General Startup"). | | Experiment **JS code** | Läuft vor jedem Variation-Code dieses Experiments. | | Experiment **CSS code** | Gilt für jede Variation dieses Experiments. | | Experiment **Reset JS code** | Läuft, wenn das Experiment zurückgesetzt wird. Siehe [SPA navigation](https://docs.ablyft.com/de/developers/application-integration/spa-navigation/#reset-js). | | Variation **JS code**, **CSS code** | Laufen nur für diese Variation. | | Variation **Reset JS code** | Läuft, wenn das Experiment zurückgesetzt wird. Siehe [SPA navigation](https://docs.ablyft.com/de/developers/application-integration/spa-navigation/#reset-js). | 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. > Die Code-Felder von Project und Experiment akzeptieren jeweils bis zu 32.768 Zeichen. ## In welcher Reihenfolge wird Code ausgeführt? 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 Code In Code von Experiments, Variations, Projects und Page Rules steht `ablyftTools` ohne jede Einrichtung zur Verfügung. Es ist dasselbe Objekt wie [`ablyft.getTools()`](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/). Der Variation-Editor zeigt neben den Code-Feldern einen **Code Helper** mit den häufigsten Aufrufen, die du mit einem Klick kopierst: ```js // 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](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/) aufgelistet. ## Ein vollständiges Beispiel Ändere die Überschrift und den Button einer Landing Page und stelle sicher, dass die Änderung rückgängig gemacht werden kann. **Variation JS code** ```js ablyftTools.waitForElement('.hero h1', (headline) => { headline.dataset.originalText = headline.textContent; headline.textContent = 'Free shipping on all orders'; }); ``` **Variation CSS code** ```css .hero .cta-button { background-color: #e4002b; } ``` **Variation Reset JS code** ```js 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 wissen * **Fehler werden abgefangen.** Wenn dein Code einen Fehler wirft, protokolliert ABlyft ihn (im [Debug-Modus](https://docs.ablyft.com/de/developers/debugging/preview-and-live-log/#debug-mode)) und fährt mit dem nächsten Schritt fort. Eine fehlerhafte Variation stoppt keine anderen Experiments. * **Minification.** Wenn **Minify JavaScript** in den [Snippet-Einstellungen](https://docs.ablyft.com/de/developers/installation/snippet-settings/#minify-javascript) 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`](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/#domchanged)-Callbacks gemeldet. * **Code läuft bei erneuten Ausführungen noch einmal.** Nach [`ablyft.reInit()`](https://docs.ablyft.com/de/developers/application-integration/spa-navigation/) oder einem Page-Trigger kann Code erneut laufen. Reset JS wird zuerst ausgeführt (nur mit **Use SPA features**). ## Fehlerbehebung * **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](https://docs.ablyft.com/de/developers/debugging/). ## Nächste Schritte - [Dynamische Inhalte](https://docs.ablyft.com/de/developers/application-integration/dynamic-content/): Warte auf Elemente, die später erscheinen. - [Tools](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/): Alle Hilfsfunktionen für deinen Code. - [Custom goals](https://docs.ablyft.com/de/developers/tracking-and-events/custom-goals/): Löse Goals aus deinem Code aus.