Visuellen Editor verwenden

CSS- oder globalen JavaScript-Code mit dem Code-Editor auf Seiten einfügen

Benutzeroberfläche

Der visuelle Editor von Optimize besteht aus zwei visuellen Komponenten: der App-Leiste und der Editorpalette. Sie werden auf der Webseite, die Sie ändern möchten (der Editorseite), eingeblendet.

App-Leiste

Die App-Leiste oben auf der Seite enthält Informationen zum jeweiligen Test, darunter den Namen und Status des Tests, den Namen der Variante, die Anzahl der vorgenommenen Änderungen, Diagnose und Hilfe. Weitere Informationen finden Sie im Hilfeartikel Der visuelle Editor.

Oberer Bereich

Im oberen Bereich der App-Leiste (dunkelgrau) finden Sie den Namen und Status des Tests, den Namen der Variante, das Menü für Gerätevoreinstellungen sowie die Schaltflächen für Änderungen und Diagnose, die in anderen Hilfeartikeln erläutert werden.

Weitere Informationen zum oberen Bereich:
  • Das Menü für Gerätevoreinstellungen und die Schaltfläche für Änderungen werden im Hilfeartikel Der visuelle Editor erläutert.
  • Informationen zur Schaltfläche für die Diagnose finden Sie unter Diagnose der Installation.

Unterer Bereich

Im unteren Bereich der App-Leiste finden Sie folgende Funktionen, die im weiteren Verlauf noch genauer beschrieben werden:

  • Element-Selektor
  • Navigationspfade
  • Code-Editor
  • Interaktiver Modus
  • Verschiebungseinstellungen

 

Element-Selektor und Mehrfachauswahl

Mit dem Element-Selektor (Symbol für den Element-Selektor) können Sie mehrere Elemente auf Ihrer Webseite auswählen, um gleichzeitig Änderungen an allen vorzunehmen und Zeit zu sparen. So lässt sich beispielsweise die Schriftgröße aller Schaltflächen in der oberen Navigationsleiste anpassen.

Klicken Sie zuerst auf ein Element auf Ihrer Seite und dann in der App-Leiste auf die Schaltfläche für den Element-Selektor (Symbol für den Element-Selektor). Der Bereich „Elemente auswählen“ wird eingeblendet:

Tipp: Halten Sie die Umschalttaste gedrückt, um mehrere Elemente zum Bearbeiten auszuwählen.

