Zum Hauptinhalt springen
Sehen Sie sich dieses Video an, um weitere Informationen zur Verwendung des Code Editors zu erhalten. In diesem Artikel:
  • Ein Überblick über die Benutzeroberfläche und die Hauptfunktionen des Code Editors.
  • Schritt-für-Schritt-Anleitungen zum Erstellen von Variationen mit dem Code Editor, einschließlich der Arbeit mit HTML-, CSS- und JavaScript-Code.
  • Tipps zur Optimierung Ihrer Variationen für maximalen Effekt.
  • Bewährte Praktiken zum Testen und Validieren Ihrer Variationen vor dem Start Ihres Experiments.

​
Vorteile für den Benutzer

Mit dem Kameleoon Code Editor können Sie codebasierte Experimente erstellen, starten und verwalten, ohne den Graphic Editor zu verwenden. Speisen Sie JavaScript- oder CSS-Code direkt in Ihre Variationen ein und sparen Sie Zeit.

​
Auf den Code Editor zugreifen

​
Vom Experiments-Dashboard

Klicken Sie in Ihrem Experiments-Dashboard auf New experiment > With the code editor.
Anschließend können Sie Ihrem Test einen Namen geben und ihn mit einer Website und einer Seiten-URL verknüpfen.

​
Struktur des Code Editors

Unser Code Editor hat die folgende Struktur:
  • Header: Zeigt den Namen und den Status des Experiments an. Enthält auch die Schaltflächen Simulate und Launch.
  • Variationspanel: Listet Variationen auf und ermöglicht es Ihnen, neue hinzuzufügen. Jede Variation ist zur Bearbeitung auswählbar.
  • Codebereich: Sie können JavaScript (JS)- oder CSS-Code bearbeiten, der für die ausgewählte Variation spezifisch ist. Enthält Tabs zum Umschalten zwischen JS und CSS.
  • Linke Seitenleiste: Enthält Kriterien, die Sie vor dem Start Ihres Experiments definieren müssen, und allgemeine Einstellungen.

​
Experimentinformationen

Der Header zeigt die wichtigsten Informationen an, die mit dem Experiment verbunden sind:
  • den Namen
  • den Status
  • die letzte Interaktion (z. B. letzte Speicherung, Aktualisierung, Startdatum).
Bewegen Sie den Mauszeiger über das Symbol ?, um zusätzliche Informationen zum Experiment abzurufen. Sie können den Status Ihres Experiments überprüfen und sicherstellen, dass Ihre Änderungen gespeichert wurden. Zwei Arten der Speicherung sind verfügbar:
  • Automatisch, wenn der Status des Experiments draft, scheduled oder paused ist.
  • Manuell, für online und diverted Experimente (über die grüne Schaltfläche im Tab Finalize).

​
Header-Aktionen

​
Simulate

Wir empfehlen dringend, Ihr Developer A/B-Experiment zu simulieren, um zu bestätigen, dass Ihr Experiment korrekt angezeigt wird und funktioniert. Um Ihr Experiment zu simulieren, klicken Sie auf Simulate, um den Simulationsmodus in einem neuen Tab zu öffnen.

​
Schedule

So planen Sie Ihr Experiment:
  1. Klicken Sie auf das Drei-Punkte-Menü rechts neben Simulate > Schedule.
  2. Geben Sie ein Startdatum, ein Enddatum oder beides an.
  3. Konfigurieren Sie bei Bedarf die Optionen Advanced schedule.
  4. Klicken Sie auf Schedule, um die Erstellung Ihres Zeitplans zu bestätigen.
Klicken Sie auf +Add a schedule, um Ihrem Experiment mehrere Zeitpläne hinzuzufügen.

​
Die Dauer schätzen

Um die Zeit zu schätzen, die Ihr Experiment benötigt, um verwertbare Ergebnisse zu erzielen:
  1. Klicken Sie auf das Drei-Punkte-Menü rechts neben Simulate > Estimate the duration.
  2. Geben Sie die erforderlichen Informationen an.
  3. Klicken Sie auf Calculate.

​
Variations-Panel

​
Ihren Code einfügen

