# Variations URL: https://docs.ablyft.com/de/guides/experiments/variations/ > Variation-Typen, die Baseline "Original", wie du Variations erstellst, bearbeitest, klonst und löschst und wie du Redirect- und Multi-Page-Experiments aufbaust. Eine Variation ist eine Version deiner Seite, die an einem Experiment teilnimmt. Jedes Experiment vergleicht mindestens zwei Variations: die **Baseline** (die unveränderte Seite) und eine oder mehrere veränderte Versionen. > Zum Erstellen, Bearbeiten, Klonen und Löschen von Variations brauchst du die Rolle Member, Admin oder Owner. ## Die Variations-Card Die Card **Variations** auf der Experiment-Seite ("WHAT changes do you want to test?") listet alle Variations auf: | Spalte | Beschreibung | | ---------------------- | ---------------------------------------------------------------------------------------------------------- | | Farbpunkt | Eine Farbe, die die Variation kennzeichnet. ABlyft vergibt sie automatisch nach der Position in der Liste. | | **Name** | Name und Beschreibung. Die Baseline trägt das Badge **Baseline**. | | **Type** | Der Variation-Typ. Fahre mit der Maus darüber, um zu sehen, wann du ihn verwenden solltest. | | **Traffic allocation** | Der Anteil am Traffic des Experiments. | | **Size** | Die zusammengerechnete Größe von Code und Änderungen der Variation. | | **Last updated** | Wann und von wem die Variation geändert wurde. | ## Die Baseline "Original" Wenn du die erste Variation eines Experiments erstellst, legt ABlyft automatisch auch die Variation **Original** an. Sie hat den Typ **Unchanged** und ist als **Baseline** markiert. Alle anderen Variations werden in den Results mit der Baseline verglichen. Löschst du die Baseline, wird die älteste verbleibende Variation zur neuen Baseline. ## Variation-Typen | Typ | Verwende ihn, um | | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Visual Editor** | schnelle visuelle oder inhaltliche Änderungen ohne Code vorzunehmen: Überschriften, Bilder, Farben, Layouts oder Buttons auf deiner bestehenden Seite. Siehe [Visual Editor](https://docs.ablyft.com/de/guides/experiments/visual-editor/). | | **Redirect** | eine komplett neue Landingpage oder andere URL-Parameter zu testen. Visitors in dieser Variation werden auf die URL weitergeleitet, die du angibst. | | **Code** | eigenes JavaScript und CSS hinzuzufügen, für dynamische Änderungen oder Änderungen, die über den Visual Editor hinausgehen. | | **Unchanged** | die Seite genau so zu zeigen, wie sie ist. Nutze ihn als Original-Variation (Kontrolle). | | **FullStack** | eigenen Code an beliebiger Stelle in deiner Anwendung auszuführen. Nur verfügbar, wenn beim Experiment **Enable FullStack for this experiment** eingeschaltet ist. Siehe [FullStack](https://docs.ablyft.com/de/developers/application-integration/fullstack/). | | **Shopify Theme** | ein Draft-Theme deines Shopify-Stores zu zeigen. Siehe [Shopify Variations](https://docs.ablyft.com/de/guides/experiments/shopify-variations/). | | **Shopify Template** | ein alternatives Template für einen Seitentyp deines Shopify-Stores zu zeigen. Siehe [Shopify Variations](https://docs.ablyft.com/de/guides/experiments/shopify-variations/). | ## Eine Variation erstellen 1. Klicke auf der Experiment-Seite in der Card **Variations** auf **new variation**. 2. Schritt **General**: Gib einen **Name** ein (ABlyft schlägt `Variation #1`, `Variation #2` usw. vor) und optional eine **Description**. Bei der ersten Variation eines Experiments erklärt der Hinweis, dass **Original** automatisch erstellt wird. 3. Schritt **Type**: Wähle, wie du die Variation aufbauen möchtest. Klicke auf eine Option, um zu lesen, wann du sie wählen solltest. 4. Klicke auf **Create variation**. Was als Nächstes passiert, hängt vom Typ ab: * **Visual Editor**: Deine Example URL öffnet sich im Editor. Siehe [Visual Editor](https://docs.ablyft.com/de/guides/experiments/visual-editor/). * Alle anderen Typen: Die Variation-Einstellungen öffnen sich, in denen du die Redirect-URL, deinen Code oder die Shopify-Details eingibst. Wenn du eine Variation erstellst oder löschst, verteilt ABlyft den Traffic des Experiments wieder gleichmäßig auf alle Variations. Prüfe **Traffic Split & Distribution** in den [Experiment-Einstellungen](https://docs.ablyft.com/de/guides/experiments/create-experiment/#traffic-split--distribution), wenn du eine ungleiche Verteilung brauchst. ## Eine Variation bearbeiten Jede Zeile hat einen Button **Edit**. Bei einer **Visual Editor**-Variation öffnet er den Editor, bei allen anderen Typen die Variation-Einstellungen. Das Menü neben dem Button bietet: | Aktion | Beschreibung | | ------------------- | ----------------------------------------------------------------------------------------------------------------------- | | **Edit settings** | Öffnet die Variation-Einstellungen für jeden Typ, auch für **Visual Editor**-Variations. | | **Show in browser** | Öffnet die Variation auf deiner Example URL. Nur verfügbar, solange das Experiment in **Preview** oder **Running** ist. | | **Clone** | Erstellt eine Kopie der Variation. Die Kopie ist nie die Baseline. | | **Delete** | Löscht die Variation. | ### Einstellungen Die Variation-Einstellungen sind in Bereiche gegliedert: | Bereich | Inhalt | | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | | **General** | **Name**, **API Name** (nur für fortgeschrittene Nutzer nötig), **Description** und **Type**. | | **Redirect to a different URL** | Nur für den Typ **Redirect**. | | **Code** | Für die Typen **Code**, **FullStack** und **Visual Editor**. | | **FullStack** | Nur für den Typ **FullStack**: eigene Key/Value-Properties. | | **Shopify Theme** / **Shopify Template** | Nur für die Shopify-Typen. | | **Metadata** | Key/Value-Paare, nur sichtbar, wenn dein Project unter **Project → Settings → Metadata** Variation-Metadata definiert. | ### Code Der Bereich **Code** enthält **JS code**, **CSS code** und **Reset JS code** sowie **Settings from Visual Editor**: das vom Visual Editor erzeugte JSON, das für den Typ **Visual Editor** erforderlich ist. Bearbeite es nur, wenn du weißt, was du tust. Was jedes Feld macht, der **Code Helper**, die Ausführungsreihenfolge, das Limit von 32.768 Zeichen und der Code des gesamten Experiments (**Experiment Level Codes**) sind unter [Custom JavaScript](https://docs.ablyft.com/de/developers/application-integration/custom-javascript/) beschrieben. > **Auf Elemente warten:** Der Code einer Variation kann ausgeführt werden, bevor die Seite vollständig aufgebaut ist. Verlasse dich nicht darauf, > dass `document.querySelector()` dein Element sofort findet. Nutze stattdessen > [`ablyftTools.waitForElement`](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/#waitforelement). ## Redirect-Variations Mit dem Typ **Redirect** werden Visitors der Variation auf eine andere URL geschickt. Das ist nützlich für Split-URL-Tests, bei denen die Variation eine komplett andere Seite ist. Beispiel: Ein Experiment läuft auf `https://example.com/overview`, und die Variation soll `https://example.com/overview2` zeigen. 1. Erstelle eine Variation vom Typ **Redirect**. 2. Gib im Bereich **Redirect to a different URL** die **Redirect URL** ein. Das ist entweder eine vollständige URL (`https://...`) oder ein Query-String, der mit `?` beginnt, um URL-Parameter zu testen. 3. Lass **Preserve query parameters** angehakt (Standard), wenn die Parameter der aktuellen URL weitergegeben werden sollen. Enthalten beide URLs denselben Parameter, gewinnt der Wert der Redirect-URL. 4. Speichere. Der Visitor wird so früh wie möglich weitergeleitet, und ABlyft blendet die Seite in der Zwischenzeit aus, um Flackern zu vermeiden. Loop-Schutz und weitere Details: [`redirect`](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/#redirect). > **Installiere das Snippet auf der Zielseite:** Das Snippet muss auch auf dem Redirect-Ziel installiert sein, sonst können dort erreichte Goals nicht gemessen werden. ## Multi-Page-Experiments (Funnel) Manchmal braucht ein Experiment auf verschiedenen Seiten unterschiedliche Änderungen, zum Beispiel ein Banner auf der Startseite und geänderte Texte auf Produktseiten. Das erreichst du mit einem Experiment, mehreren [Pages](https://docs.ablyft.com/de/guides/audiences-and-delivery/pages/) und Variation-Code, der prüft, wo er läuft. **Beliebige Einstiegsseite.** Der Visitor sieht die Änderungen auf jeder anvisierten Seite: 1. Ordne dem Experiment alle relevanten Pages zu (Card **Pages**), zum Beispiel "Homepage" und "Product Pages". 2. Verzweige im Variation-Code nach Seite: ```js const path = window.location.pathname; if (path === '/') { // Code for "Add banner" } else if (path.startsWith('/product/')) { // Code for "Text changes inside boxes" } ``` Statt des Pfads kannst du auch eine CSS-Klasse, das Vorhandensein eines Elements oder einen Data-Layer-Wert prüfen. **Bestimmte Einstiegsseite.** Der Visitor soll die Änderungen der Produktseite erst sehen, nachdem er das Banner auf der Startseite gesehen hat: 1. Speichere im Variation-Code der Startseite ein Flag, wenn die Änderung angewendet wird: ```js window.localStorage.setItem('homepage_banner_added', 'true'); ``` 2. Erstelle eine zusätzliche Page, zum Beispiel "Product Pages (after homepage banner)", mit der URL-Regel der Produktseite. Gib unter **Advanced Targeting** eine Bedingung ein, die das Flag prüft: ```js return window.localStorage.getItem('homepage_banner_added') === 'true'; ``` 3. Ordne diese Page dem Experiment statt der einfachen Produktseiten-Page zu und behalte den Produkt-Zweig in deinem Code. > Das Flag funktioniert nur innerhalb derselben Domain. Für Visitors, die die Domain wechseln, nutze den > [Bucketing-URL-Parameter](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/#getsetbucketingurlextension), um die Zuweisung > zu übergeben, oder wende dich an den ABlyft-Support. ## Eine Variation löschen Öffne das Menü der Variation und klicke auf **Delete**. ABlyft verteilt den Traffic automatisch neu und macht, falls du die Baseline gelöscht hast, die älteste verbleibende Variation zur neuen Baseline. Prüfe danach die Traffic-Verteilung. Denke daran, dass ein Experiment mindestens eine Variation braucht, um gestartet zu werden, siehe [Bevor du Preview oder Start nutzen kannst](https://docs.ablyft.com/de/guides/experiments/start-pause-stop/#before-you-can-preview-or-start). ## Nächste Schritte - [Visual Editor](https://docs.ablyft.com/de/guides/experiments/visual-editor/): Baue eine Variation per Klick. - [Preview & QA](https://docs.ablyft.com/de/guides/experiments/preview-and-qa/): Prüfe deine Variations vor dem Start. - [Traffic Allocation](https://docs.ablyft.com/de/guides/audiences-and-delivery/traffic-allocation/): Verteile Visitors auf Variations. - [Tools](https://docs.ablyft.com/de/developers/reference/javascript-api/tools/): Hilfsfunktionen für Variation-Code.