Im Feld „Element-Selektor“ wird das aktuell ausgewählte Element (z. B. #header>a>img) sowie die Gesamtzahl der ausgewählten Elemente (z. B. 1) angezeigt. Der Inhalt des Felds wird dynamisch aktualisiert, wenn Sie Elemente auf der Seite auswählen. Text kann auch direkt in das Feld „Element-Selektor“ eingegeben werden (z. B. #login), um Elemente schneller zu finden und auszuwählen.

Die Kästchen für Element-ID verwenden und Elementklasse verwenden sind standardmäßig angeklickt. So kann der visuelle Editor die richtige Element-ID und -Klasse auswählen, wenn Sie ein Element auf der Seite anklicken. Lassen Sie diese Kästchen angeklickt, wenn die Attribute des Elements statisch sind.

Werden ID und/oder Klasse eines Elements dynamisch generiert (z. B. von einer dynamischen Website oder einem CMS), sollen Sie unter Umständen nicht vom visuellen Editor erkannt werden. Für eine präzisere Steuerung beim Erstellen Ihrer Selektoren können Sie die folgenden Kästchen verwenden:

  • Element-ID verwenden: Entfernen Sie das Häkchen, wenn die Element-ID dynamisch generiert wird.
  • Elementklasse verwenden: Entfernen Sie das Häkchen, wenn die Elementklasse dynamisch generiert wird.

Weitere Informationen zum Erstellen von CSS-Selektoren finden Sie unten.

Navigationspfade

Wenn Sie auf Ihre Webseite klicken, wählt der visuelle Editor das tiefste Element im angeklickten Bereich aus. Anhand der Navigationspfade in der Mitte der App-Leiste lässt sich der Pfad zu Ihrer Auswahl in der Seitenstruktur nachvollziehen.

Sie können die Elemente in den Navigationspfaden anklicken, um ein Ancestor-Element auszuwählen, das denselben Bereich einnehmen und sich auf sichtbare Eigenschaften des Bereichs auswirken kann, z. B. auf Hintergrundbild oder -farbe. Wenn Sie den Mauszeiger in den Navigationspfaden auf die Ancestor-Elemente bewegen, sehen Sie den Bereich der vom jeweiligen Element eingenommen wird. Sie können das Element anklicken und die Editorpalette verwenden, um die betroffenen Eigenschaften zu sehen.

Erweiterter Editor – Screenshot des CSS-Selektors

Profitipp:
Klicken Sie neben einem Element auf „>“, um ein Ancestor-Element auszuwählen.

Wenn Sie ein Element im visuellen Editor auswählen, wird der CSS-Selektor festgelegt, auf den die Änderungen angewendet werden. Der Selektorwert ist wichtig, da er verwendet wird, wenn die Websitevariante Besuchern präsentiert wird.

Das ist der Algorithmus, den der Editor verwendet, um den Selektor zu erstellen:

  • Ancestor-Elemente nach oben im DOM durchlaufen, bis eines
    • anhand des ID-Attributs,
    • anhand einer Klasse, die nur von diesem Element auf der Seite verwendet wird, oder
    • als <BODY> des Dokuments eindeutig identifiziert werden kann.
  • Elemente zurück bis zum ausgewählten Element durchlaufen und
    • den Tag-Namen verwenden, wenn nur ein untergeordnetes Element mit diesem Tag vorhanden ist.
    • Ansonsten den Selektor „:nth-of-type“ verwenden.
Tipps für CSS-Selektoren
  • Es ist immer besser, sich mit einer ID oder einer eindeutigen Klasse auf Elemente zu konzentrieren. Es kann auch ein Ancestor in der Nähe verwendet werden, der sowohl über eine ID als auch über eine eindeutige Klasse verfügt. So können Ihre Varianten einfacher verwaltet werden, wenn kleine Änderungen an der Seite vorgenommen werden.
  • Wenn Sie Klassen als eindeutige IDs verwenden, vergewissern Sie sich, dass Sie eine repräsentative Seite als Editorseite verwenden und nicht beispielsweise eine Produktergebnisseite mit einem einzigen Produkt.
  • Sie können den CSS-Selektor einer Änderung jederzeit ändern und Ihren eigenen Selektor eingeben. Der Editor hebt das neu abgeglichene Element/die neu abgeglichenen Elemente hervor.
  • Sie können die Optionen zur Verwendung einer eindeutigen ID oder einer eindeutigen Klasse deaktivieren, um eine Selektorhierarchie zu verkürzen. Das kann hilfreich sein, wenn diese Attribute eine CMS- oder Datenbank-ID verwenden und variieren.

Code-Editor

Sie können nicht nur den visuellen Editor verwenden, um Änderungen vorzunehmen, sondern auch den Code-Editor von Optimize nutzen, um CSS- und globalen JavaScript-Code direkt auf Ihrer Webseite einzufügen.

Dazu klicken Sie in der App-Leiste auf die Schaltfläche für den Code-Editor (Einbetten):

Schaltfläche für den Code-Editor in der App-Leiste

CSS-Code hinzufügen

So fügen Sie CSS-Code direkt auf Ihrer Seite ein:

Klicken Sie auf CSS:

Code-Editor-Menü, „CSS“ ausgewählt

Der CSS-Code-Editor wird geöffnet:

Screenshot des CSS-Code-Editors

Geben oder fügen Sie den CSS-Code in das Textfeld ein und klicken Sie auf Speichern.

Hinweis: Änderungen am Text, am HTML-Code und an anderen Elementen, die nicht den CSS-Stil betreffen (z. B. am Elementstil), sind nicht sichtbar und daher nicht von Änderungen am CSS-Code betroffen.

In HTML konvertieren

Wenn Sie den CSS-Code in einer Variante bearbeiten möchten, um beispielsweise nicht unterstützte Stile hinzuzufügen (etwa das Präfix des Browseranbieters, CSS-Kommentare, Keyframe-Animationen oder CSS-Hacks), können Sie In HTML konvertieren verwenden. In Optimize lässt sich der CSS-Code in einer Variante bearbeiten und ohne Validierung verwenden.

Im CSS-Code-Editor von Optimize können Sie CSS-Code, der über die UI generiert wurde, ansehen und kopieren und eigenen benutzerdefinierten CSS-Code eingeben, der dann in Optimize in Stiländerungen konvertiert wird. Wenn Sie benutzerdefinierten CSS-Code eingeben, der vom Optimize-Parser nicht erkannt wird, haben Sie zwei Möglichkeiten:

  1. Sie können CSS bereinigen auswählen, um nicht geparsten CSS-Code zu entfernen, oder
  2. auf Speichern und dann auf In HTML konvertieren klicken, um den nicht geparsten CSS-Code beizubehalten und mit HTML-Code zu umschließen.

Dialogfeld „CSS in HTML konvertieren?“

Wenn Sie auf In HTML konvertieren klicken, wird der nicht geparste CSS-Code in ein HTML-<STYLE>-Tag eingefügt und an das <HEAD>-Tag im Code Ihrer Website angefügt. Der Optimize-Editor versucht dann nicht, den CSS-Code als einzelne Stiländerungen zu validieren oder darzustellen.

In HTML konvertieren – Beispiele

Im Folgenden sehen Sie einige Beispiele, bei denen Sie die Funktion zum Konvertieren von nicht unterstütztem CSS-Code (fett) in HTML verwenden könnten:

Präfix des Browseranbieters
div.nav > ul > li:nth-of-type(4) > a > span {
  color : rgb(247, 148, 151);
  -moz-font-smoothing: antialiased;
}
CSS-Kommentar
div.nav > ul > li:nth-of-type(2) > a > span {
  color : rgb(247, 148, 151); /* Dieser RGB-Wert entspricht einem rosa Farbton. */
}
Keyframe-Animation
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
CSS-Hack
div.nav > ul > li:nth-of-type(2) > a > span {
  *color : rgb(247, 148, 151); /* Ausrichtung auf IE bis Version 7. */
}

Einschränkungen

Wenn Sie In HTML konvertieren verwenden, können Sie sich keine Vorschau der Auswirkungen einzelner Stiländerungen im visuellen Editor von Optimize anzeigen lassen. Sie sehen dann z. B. nicht die Anzahl der Stiländerungen, auf welche Elemente sie sich auswirken und ob diese Elemente überhaupt vorhanden sind. CSS-Code, der in HTML konvertiert wird, wird in Optimize nicht validiert und es werden auch keine entsprechenden Fehler angezeigt. Sie können den Code aber jederzeit mit den Chrome-Entwicklertools debuggen.

Unterstützung für Bedingungen

Bedingungen wie Medienabfragen werden im CSS-Code-Editor unterstützt. Dadurch lassen sich Varianten für responsive Seiten ganz leicht implementieren. Beispielsweise können Sie für Geräte mit einer maximalen Bildschirmbreite von 500 Pixeln die Schriftgröße auf 14 Pixel reduzieren, indem Sie den folgenden CSS-Code einfügen:

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Erweiterter CSS-Code-Editor

Falls Sie bereits mit CSS vertraut sind, können Sie die Variante vollständig im CSS-Codeeditor implementieren. CSS-Code, den Sie hier hinzufügen, wird in einzelne Stiländerungen umgewandelt, die in der Änderungsliste sichtbar sind. Außerdem können Sie eine leistungsstärkere Variante implementieren, indem Sie Code im CSS-Code-Editor kopieren und dann auf Ihrer Website einfügen.

Globalen JavaScript-Code hinzufügen

Dynamische Websites stellen besondere Herausforderungen für Tests und Personalisierungen dar, da viele der Signale, die dafür wichtig sein können, beim Laden des Optimize-Containers unter Umständen nicht vorhanden sind. Selbst wenn in Optimize eine Änderung angewendet wird, kann es sein, dass Seitenelemente danach wieder dynamisch geändert oder verschoben werden und die Änderung noch einmal vorgenommen werden muss.

Single-Page-Anwendungen (SPA) bringen ähnliche Probleme mit sich, da sie nach einer Nutzerinteraktion nicht aktualisiert werden und sich die URLs nicht ändern. Wenn globaler JavaScript-Code auf Seitenebene eingefügt wird, ist er für alle Elemente auf der Seite verfügbar, nicht nur für ein einzelnes Element.

Profitipp: Verwenden Sie ein Aktivierungsereignis, um den globalen JavaScript-Code auszulösen, damit die Änderung beliebig oft wiederholt wird.

Globalen JavaScript-Code einfügen

Wenn Sie globalen JavaScript-Code auf Ihrer Seite einfügen möchten, klicken Sie in der App-Leiste auf die Schaltfläche für den Code-Editor (Einbetten):

Schaltfläche für den Code-Editor in der App-Leiste

Klicken Sie auf Globaler JavaScript-Code:

Code-Editor, „Globaler JavaScript-Code“ ausgewählt

Daraufhin wird der Editor für globalen JavaScript-Code geöffnet:

Screenshot des Editors für globalen JavaScript-Code

Geben oder fügen Sie eine JavaScript-Funktion auf Seitenebene ein, die bei Aktivierung dieses Tests aufgerufen werden soll. Klicken Sie dann auf Übernehmen.

Globaler JavaScript-Code – Beispiel

// Aktivierung erfolgt, wenn der Nutzer die E-Commerce-Ergebnisse eingrenzt.
// Wenn das der Fall ist, wird ein zusätzlicher Link für aktuelle Angebote eingefügt,
// aber nur, wenn es weniger als drei Ergebnisse gibt.

var eCommerceContainer = document.getByElementId('ecommerce-container');

if (eCommerceContainer.childNodes.length < 3) {
var offers = document.createElement('a');
offers.href = "/offers";
offers.innerText = ' Hier sind unsere aktuellen Angebote'
eCommerceContainer.appendChild(offers);
}
Profitipp: Verwenden Sie ein Aktivierungsereignis, um den globalen JavaScript-Code auszulösen, damit die Änderung beliebig oft wiederholt wird.

Interaktiver Modus

Im interaktiven Modus (Symbol für den interaktiven Modus) werden Varianten von Seiten mit interaktiven Elementen erstellt, die eine Nutzerinteraktion erfordern, z. B. Scrollen, interaktive Menüs und Anmeldebereiche.

Tastenkombination:

Drücken Sie auf die Umschalttaste + Eingabetaste, um den interaktiven Modus zu aktivieren oder zu deaktivieren.

Hinweis: Auch wenn Ihre Auswahl nicht sichtbar ist, bleibt das Element im interaktiven Modus ausgewählt. Sie können dann in den visuellen Editor wechseln, um Änderungen daran vorzunehmen.

Klicken Sie in der App-Leiste auf die Schaltfläche „Symbol für den interaktiven Modus“, um den interaktiven Modus zu aktivieren. Dadurch wird die Editorpalette ausgeblendet und die App-Leiste durch diese einfache schwarze Leiste ersetzt: Banner „Interaktiver Modus“

Blenden Sie das entsprechende Element im interaktiven Modus ein oder interagieren Sie damit und klicken Sie dann in der schwarzen Leiste auf Beenden, um wieder zum visuellen Editor zu wechseln und bei Bedarf Änderungen daran vorzunehmen.

Verschiebungseinstellungen

Mit der Option An beliebige Position verschieben können Sie Elemente auf der Webseite nach Belieben verschieben. Dazu klicken Sie in der App-Leiste auf Einstellungen (Einstellungen):

Einstellungsmenü für „An beliebige Position verschieben“

An beliebige Position verschieben

Mit der Option „An beliebige Position verschieben“ werden Stiländerungen anhand der Position eines Elements auf Ihrer Webseite erstellt (links, oben, unten usw.). Das Element behält seine ursprüngliche Position im DOM, wird dem Besucher aber an einer anderen Position präsentiert. In der Regel bleibt sein Stil und der Rest der Seite dabei unverändert.

Sie können An beliebige Position verschieben verwenden, um die Position von globalen Schaltflächen, Bereichen und fixierten Elemente wie dem Anmeldebereich zu ändern.

Automatisch für die Neuanordnung auswählen

Mithilfe dieser Option lassen sich im visuellen Editor ganz einfach die richtigen Quell- und Zielelemente auswählen. Wenn Sie auf die Seite klicken, wählt der visuelle Editor automatisch das richtige Element aus (z. B. ein Listenelement <li> anstelle des darin enthaltenen Bilds <img>) und begrenzt die Anordnung auf die Inhalte des Containers (d. h. das Listenelement <ul>).

Außerhalb des Zielelements neu anordnen

Hinweis: Wenn Sie diese Option aktivieren möchten, müssen Sie das Häkchen bei Automatisch für die Neuanordnung auswählen entfernen.

Wenn das Kästchen angeklickt ist, ist die Option „An beliebige Position verschieben“ aktiviert. Ist es nicht angeklickt, können die Elemente im DOM nicht neu angeordnet werden und der Standardmodus für das Verschieben ändert sich von Vor/Nach zu Oben/Unten.

War das hilfreich?
Wie können wir die Seite verbessern?