Page tree
Skip to end of metadata
Go to start of metadata

Überblick

Mit dem Visuellen Editor können Sie Varianten Ihrer Website erzeugen, indem Sie durch "Point-and-Click" Elemente auswählen und bearbeiten. Zusätzlich können Sie per jQuery und CSS das Layout und den Aufbau der Seite fast beliebig verändern. Die Varianten werden dann im Rahmen eines A/B-Tests nach einem Zufallsprinzip ausgespielt, sie können aber auch gezielt an bestimmte Besuchersegmente ausgespielt werden (siehe Einsatz von Personalisierung).

Jede Aktion, die Sie an einem Element ausführen (etwa den Text oder das HTML bearbeiten, es verschieben oder unsichtbar machen) wird in eine Zeile Javascript transformiert (oder genauer: eine Zeile jQuery-Code). Dieser Code wird beim Anzeigen in die Seite "injiziert" und sorgt dann dafür, dass der im Browser geladene HTML-Code verändert wird ("DOM-Manipulation").

Um ein Projekt mit Hilfe des Visuellen Editors anzulegen gehen Sie bitte wie folg vor:

  • Klicken Sie auf der Dashboard-Seite den Button "Weiteres Projekt erstellen".
  • Wählen Sie "Visueller A/B-Test" als Projekttyp.
  • Geben Sie die URL der Seite ein, die in Editor geladen werden soll.

Bitte beachten Sie die folgenden Punkte:

  • Ein moderner Browser ist Voraussetzung für die Verwendung des Visuellen Editors ist - insbesondere ist Internet Explorer erst ab Version 9 geeignet.
  • Die geladene URL muss im öffentlichen Internet erreichbar sein, es kann leider keine Seite im Editor bearbeitet werden, die nur in einem Intranet erreichbar ist.

  • Die URL ist nicht identisch mit der Seite, auf der im laufenden Betrieb später die Variation angezeigt wird, sie steht vielmehr stellvertretend dafür. Wo ein Projekt ausgespielt wird, wird in einem späteren Schritt ("Konfigurieren der Projekt-Auslieferung") festgelegt. Die Eingabe der URL ist an dieser Stelle notwendig, damit die Webseite bearbeitet werden kann.

Der Seite wird anschließend im Visuellen Editor angezeigt, Sie können nun Varianten anlegen.

Der Visuelle Editor

No.Beschreibung
1.Die URL der Seite, die im Editor geladen wird, kann hier geändert werden. Durch Klicken auf die URL gelangen Sie in den Editiermodus. Nach dem Ändern wird die neue Seite im Editor geladen.
2.In diesem Pulldown können unterschiedliche Endgeräte ausgewählt werden, darunter auch Smartphones und Tablets. Nach der Auswahl wird die Seite so angezeigt, wie sie im jeweiligen Endgerät dargestellt wird.
3.Über die Reiter wählen Sie eine der Varianten oder das Original der Seite aus. Wenn Sie die Maus über den Reiter bewegen, dann klappt die Varianten-Navigation aus (s.u.), über die Sie Einstellungen vornehmen können, die die Variante als Ganzes betreffen.
4.Mit Klick auf das +-Symbol legen Sie eine neue Variante an.
5.Hiermit können Sie den Modus des Editors zwischen "Bearbeiten" und "Navigieren" umschalten. Im Navigations-Modus können Sie zu einer beliebigen Seite navigieren oder Formulare ausfüllen.
6.Klick auf den Abbrechen-Button führt zurück zum Dashboard. Bitte beachten Sie dass damit alle Änderungen verloren gehen!
7.Klick auf den Button "Segmentierung festlegen" führt zum nächsten Schritt, in dem Segmentierungs-Regeln auf das Projekt angewendet werden können. (wird nur beim Neuanlegen eines Projektes angezeigt).
8.Beim Klicken auf Elemente der Seite öffnet sich ein Menü, das Funktionen zum Bearbeiten des Elementes anbietet. Diese werden unten beschrieben ("Funktionen des Element-Menüs").

Varianten-Navigation

Dieses Menü erscheint, wenn Sie die Maus über den Reiter der gerade aktiven Variante bewegen. Sie können damit Einstellungen vornehmen, die die ganze Variante betreffen.