Sie können Code in den JS- und/oder CSS-Feldern hinzufügen, ändern oder entfernen (wählen Sie den entsprechenden Tab: JS oder CSS) für alle Variationen. Oben rechts im Code-Fenster befindet sich eine Erweiterungsoption. Klicken Sie auf diese Schaltfläche, um den Codebereich zu erweitern. Sie können das Code-Fenster auch mit dedizierten Schaltflächen vertikal oder horizontal in zwei Teile aufteilen. Klicken Sie erneut auf die Schaltfläche, um die Standardansicht wiederherzustellen. Klicken Sie auf Add variation, um eine neue Variation hinzuzufügen. Klicken Sie auf den Chevron, um eine code variation oder eine URL redirection hinzuzufügen. Unser Code-Editor bietet Ihnen mehrere Funktionen:
  • JavaScript-Auto-Vervollständigung: Wenn Sie mit der Eingabe beginnen, zeigt der Editor eine Dropdown-Liste mit vorgeschlagenen Auto-Vervollständigungsoptionen an, sodass Sie Ihre gewünschte Methode, Ihren Parameter oder Ihre Variable auswählen können. Hover-Informationen und Methodensignaturinformationen werden ebenfalls angezeigt, sodass Sie Ihren Code mit weniger Fehlern vervollständigen können.
  • Syntaxfehler-Erkennung: Code-Syntaxfehler werden unterstrichen, und ein Hover-Fenster zeigt Ihnen weitere Informationen zum Fehler.
  • CSS-Farbauswahl: Im CSS-Editor lässt Sie ein Pop-up-Farbwähler Ihre RGBA-Werte automatisch ausfüllen.
Kameleoon stellt eine API und mehrere empfohlene Funktionen zum Schreiben Ihres JavaScript-Codes bereit. Beachten Sie, dass Kameleoon kein jQuery enthält; stattdessen verwendet es die bereits auf Ihrer Website vorhandene Version. Da Kameleoon möglicherweise vor jQuery geladen wird, müssen Sie sicherstellen, dass jQuery vollständig geladen ist, bevor Sie den JavaScript-Code Ihrer Variation ausführen. Um zu überprüfen, ob jQuery geladen wurde, verwenden Sie folgenden Code: 
Kameleoon.API.Core.runWhenConditionTrue(function(){
 return typeof jQuery != "undefined"; 
 //allows to check that jQuery is loaded. Returns True if it is, or False otherwise. Kameleoon will execute this condition again every 200ms.
 
}, function(){
 //Enter here the code you want to execute in your variation. For example if you want to change the text of a block and this block has the id "block-2345", you can use the following Kameleoon API function
 
 Kameleoon.API.Core.runWhenElementPresent("#bloc-2345", function(){
 
 //Enter here your JavaScript code
 jQuery("#bloc-2345").text("My new text");
 
 });
 
}, 200);
JavaScript-Code wird nicht direkt im Editor ausgeführt. Um Ihre Änderung in der Vorschau zu sehen, simulieren Sie Ihr Experiment.
Wenn Sie weitere Informationen zu Kameleoon.API.Core wünschen, können Sie unsere Dokumentation für Entwickler lesen:

​
Variations-Menü

Klicken Sie auf das Drei-Punkte-Menü, um das Variations-Menü anzuzeigen. Sie können:
  • Eine Variation umbenennen
  • Eine Variation in der Vorschau anzeigen
  • Eine Anzeigebegrenzung hinzufügen
  • Eine Variation löschen
Änderungen in diesem Menü gelten nur für die ausgewählte Variation.

​
Variation umbenennen

Klicken Sie auf Rename variation, um den Namen einer Variation zu bearbeiten. Geben Sie ihren neuen Namen ein und klicken Sie auf das Symbol X oder drücken Sie Enter, um zu bestätigen.

​
Vorschau

Klicken Sie auf Preview variation, um Ihre Variation in einem neuen Tab zu öffnen und ihre Darstellung zu überprüfen.

​
Eine Anzeigebegrenzung hinzufügen

Klicken Sie auf Add a display limit, um zu steuern, wie oft eine Variation angezeigt wird. Aktivieren Sie alle gewünschten Limits. Bewegen Sie den Mauszeiger über das Symbol ?, um einen Tooltip mit weiteren Informationen zu einem Limit anzuzeigen. Klicken Sie auf Save, um Ihre Auswahl zu bestätigen.

