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

Mit dem Visuellen Editor können durch Point-and-Click ohne Programmierkenntnisse Varianten von Seiten erzeugt werden (siehe Anlegen eines Visuellen A/B-Tests). Die volle Bandbreite der Möglichkeiten bei der Bearbeitung von Seiten wird aber erst durch den Einsatz von jQuery und CSS nutzbar. Anwender mit technischen Kenntnisse können damit das HTML einer Seite komplett umbauen und damit Varianten erstellen, die stark vom Original abweichen. Dies alles ist möglich, ohne dass Ihre IT-Abteilung Code ändern muss, denn das injizierte Javascript und CSS wird auf dem Server von BlackTri gespeichert.

Die Menüpunkte "Eigenes Javascript" und "Eigenes CSS"

Im Varianten-Menü des Visuellen Editors bieten die Menüpunkte "Eigenes Javascript" und "Eigenes CSS" die Möglichkeit, manuell erstellen Code in die Webseite zu injizieren. 

Eigenes Javascript

Dieser Dialog ist vor allem für den Einsatz des Frameworks jQuery zur Manipulation des Document Object Models gedacht.

Beispiel: Öffnen Sie eine beliebige Seite im Visuellen Editor und geben Sie im "Eigenes Javascript"-Dialog folgendes ein:

$("p").prepend("<b>Hello BlackTri Optimizer!</b>");

Dies fügt als erstes Kindelement in jedem <p>-Tag einen Text hinzu. Der Screenshot zeigt das Ergebnis am Beispiel vom wikipedia.de.

Sie können im diesem Dialog beliebige Javascript-Kommandos verwenden, wobei wie oben gezeigt vor allem jQuery sinnvoll ist, da damit der Inhalt und das Aussehen der Seiten besonders leicht manipuliert werden kann. 

Erst editieren, dann nachbearbeiten

Es gibt jedoch keine Notwendigkeit, sich zwischen "Point-and-Click" im Editor und Programmieren mit Javascript  entscheiden zu müssen: Jede Aktion die Sie im Visuellen Editor durchführen (wie beschrieben in Anlegen eines Visuellen A/B-Tests) wird in eine Zeile jQuery umgesetzt, die Sie im Dialog "Eigenes Javascript" sehen und nachträglich bearbeiten können.

Die beiden folgenden Screenshots zeigen, wie die Suchbox von wikipedia.de im Editor bearbeitet wurde:

  • Überschrift und Eingabefeld wurden umsortiert
  • Der Text der Überschrift wurde verändert
  • Anschließend wurde das Eingabefeld ein Stück nach unten verschoben um es besser auszurichten

"Eigenes Javascript" zeigt anschließend folgenden erzeugten jQuery-Code:

$("body > center > div#main > div#mainbox > div#maincontent > h3").insertAfter($("body > center > div#main > div#mainbox > div#maincontent > h3").parent().children().eq(3));
$("body > center > div#main > div#mainbox > div#maincontent > h3").html("Geben Sie hier Ihren Suchbegriff ein!");
$("body > center > div#main > div#mainbox > div#maincontent > div#form > form#frmSearch").css({"left":"-2px","top":"21px","position":"relative"});

Auf diesen Javascript-Code können Sie nun aufbauen, etwa um

  • Die Selektoren zu optimieren und robuster zu machen
  • Den eingegebenen Text zu verändern
  • Überflüssige Zeilen zu entfernen, die durch mehrfaches Bearbeiten desselben Elementes entstanden sind
  • Zusätzliche Zeilen jQuery hinzuzufügen
  • etc. 

Eigenes CSS

Im Dialog zum Menüpunkt "Eigenes CSS" können Sie Stylesheet-Code zur Variante hinzufügen, etwa wie im folgenden Screenshot demonstriert:

Sie können CSS genau so definieren wie innerhalb einer CSS-Datei oder eines <style>-Tags.