MenüpunktBeschreibung
Änderung widerrufenMacht die letzten Änderungen an Elementen in umgekehrter Reihenfolge rückgängig.
Variante umbenennenErlaubt die Umbenennung einer Variante.
Variante löschenLöscht die Variante.
Eigenes JavascriptÖffnet ein Dialogfenster zum Eingeben von Javascript/jQuery, das beim Anzeigen der Variante ausgeführt wird (siehe Abschnitt "Bearbeiten von Javascript").
Eigenes CSSÖffnet ein Dialogfenster zum Eingeben von CSS, das beim Anzeigen der Variante angewendet wird (siehe Abschnitt "Bearbeiten von CSS").
Segmentierung festlegenÖffnet den Dialog zur Auswahl der Segmentierungsregel für diese Variante (siehe Einsatz von Personalisierung).

Funktionen des Element-Menüs

HTML bearbeiten

Zeigt das HTML eines Elementes in einem Editor und ermöglicht dessen Bearbeitung.


Verwenden Sie diese Funktion mit großer Vorsicht! Beim Anzeigen der Variante wird das angezeigte HTML - und nicht nur der Teil, den Sie geändert haben - in die Seite injiziert. Wenn das Element dynamische Bestandteile enthält (etwa die Anzeige eines Preises o.Ä.) dann werden diese überschrieben. Diese Funktion sollte also nur für statische Abschnitte einer Seite verwendet werden.

Sie sollten auch keine zu großen Bereiche der Seite auswählen und deren HTML ändern, denn dann ist die Menge des Codes, der in die Seite injiziert werden muss ebenfalls groß, was zu einem Flackereffekt führen kann.

Text bearbeiten

Ermöglicht die Bearbeitung der textuellen Anteile eines Elementes. Diese werden im Editorfenster unformatiert angezeigt um die Bearbeitung zu erleichtern.

CSS bearbeiten

Mit dieser Funktion können einzelne CSS-Attribute des ausgewählten Elementes geändert werden. Dazu sollten idealerweise Grundkenntnisse von Cascading Stylesheets vorhanden sein, die Funktion erlaubt es aber auch, durch Ausprobieren den Effekt von CSS auf die Elemente kennenzulernen, etwa was Farben betrifft.

Bild-URL bearbeiten

Wenn das ausgewählte Element ein Bild ist, dann kann mit dieser Funktion die URL eines alternativen Bildes gewählt werden. Dazu muss das Bild auf einem Webserver erreichbar sein.

Link bearbeiten

Wenn das ausgewählte Element ein Hyperlink ist, dann kann mit dieser Funktion die URL geändert werden.

Klicks tracken

Mit dieser Funktion kann ein Klick-Ziel für das Element erzeugt werden. Unter dem gewählten Namen ist es anschließend im Dialog zur Auswahl von Konversionszielen auswählbar. Unter "Erweiterte Einstellungen" können Sie zudem den CSS-Selektor des Elementes bearbeiten.

Ein Element das durch ein Klickziel getrackt wird wird rot umrandet hervorgehoben. Die Umrandung können Sie nach Klick auf das Element im Menüpunkt "Klick-Ziele nicht hervorheben unterdrücken."

Nach Klick auf das Element kann im Menüpunkt "Klick-Ziele bearbeiten" der Name des Ziels geändert und das Klick-Ziel wieder entfernt werden.

Element verbergen

Diese Funktion macht das ausgewählte Element unsichtbar, indem sein CSS-Attribut "visibility" auf den Wert "hidden" gesetzt wird. 

Element entfernen

Mit dieser Funktion wird das ausgewählte Element aus dem HTML entfernt. 

Element verschieben

Erlaubt das Verschieben eines Elementes auf der Seite. Das Element wird mit einer gestrichelten Linie markiert. Um die Verschiebung zu bestätigen klicken Sie den grünen Pfeil, um abzubrechen und das Element an die Ausgangsposition zu bewegen klicken Sie das rote X.

Elemente umsortieren

Diese Funktion ermöglicht es, die Reihenfolge von Elementen zu ändern und ähnelt damit "Element verschieben". Es ist besonders geeignet für gleichartige Elemente die einem "Eltern"-Element untergeordnet sind.

  • Klicken Sie das Element an und wählen Sie ggfs. so oft die Funktion "Elternelement auswählen" (s.u.) bis das gewünschte Element korrekt ausgewählt ist.