​
Löschen

Klicken Sie auf Delete variation > Yes, um eine Variation zu löschen. Sie können die letzte Variation nicht löschen: Sie müssen mindestens eine Variation in Ihrem Experiment haben.

​
Duplizieren

Klicken Sie auf das Duplikat-Symbol rechts neben dem Drei-Punkte-Menü, um eine Kopie der Variation zu erstellen.

​
Linke Seitenleiste

In der linken Seitenleiste finden Sie die Kriterien, die Sie vor dem Start Ihres Experiments definieren müssen. Sie können Ihr Experiment nicht starten, ohne diese Schritte abzuschließen.

​
Finalisierungsschritte

Die Schritte sind dieselben wie im Graphic Editor:
  • Targeting
  • Traffic allocation
  • Goals
  • Integrations
Klicken Sie auf jeden dieser Abschnitte und definieren Sie die erforderlichen Kriterien. Ein grünes Häkchen erscheint neben den Abschnitten, sobald Sie sie abgeschlossen haben, und die Schaltfläche Launch wird blau. Mehr über diese Finalisierungsschritte erfahren

​
Allgemeine Einstellungen

Hier finden Sie die allgemeinen Einstellungen Ihres Experiments. Dieses Menü besteht aus den folgenden Abschnitten:
  • Main information
  • Experiment code
  • Experiment custom script
  • Advanced settings

​
Main information

Hier können Sie die Hauptinformationen Ihres Experiments verwalten. Sie können die URL angeben, die der Editor lädt, die Tags Ihres Experiments und seine Hypothese.

​
Experiment code

Hier finden Sie den allgemeinen Code Ihres Experiments. Kameleoon wendet diesen Code auf jede Ihrer Experimentvariationen an. Klicken Sie auf den Schalter, um diesen Code zur ursprünglichen Variation hinzuzufügen.

​
Experiment custom script

Mit dem in diesem Abschnitt hinzugefügten JavaScript-Code können Sie globalen Code schreiben, der speziell für das Experiment gilt. Dieser Code läuft parallel zum globalen Skript von Kameleoon und stellt sicher, dass alle Änderungen am Ende des Experiments automatisch entfernt werden. Außerdem wird dieses Skript vor dem Experiment- und Variations-Code ausgeführt und es läuft unabhängig von den von Ihnen festgelegten Targeting-Bedingungen, was bedeutet, dass es immer ausgeführt wird, sobald Kameleoon geladen wird.

​
Advanced settings

Hier können Sie auf die erweiterten Einstellungen Ihres Experiments zugreifen.
Benutzerdefiniertes Attributionsfenster
Verwenden Sie diesen Abschnitt, um ein Attributionsfenster in Tagen und Stunden zu definieren. Das Attributionsfenster ist der Zeitraum, in dem die Conversions und Einnahmen eines Besuchers mit einer bestimmten Variation verknüpft sind. Standardmäßig wird das Attributionsfenster auf Website-Ebene festgelegt, aber Sie können es unten anpassen, bevor Sie Ihr Experiment starten. Erfahren Sie hier mehr über benutzerdefinierte Attributionsfenster.
Display limits
Lesen Sie den obigen Abschnitt zu den Anzeigebegrenzungen. Sie können Anzeigebegrenzungen in den Advanced settings oder im Menü Variation einrichten. Der Abschnitt Advanced settings bietet einen Überblick über alle Limits, die Sie konfiguriert haben, unabhängig davon, wo sie festgelegt wurden.
JavaScript-Code-Optionen
Aktivieren Sie diese Option, um den JavaScript-Code des Experiments nach dem Laden der Seite zu laden. Diese Option stellt sicher, dass alle Seitenelemente vollständig geladen sind, bevor JavaScript-Code ausgeführt wird, wodurch Konflikte vermieden und die Leistung verbessert wird. Sie vermeidet Probleme mit dynamischen Inhalten oder zu früh laufenden Skripten, was hilfreich sein kann, wenn Ihre Variationen von Elementen abhängen, die nach dem ersten Seiten-Rendering geladen werden.