Dieser Dialog ist allerdings nicht die einzige Möglichkeit, CSS zu bearbeiten. Der Visuelle Editor bietet den Menüpunkt "CSS Bearbeiten" (siehe Anlegen eines Visuellen A/B-Tests / CSSbearbeiten). Die Aktionen in diesem Dialog werden in jQuery-Zeilen umgewandelt, die im Menüpunkt "Eigenes Javascript" zu finden sind. Die beiden Wege unterscheiden sich technisch im Verfahren, wie die CSS-Änderungen in die Seite injiziert werden:

  • Das CSS, das über den Menüpunkt "CSS bearbeiten" geändert wird, wird durch jQuery als sog. Inline-Styles auf die Elemente angewendet.  
  • Das CSS, das über den Menüpunkt "Eigenes CSS" erzeugt wird, wird als ein eigenes <style>-Tag in die Seite eingebaut. 

Letzteres hat den Vorteil, dass es schneller auf die Elemente der Seite angewendet wird, weil nicht erst alles Javascript der Seite ausgeführt werden muss um die Änderung wirksam werden zu lassen. Die verringert das Auftreten des Flackereffektes (siehe Der "Flacker-Effekt" und wie man ihn verhindert).

Entwickeln komplexer Varianten

Zum Entwickeln komplexer Seitenvarianten sind die oben beschriebenen Dialoge des Editors nur bedingt geeignet, und zwar aus folgendem Grund:

  • Nach jeder Änderung muss der Dialog mit Speichern geschlossen werden um die Auswirkung begutachten zu können
  • Manche jQuery-Funktionen (etwa das Hinzufügen oder Entfernen von Elementen) lassen sich nur rückgängig machen, indem die Seite neu geladen wird. 

In einer Entwicklungsumgebung oder einem Texteditor ist das etwas komfortabler möglich. Wir empfehlen deshalb folgendes Vorgehen um größere oder komplexere Änderungen zu machen.

1. Legen Sie eine Testseite an

Sie benötigen zunächst eine leicht änderbare Version der Seite für die Sie eine Variante erstellen möchten. Wenn Sie eine lokale Entwicklungsumgebung haben in der Sie den Quelltext der Seite anpassen können ist das ideal, aber dies ist oft nicht der Fall, gehen Sie dann alternativ folgendermaßen vor:

  • Öffnen Sie die Seite die Sie bearbeiten wollen im Browser
  • Öffnen Sie den HTML-Quelltext der Seite. Kopieren Sie ihn und speichern Sie ihn als lokale HTML-Datei.
  • Suchen Sie im Quelltext das Tag <base href=...>
  • Wenn ein solches Tag noch nicht vorhanden ist dann legen Sie es als erstes nach dem öffnenden <head>-Tag.
  • Geben Sie als Wert des href-Attributes den Domain-Namen Ihrer Website ein.Öffnen Sie die Seite nun erneut im Browser und vergewissen Sie sich, dass alle referenzierten Dateien (Javascript, CSS, Bilder) geladen werden. Wenn nein, dann prüfen Sei ob das href-Attribut korrekt gesetzt ist.

2. Binden Sie jQuery ein

Stellen Sie sicher, dass Ihre Seite jQuery lädt. Wenn der Tracking-Code von BlackTri eingebaut ist, so lädt dieser jQuery. Möglicherweise verwendet Ihre Website ohnehin jQuery und Sie laden es. Wenn beides nicht zutrifft, dann laden Sie es bitte im <head>-Bereich folgendermaßen:

<script type='text/javascript' src='http://www.blacktri.com/js/jquery-1.8.3.min.js'></script>

3. Fügen Sie Platzhalter für jQuery und CSS ein

Fügen Sie am Ende des <head>-Bereiches, unmittelbar vor dem schließenden </head>-Tag, folgenden Code hinzu:

<script language="javascript">
$(document).ready(function(){
    /* jquery goes here */
});
</script>
<style>
    /* css goes here */
</style>

4. Erstellen Sie den Code

Fügen Sie nun in den Platzhaltern des Codes jQuery und CSS so hinzu wie Ihre Variante es benötigt.

5. Legen Sie das Projekt an

Nach Fertigstellung des Codes legen Sie ein Projekt mit einer Variante an und fügen Sie den jQuery-Anteil über den Menüpunkt "Eigenes Javascript" und den CSS-Anteil über "Eigenes CSS" hinzu. BItte beachten Sie:

  • Fügen Sie das jQuery ein ohne das umhüllenden <script>-Tag und ohne $(document).ready(function(){...});
  • Fügen Sie das CSS ein ohne das <style>-Tag


 

 

  • No labels