Das Element wird dann pink markiert, das Elternelement wird blau markiert. Sie können nun mit der Maus das Element innerhalb des blauen Rahmens verschieben.

Wenn Sie das Element umsortiert haben, bestätigen Sie die Aktion mit Klick auf den "Speichern"-Button oder klicken Sie den "Abbrechen"-Link.

Elternelement auswählen

Das HTML der geöffneten Seite wird im Browser als sogenanntes "Document Object Model" repräsentiert. Dabei werden die HTML-Tags in einer baumartigen Struktur angeordnet, es gibt also eine Eltern-Kind-Beziehung.

Beim Bewegen der Maus über die Seite wird das Element mit einem Rahmen markiert und links oben das zugehörige HTML-Tag angezeigt.

Um gezielt in der Element-Hierarchie nach "oben" zu gehen können Sie ein Element anklicken und dann die Funktion "Elternelement auswählen" klicken. Der markierte Bereich vergrößert sich Sie können sehen wie sich das zugehörige HTML-Tag das links oben angezeigt wird austauscht.

Bearbeiten von Javascript

Die Varianten eines Projektes im Visuellen Editor werden beim Anzeigen erzeugt, indem Javascript-Code in die Seite "injiziert" wird und damit das sog. Document Object Model der Seite manipuliert. Die Injektion von CSS ist zusätzlich möglich, das wird im folgenden Abschnitt beschrieben.

Dieses Javascript kann auf unterschiedliche Arten erstellt werden:

  • Sie verwenden die Funktionen des Element-Menüs wie oben beschrieben. Jede Aktion wird dabei in eine Zeile jQuery-Code transformiert. Das Ergebnis können Sie sehen, wenn Sie den Menüpunkt "Eigenes Javascript" aufrufen.
  • Sie erstellen den jQuery-Code selber und kopieren ihn in das "Eigenes Javascript"-Popup. 
  • Sie kombinieren beide Ansätze, indem Sie die Funktionen des Element-Menüs verwenden und das erzeugte Javascript anschließend manuell weiterbearbeiten.

In einem Beispiel wurde zunächst der Text eines Navigations-Elementes verändert und das Element dann umsortiert, der folgende jQuery-Code entstand dabei:

$("li#menu-item-156 > a").html("Fernstudiengänge Liste");
$("li#menu-item-156").insertAfter($("li#menu-item-156").parent().children().eq(0));

Bearbeiten von CSS

Um die CSS-Stile von Elementen einer Seite zu ändern können Sie unterschiedlich vorgehen:

  • Klicken Sie ein Element an und verwenden Sie die Funktion "CSS bearbeiten" wie oben beschrieben.
  • Rufen Sie den Menüpunkt "Eigenes CSS" im Varianten-Menü auf und geben Sie in dem Popup das sich öffnet CSS-Code ein.

Beide Ansätze ändern das Aussehen der Seite, allerdings auf technisch unterschiedliche Weise.

Menüpunkt "CSS bearbeiten"

Jede Verwendung des CSS-Bearbeiten-Popups erzeugt eine Zeile jQuery, die unter "Eigenes Javascript" eingesehen werden kann. Die Änderung einer Font-Farbe führt bspw. zu folgendem Code in unserer Beispiel-Website:

$('div#post-259 > h1 > a').css({"color":"#b30e1c"});

jQuery manipuliert das HTML dann so, dass ein sogenannter "Inline-Style" auf das ausgewählte Element angewendet wird.

Varianten-Menü "Eigenes CSS"

Dieser Menüpunkt öffnet einen Code-Editor, in dem CSS eingegeben werden kann, und zwar ohne ein öffnendes und/oder schließendes <style>-Tag.

Der Unterschied zum oben beschriebenen Punkt ("CSS Bearbeiten") ist der Mechanismus, mit dem das CSS beim Ausspielen in die Seite injiziert wird: in diesem Fall wird der gesamte Inhalt als ein <style>-Tag in die Seite eingefügt und wird damit vom Browser etwas schneller angezeigt als die vorherige Funktion.

Die Anpassung von CSS ist im Varianten-Menü somit zwar nicht so komfortabel, ist aber für größere Mengen von CSS oder wenn beim Ausspielen der Variante ein Flackern zu sehen ist zu bevorzugen.

  • No labels