Der visuelle No-Code-Editor und die benutzerdefinierten Code-Editoren von Convert: Was ist der Unterschied und wann sollten Sie beide verwenden?

Wenn es um visuelle Editoren geht, lieben manche Leute sie, während andere sie lieber ganz vermeiden. Es stimmt, dass Sie heutzutage kein Programmierer, Coder oder Entwickler mehr sein müssen, um eine Website zu erstellen. Viele Marketing- und Produktteams, die sich in der Vergangenheit auf Entwicklungs- oder IT-Unterstützung verlassen haben, haben sich jetzt der No-Code-Bewegung mit ihrer Zugänglichkeit und geschäftsverändernden Innovationen verschrieben.

Der Visual Editor von Convert bietet No-Code-Tools, mit denen Benutzer mit einer grafischen Benutzeroberfläche Änderungen an ihren Websites im Handumdrehen entwerfen können. Dies spart nicht nur Geld, sondern bedeutet auch, dass Geschäftsinhaber schneller als zuvor loslegen und Conversion-Ziele erreichen können.

Diese Innovation im Webdesign hat jedoch immer noch ihre Grenzen, und benutzerdefinierte Codierung kann besser geeignet sein, um beispielsweise CSS-Selektoren zu verwenden, um mehrere ähnliche Elemente gleichzeitig zu ändern, eine externe JavaScript-Datei als Teil einer Variation zu laden und einzigartige benutzerdefinierte Ereignisse zu verfolgen .

Aus diesem Grund bietet Convert auch einen benutzerdefinierten Code-Editor, mit dem Benutzer fortgeschrittenere Änderungen an ihren Seiten vornehmen können, indem sie ihren Code in JavaScript oder CSS schreiben oder importieren.

Convert zielt vor allem darauf ab, Flexibilität zu bieten und Benutzern aller Fähigkeiten und Vorlieben entgegenzukommen. Egal, ob Sie Ihren eigenen Code schreiben oder einen vereinfachten Testansatz bevorzugen, Convert hat die Lösung für Sie!

Kurzer Rundgang durch den Convert Visual Editor

Mit dem visuellen Editor von Convert können Sie Webseiteninhalte erstellen, bearbeiten und formatieren, um Ihre Geschäftshypothesen zu testen.

Es enthält eine Reihe von Designwerkzeugen, mit denen sowohl grundlegende als auch erweiterte Änderungen an den Elementen in einer Variation vorgenommen werden können.

Das Tool von Convert enthält einen HTML-Editor (um neuen Text, Bilder, Audiodateien oder Videodateien hinzuzufügen) und ermöglicht es Benutzern, Elemente mit einer einfachen Drag-and-Drop-Funktion neu anzuordnen sowie Schriftart, Farbe und Größe zu ändern und zu formatieren Text auf ihrer Seite.

Mit dem visuellen Editor können Sie auch starke benutzerdefinierte Codeoptionen verwenden, um Ihr eigenes HTML und JavaScript hinzuzufügen, sodass Sie das Besuchererlebnis vollständig anpassen können.

Convert schreibt den HTML- und CSS-Code für Ihren Variationsinhalt, während Sie Änderungen daran vornehmen.

Machen wir einen kurzen Rundgang durch den Convert Visual Editor, den Sie in Ihrer Erfahrungszusammenfassung im Abschnitt „Variationen“ finden:

Sobald Sie darauf klicken, sehen Sie den visuellen Editor.

Hier sind einige hilfreiche Einsteigertipps:

1. Der Testtitel ist der Name Ihres Experiments. Wählen Sie einen einprägsamen, aussagekräftigen Namen für Ihr Experiment.
2. Die Speicheroptionen enthalten grundlegende Werkzeuge zum Speichern, Rückgängigmachen und Wiederherstellen von Änderungen.
3. Während der Arbeit können Sie zwischen dem Bearbeitungs- und dem Durchsuchen-Modus umschalten.
4. Das Menü „Optionen“ enthält allgemeine Einstellungen für Ihr Experiment, z. B. „Editorseite ändern“, „Elementauswahleinstellungen“ und „Global Experience JS/CSS-Code“.
5. Die Fenstergröße ermöglicht es Ihnen, Webseiten für verschiedene Tablet-/Mobilauflösungen anzuzeigen.
6. Das Variationsmenü enthält allgemeine Einstellungen für Ihre Variationen, wie z. B. die Live-Vorschau.
7. Im Feld <code> können Sie Variationen mit JS, CSS oder Variationscode erstellen.

In den folgenden Abschnitten führen wir Sie durch die Verwendung einiger Schlüsselfunktionen des visuellen Editors und einige Probleme, die bei der Verwendung auftreten können.

Wann sollten Sie den visuellen Editor von Convert verwenden?

Verwenden Sie den WYSIWYG-Editor für einfache Kopieränderungen

Viele Erfahrungen testen nur eine einzelne Seite, daher sind fortgeschrittene Bearbeitungstaktiken nicht erforderlich. In diesen Fällen können Sie den WYSIWYG-Editor (What You See Is What You Get) von Convert verwenden, der die einfachste Möglichkeit zum Erstellen eines A/B-Tests darstellt.

Sie können beispielsweise die Größe Ihrer Überschrift ändern, den Text Ihres CTA ändern oder Elemente über die Seite verschieben, und der Editor erstellt den JavaScript-Code, um diese Änderungen umzusetzen.

Jedes Mal, wenn Sie eine Änderung im WYSIWYG-Editor von Convert vornehmen, wird der zugehörige Code angezeigt und im Bereich „Code-Editor“ zur Bearbeitung bereitgestellt (unter Ausnutzung unserer Smart Insert Convert-Technologie (convert._$)).

Sie können den Code jederzeit ändern, um auftretende Probleme zu beheben.

Wenn Sie einfaches JavaScript einfügen möchten, ohne die Smart Insert Convert-Technologie zu verwenden, können Sie es in den Abschnitt Benutzerdefiniertes JavaScript einfügen, den wir später erklären werden.

Schlagzeilen (oder beliebigen Text) ändern

Bei vielen A/B-Erfahrungen müssen Sie geringfügige Anpassungen oder Ergänzungen an den vorhandenen Inhalten Ihrer Website vornehmen, um Benutzer zu bestimmten Aktionen zu bewegen.

Einige Beispiele hierfür sind das Hinzufügen einer fesselnden Überschrift zu Ihrer Homepage, die Ihr Produkt oder Ihre Dienstleistung kurz erklärt, oder das Umwandeln längerer Textblöcke in Aufzählungszeichen, um sie an die Einschränkungen Ihrer Seite anzupassen.

Mit dem visuellen Editor von Convert können Sie in wenigen Minuten neue Textteile hinzufügen und bei Bedarf aktualisieren. Sie können dann die Ergebnisse Ihrer Variationsseiten mit der Originalseite vergleichen, um festzustellen, welche für Ihr Publikum am effektivsten ist. Wenn Sie im Editor Inline-Textanpassungen vornehmen, verwenden Sie die Option „Text bearbeiten“.

Eine Textänderung ist weniger invasiv und riskant als eine HTML-Änderung und hat keine Auswirkungen auf die Dokumentstruktur (einschließlich CSS-Selektoren und anderer Komponenten) oder Ereignishandler, die möglicherweise in den Zielelementen registriert sind.

Das Durchführen geringfügiger Änderungen am Design, Layout und der Inhaltsstruktur einer Variation kann eine einfache Möglichkeit sein, die Leistung einer Webseite zu verbessern.

Beispielsweise reagiert Ihr Publikum möglicherweise anders, wenn Sie die Überschrift fett formatieren, um die Botschaft Ihrer Marke hervorzuheben, oder die Hintergrundgröße eines Bilds ändern, damit es in einen Unterabschnitt passt.

Mit dem Convert Visual Editor können Sie schnell Formatierungs- und Stilanpassungen vornehmen, die Ihrer Website einen visuellen Reiz verleihen und die Aufmerksamkeit Ihrer Website-Besucher auf sich ziehen, ohne dass Sie Ihren CSS-Code aktualisieren müssen.

Mit dem eingebetteten CSS-Editor können Sie den Stil eines Elements ändern. Das Anwenden von CSS-Tags auf ein Element auf Ihrer Seite kann Folgendes ändern:

• Hintergrund- oder Textfarbe
• Rahmenstärke, -farbe oder -stil
• Schriftart, Stil, Größe und Farbe
• Groß- und Kleinschreibung, Ausrichtung und Zeilenhöhe des Textes

Die Verwendung des visuellen Editors zum Ändern von CSS-Attributen ist für Nicht-Programmierer einfach, aber denken Sie daran, Folgendes zu berücksichtigen:

• Die von Ihnen vorgenommenen Stiländerungen werden genau auf das ausgewählte Element angewendet.
• Es kann schwierig sein, eine von Ihnen vorgenommene Änderung rückgängig zu machen, da Sie die Änderungen erneut ausführen müssen.
• Sie können im Visual Editor nur eine begrenzte Anzahl von CSS-Eigenschaften verwenden.

HTML-Inhalt einfügen/bearbeiten

Die Optionen „Text bearbeiten“ und „WYSIWYG-Editor“ im visuellen Editor von Convert sind die einfachsten Bearbeitungsansätze für einen unerfahrenen Benutzer.

Mit dem Convert Visual Editor können Sie Ihren Varianten auch völlig neue Elemente hinzufügen und erweiterte Änderungen für A/B-Tests vornehmen.

Dazu gehört auch die sofortige Änderung des HTML-Codes des Elements. Beispielsweise könnten Sie Ihrer Zielseite eine neue CTA-Schaltfläche hinzufügen, um Ihren Kunden die Navigation auf der Website zu erleichtern, oder Sie könnten Ihrem Anmeldeformular ein benutzerdefiniertes Feld hinzufügen, um die spezifischen Anforderungen der Kunden Ihres Unternehmens zu erfassen.

Die Funktion „HTML bearbeiten“ ist dagegen komplexer und ermöglicht Ihnen, Änderungen am HTML-Code Ihrer Seite vorzunehmen, und bietet mehr Flexibilität und Kontrolle darüber, wie der Code geändert wird.

Wenn Sie die Option „HTML bearbeiten“ für ein Webseitenelement auswählen, das Sie ändern möchten, zeigt der Editor den Inhalt des Elements als Roh-HTML an.

Nachdem Sie Ihre Änderungen vorgenommen haben, speichert Convert den endgültigen neuen HTML-Inhalt dieses Elements und ersetzt den ursprünglichen HTML-Inhalt des Elements.

Die Option HTML bearbeiten kann wie folgt verwendet werden:

• Klicken Sie im Visual Editor auf das Element, das Sie ändern möchten, und wählen Sie dann HTML bearbeiten aus dem Menü aus.
  

  

• Sobald das Dialogfeld „HTML bearbeiten“ geöffnet wird, fügen Sie das Code-Snippet für die Änderung hinzu (nur für statische Inhalte).
  

  

• Klicken Sie auf Änderungen speichern.

Tipp 1: Wir empfehlen nicht, dynamische Inhalte zu ändern, die von Ihrem Website-CMS erstellt wurden, wie z. B. Produktpreise, Produktdetails und andere derartige Aspekte. Wenn Sie dynamischen Inhaltscode überschreiben, wird er statisch und dasselbe Material kann auf allen Seiten angezeigt werden, die diese Vorlage verwenden. Verwenden Sie stattdessen die benutzerdefinierten JS/CSS-Optionen für dynamische Inhalte, da hierfür benutzerdefinierter JavaScript-Code entwickelt werden muss.

Tipp 2: Verwenden Sie die Option „HTML bearbeiten“ für bestimmte Elemente einer Webseite, die geringfügig geändert werden müssen, oder wenn Sie ein einzelnes Element ändern möchten. Eine ganzseitige modifizierte HTML-Aktion wird nicht empfohlen.

Tipp 3: Vermeiden Sie die Verwendung mehrerer HTML-Bearbeitungsvorgänge für dieselbe Sammlung von Elementen. Alle wesentlichen Änderungen können mit einer einzigen HTML-Aktion vorgenommen werden.

Starten Sie ein Featured Image A/B-Erlebnis

A/B-Tests sind eine großartige Möglichkeit, um festzustellen, welches Bild auf Ihrer Website am besten abschneidet.

Sie können den Convert Visual Editor verwenden, um eine „A“- und „B“-Variante eines vorgestellten Bildes zu erstellen und sie miteinander zu vergleichen. Das Variantenbild kann dann verwendet werden, um die Konversionsraten zu steigern.

Sie können auch die Option „Bild“ verwenden, die angezeigt wird, wenn Sie im Visual Editor auf Bild klicken, um Bilder zu Ihrer Website zu ändern oder hinzuzufügen.

Gehen Sie folgendermaßen vor, um ein Bild auf Ihrer Website zu ändern:

1. Wählen Sie die Option „Bild“.
2. Als nächstes erscheint ein Menü, in dem Sie ein neues Bild einfügen können.
3. Daraufhin öffnet sich das Dialogfenster Bild.
   

   

4. Sie können entweder ein Bild von Ihrem lokalen Gerät hochladen oder einfach die URL, von der es bezogen wurde, im Bilddialog eingeben.
   

   

Ein weiterer wichtiger Hinweis ist, dass Sie verschiedene Größen desselben Bildes (1x, 2x usw.) hochladen müssen, damit es auf verschiedenen Bildschirmgrößen (z. B. PCs, großen HD-Displays und mobilen Bildschirmen) korrekt angezeigt wird.

Hinweis: Die maximale Dateigröße, die Sie in Ihre Bildbibliothek hochladen können, beträgt 2 MB pro Bilddatei.

Elemente löschen oder deren Inhalt ausblenden

Mit dem visuellen Editor von Convert können Sie auch bestimmte Objekte oder Elemente auf Ihrer Zielseite ausblenden, um Ablenkungen zu minimieren.

Um ein Element aus einer Variation zu entfernen, verwenden Sie die Option „Element ausblenden“.

Nach der Auswahl wird die Anzeigeeigenschaft des Elements auf „Keine“ gesetzt.

Verfolgen Sie Klicks als Ziel

Wenn Sie im Visual Editor Änderungen an Ihrer Webseite vornehmen, kann es hilfreich sein, Klicks auf bestimmte Elemente zu verfolgen und sie als Ziele zu Ihrer Erfahrung hinzuzufügen.

Mit Convert können Sie Schaltflächenklicks auf Ihrer Website verfolgen und Besuchermetriken sammeln, während Sie Variationen testen.

Obwohl Convert einen separaten Abschnitt hat, in dem Sie Conversion-Ziele zu einem Erlebnis hinzufügen können, können Sie dies auch im Editorfenster tun, wenn Sie mehrere Website-Versionen entwerfen.

1. Wählen Sie das Element auf der Seite aus, das Sie verfolgen möchten.
2. Wählen Sie im Menü Klicks verfolgen als Zieloption aus.
   

   

3. Ein Popup erscheint, um Ihr Ziel zu benennen und zu speichern:
   

   

Wählen Sie den rechten Elementauswahlpfad

Mit dem visuellen Editor von Convert können Sie Elemente auf der Seite auswählen, die übergeordnete Elemente sind und das Element enthalten, das Sie derzeit im Editor ausgewählt haben.

Diese Funktion ist nützlich, wenn Sie Probleme haben, ein Element im Editor auszuwählen, oder wenn eine CSS-Änderung nicht wie erwartet funktioniert.

Klicken Sie einfach auf ein Element innerhalb des Containers, den Sie verfolgen möchten, und wählen Sie dann „Container auswählen“. Sie sollten eine lange Liste von HTML-Elementen sehen, die das Element enthalten.

Oben in der Liste sehen Sie das nächstgrößere HTML-Element als das von Ihnen ausgewählte, und unten sehen Sie das größte HTML-Element vor dem <body> selbst.

Mit anderen Worten, die Liste reicht von den meisten bis zu den am wenigsten spezifischen.

Auf diese Weise können Sie auf einfache Weise ein breiteres Element auswählen, das sich nicht einfach mit der Maus auswählen lässt. Häufig werden Sie dies verwenden, um ein Element auszuwählen, das Sie neu anordnen möchten oder dessen CSS-Attribute Sie bearbeiten möchten.

Elemente verschieben und skalieren oder anordnen

Mit dem Convert Visual Editor können Sie einen Seitentitel, ein Bild oder ein beliebiges anderes Element von Ihrer Variationsseite verschieben, in der Größe ändern oder neu anordnen.

Das Verschieben von Elementen in den richtigen Bereich auf Ihrer Seite erhöht die Sichtbarkeit von Objekten für Ihre Benutzer und erhöht die Häufigkeit, mit der sie darauf klicken.

Außerdem können Sie Elemente sehen und auswählen, die sich hinter oder vor anderen Elementen befinden, was die Interaktion mit ihnen erleichtert.

Verschieben und Größe ändern passt Elemente mit einer pixelberechneten Verschiebung an. Dies ist für kleine Bewegungen in Ordnung, aber nicht hilfreich, um Elemente über große Entfernungen zu bewegen.

Sie könnten versucht sein, ein Element mit „Verschieben“ und „Größe ändern“ von einer Seite der Seite auf die andere zu ziehen, aber verschiedene Browser interpretieren die Pixellänge unterschiedlich.

Bewegungen über große Pixellängen (mehrere hundert Pixel oder mehr) können Probleme mit der browserübergreifenden Kompatibilität verursachen.

Die beste Lösung, wenn Sie ein Element über eine große Entfernung verschieben möchten, ist die Verwendung des Werkzeugs Neu anordnen, mit dem Sie Ihre Elemente so nah wie möglich an ihre endgültige Platzierung ziehen können.

Von dort aus können Sie Ihre Elemente mit Verschieben und Größe ändern an ihre endgültige Position verschieben.

Verwenden Sie den Bearbeitungs-/Browse-Modus

Der Browse-Modus von Convert wurde entwickelt, damit Sie mit Ihrer Website interagieren können, während sie im Editor geladen wird.

Beispielsweise können Sie den Browse-Modus verwenden, um ein Element in einem Dropdown-Menü oder in einer Ablage zu bearbeiten.

Wenn Sie im Editor auf ein Element klicken, wird normalerweise das Kontextmenü angezeigt, was bedeutet, dass Sie nicht wirklich mit dynamischen Elementen interagieren können.

Wenn Sie jedoch in den Browsermodus wechseln, können Sie mit Ihrer Seite so interagieren, wie Sie es normalerweise im Browser tun würden. Wählen Sie Browsermodus, sobald sich Ihre Seite in dem Zustand befindet, in dem Sie sie ändern möchten.

Denken Sie daran, dass beim Aktivieren des Blätternmodus in einer Variation Ihre Änderungen deaktiviert werden, da Sie die Originalseite durchsuchen.

Ihre Änderungen bleiben gespeichert, aber in diesem Fall ist es besser, mit der Live-Vorschauoption im Variationsmenü zu testen.

Zeigen Sie Ihre Änderungen auf verschiedenen Geräten mit der Option „Fenstergröße“ in der Vorschau an

Sie können den Convert Visual Editor verwenden, um den Inhalt Ihrer Seite so zu testen, wie er einem Tablet-/Mobilbenutzer angezeigt wird.

Gehen Sie dazu im oberen Bereich des visuellen Editors zu Fenstergröße.

In der Dropdown-Liste Fenstergröße können Sie die Auflösung auswählen, die Sie verwenden möchten, um den Bildschirm anzuzeigen.

Ab sofort bietet Window Size Auflösungsoptionen wie 1280px, 1024px, 768px, 640px.

Sobald Sie eine Auflösung ausgewählt haben, wird der Editor neu geladen und zeigt Ihre Website in der von Ihnen gewählten Auflösung an.

Zeigen Sie mit der User Agent Option eine Vorschau Ihrer Änderungen in verschiedenen Browsern an

Sie können das Dropdown-Menü User Agent im visuellen Editor von Convert verwenden, um den Inhalt Ihrer Seite zu testen, wie er auf verschiedenen Browsern und Geräten angezeigt würde.

Wählen Sie zunächst den Browsertyp aus, um zu überprüfen, wie sich die Webseite in verschiedenen Browsern wie Chrome, Safari, Firefox und Edge verhält. Als nächstes können Sie den Browser anhand von Geräten wie Desktop, Mac, iPad, Android und iPhone weiter filtern.

Probleme bei der Verwendung des Convert Visual Editor

Seite über Proxy geladen

Wenn Sie den Convert-Tracking-Code installiert haben, sehen Sie normalerweise dieselbe Browsersitzung auf einer anderen Registerkarte Ihres Browsers, wenn Sie den Visual Editor verwenden.

Es kam jedoch vor, dass bestimmte Funktionen der Website nicht verfügbar waren, obwohl der Tracking-Code korrekt installiert wurde.

Beispielsweise funktioniert möglicherweise ein Einkaufswagen nicht wie erwartet (wird als leer angezeigt) oder Sie können sich nicht bei einem gesicherten Bereich Ihrer Website anmelden.

Meistens treten diese Probleme aufgrund von Einschränkungen auf, die Ihre Website beim Laden in einem Iframe hat, der unter einer anderen Domain gehostet wird (durch die Verwendung bestimmter HTTP-Header).

Die folgende blaue Warnung kann auf dieses Problem hinweisen, selbst wenn der Conversion-Tracking-Code auf Ihrer Seite installiert ist:

„Wir haben Ihre Website über den Proxy von Convert Experiment geladen – Sie können die Seite weiterhin bearbeiten, aber einige Funktionen fehlen möglicherweise. Lesen Sie mehr über“.

Um dieses Problem zu lösen, können Sie zu Google Chrome wechseln und die Convert Experiences Debugger-Erweiterung installieren.

Klicken Sie nach der Installation auf die Erweiterung, fügen Sie die Domänen hinzu, die Sie mit der Erfahrung verwenden, und aktivieren Sie die Erweiterung:

Dies sollte alle problematischen Kopfzeilen entfernen und ermöglichen, dass Ihre Seite in den visuellen Editor geladen wird, sodass Sie Ihre Erfahrungen ohne Probleme erstellen können.

Gesperrte Inhalte laden

Wenn Sie versuchen, eine HTTP-Seite in Convert Visual Editor zu laden, werden Sie in Ihrem Browser eine Benachrichtigung bemerken, die besagt: „Der Inhalt, den Sie laden, ist unsicher oder unsicher“.

In diesem Abschnitt wird erläutert, wie Sie das Laden von Inhalten aus einer unsicheren Quelle oder unverschlüsselten Inhalten im Konvertieren-Editor zulassen.

Websites, die nach Benutzerinformationen (Namen, Passwörter usw.) fragen, verwenden sichere Verbindungen (HTTPS), um Daten zu übertragen und zu empfangen.

Wenn eine HTTPS-Seite unsichere (HTTP) Inhalte (JavaScript oder CSS) enthält, verhindert der Browser automatisch das Laden unsicherer Inhalte und ein Schild-Symbol erscheint in der Adressleiste.

Das Blockieren unsicherer Inhalte schützt Ihre vertraulichen Informationen vor Kompromittierung.

Standardmäßig lädt der Convert Visual Editor nur sichere Inhalte über HTTPS.

Wenn Sie versuchen, eine unsichere Seite (über HTTP) im Convert Editor zu laden, zeigt der Browser eine Warnung an und lädt Ihre Website im Kompatibilitätsmodus.

Diese Warnung wirkt sich in keiner Weise auf Ihre Live-Website aus und Sie können die Seite weiterhin bearbeiten, obwohl möglicherweise einige Funktionen fehlen.

Um zu vermeiden, dass Inhalte blockiert werden, laden Sie Ihre Seiten sicher über HTTPS.

Um HTTP-Seiten im Convert Editor zu laden, aktivieren Sie zunächst blockierte Inhalte in Ihrem Browser.

Geschützte Seiten laden

Wenn Sie eine geschützte Website mit einem einfachen Benutzernamen und Passwort haben (z. B. eine Staging- oder Entwicklungswebsite), sollten Sie den Convert Visual Editor problemlos verwenden können.

Gehen Sie im Visual Editor zu Options → HTTP Basic Authentication und geben Sie dann die für den Zugriff auf die Site erforderlichen Informationen ein.

Testen auf SPAs

Eine der Einschränkungen des visuellen Editors besteht darin, dass er nicht zum Einrichten von A/B-Tests für Single-Page-Apps verwendet werden kann. Wenn Sie eine Single-Page-App verwenden, empfehlen wir Ihnen, sich die benutzerdefinierten Editoren unten anzusehen.

Benutzerdefinierte Editoren konvertieren

Die meisten Funktionen des visuellen Editors von Convert sind über einen Drag-and-Drop-Ansatz zugänglich.

Wir verstehen jedoch, dass ein Unternehmen, wenn es reifer wird, möglicherweise versucht, fortgeschrittenere Erfahrungen auszuführen, die durch den visuellen Editor eingeschränkt werden könnten.

Wenn sich Ihr Unternehmen dafür entschieden hat, Erfahrungen und Bereitstellungen mit benutzerdefiniertem Code anstelle eines visuellen Editors einzurichten, hat Convert genau das richtige Tool für Sie.

Zusätzlich zu unserem visuellen Editor bieten wir benutzerdefinierte Code-Editoren für technisch fortgeschrittenere Benutzer. Mit den Code-Editoren von Convert können Benutzer schnell Anpassungen an ihren Seiten vornehmen, indem sie ihren Code in JavaScript oder CSS schreiben oder importieren.

Die Konvertierungsplattform ist flexibel und macht es einfach, von einem Editor zum anderen zu wechseln und die Änderungen, die in einem von ihnen vorgenommen wurden, jederzeit während des Erlebnisses anzuzeigen.

Der benutzerdefinierte Code-Editor von Convert wird häufig für Folgendes verwendet:

• Ausführen von benutzerdefiniertem Code für Besucher, die in eine bestimmte Variante eingeordnet werden (und nicht für alle Besucher).
• Verwendung von CSS-Selektoren, um mehrere ähnliche Elemente gleichzeitig zu ändern, anstatt einzelne Änderungen vorzunehmen.
• Laden einer externen JavaScript-Datei als Teil einer Variation.
• Ausführen von Erfahrungen auf Single-Page-Apps, die ausgeführt werden, ohne dass der Benutzer die Seite neu laden muss.
• Verfolgen einzigartiger benutzerdefinierter Ereignisse, wie z. B. Scroll-Tiefe und Maus-Hover.
• Hinzufügen von API-Aufrufen für benutzerdefinierte Metriken.

Konvertieren Sie den benutzerdefinierten JavaScript-Editor (Projekt-, Erfahrungs- und Variationsebenen)

Convert ermöglicht es Ihnen, JavaScript-Snippets als Teil Ihres Projekts, Ihrer Erfahrung oder sogar Ihrer Variation einzufügen. Obwohl benutzerdefinierter Projekt-, Erfahrungs- und Variationscode sehr ähnlich sind, besteht ein wesentlicher Unterschied im Umfang:

Projekt-JavaScript wird auf der gesamten Website ausgeführt, was bedeutet, dass es potenziell alle Erfahrungen beeinflussen kann. Erfahrungs-JavaScript wird auf der Erfahrungsebene verwendet, während Variations-JavaScript auf der Variationsebene verwendet wird.

Die benutzerdefinierten JavaScript-Editoren von Convert verwenden Project JavaScript als ersten Ausführungspunkt, bevor Experience JavaScript und dann Variation JavaScript.

Wenn Sie Project JavaScript zuerst verwenden, müssen Sie den Code Ihrer nativen Website nicht ändern, um fortgeschrittenere Experimente durchzuführen.

Während Sie normalerweise jede der drei Optionen für jeden der oben aufgeführten Anwendungsfälle verwenden können, sollte Ihre Wahl davon bestimmt werden, ob Sie auf der Variationsebene, der Erfahrungsebene oder der Projektebene arbeiten.

Projekt-JavaScript-Editor

Der JavaScript-Editor für globale Projekte befindet sich im Bereich Konfiguration → JavaScript für globale Projekte. Der Code in diesem Abschnitt wird überall dort eingefügt, wo der Conversion-Tracking-Code platziert wird.

Dieser Code wird vor allen anderen Codes aufgerufen und wird häufig verwendet, um Analyse-Snippets oder beliebigen Code einzufügen, den Sie in den Erfahrungen in Ihrem Projekt auslösen möchten.

Erleben Sie den JavaScript-Editor

Convert ermöglicht es Ihnen, ein JavaScript-Snippet in eine Seite einzufügen, wenn ein Erlebnis ausgelöst wird. Dieses Snippet wird wie jede andere Bibliothek, die Sie in Ihre Webseite einfügen würden, eingefügt.

Dies gilt nur für Erlebnistypen, die den visuellen Editor enthalten, was bedeutet, dass Sie dies nicht mit einem geteilten URL-Experiment tun können.

Häufige Anwendungsfälle für JavaScript-Code auf Erfahrungsebene in Convert sind:

• Senden von Convert-Informationen an Ihren Analysedienst.
• Hinzufügen von API-Aufrufen für benutzerdefinierte Ereignisse.
• Hinzufügen von Funktionen, die über mehrere Variationen hinweg verwendet werden können, und deren Aufruf mit unterschiedlichen Parametern im Variationscode.

Den Experience JavaScript Editor finden Sie im Visual Editor → Zahnrad-/Zahnradsymbol → Global Experience JS Abschnitt.

Der Code wird zu der Seite hinzugefügt, die Sie testen oder personalisieren, ähnlich wie er dem Head-Abschnitt innerhalb eines script-Tags hinzugefügt würde.

Sie können auch JS-Ereignisse wie Klick- oder Hover-Ereignisse hinzufügen, die Ihr Code auslösen soll.

Variations-JavaScript-Editor

Dieser Editor wird verwendet, um jedes beliebige Standard-JavaScript einzufügen, das Sie in die jedem Besucher zugewiesene Variation aufnehmen möchten.

Dieser Editor befindet sich im Visual Editor → Variation n (Variation Menus) → Custom JavaScript.

Erweitertes A/B-Testbeispiel mit benutzerdefiniertem JavaScript

Das Ändern des Platzes eines ganzen Abschnitts in eine Zielseite kann nicht mit dem visuellen Editor durchgeführt werden, sondern erfordert eher einen erweiterten Test.

Die Erhöhung der Position des Bewertungsteils Ihrer Website ist nur ein Beispiel.

Die einzige praktische Möglichkeit, dies zu tun, ist die Verwendung von benutzerdefiniertem JavaScript-Code, der Folgendes erfordert:

1. Öffnen Sie einen neuen Browser-Tab, in dem Sie nicht bei Convert angemeldet sind.
2. Navigieren Sie zur Webseite des Tests.
3. Wählen Sie im Dropdown-Menü „Rechtsklick“ aus.
4. Wählen Sie „Inspizieren“ aus dem Dropdown-Menü. Dies ist das Google Chrome DevTools-Entwicklertool (auch bekannt als das, was im Backend passiert).
5. Suchen Sie die HTML-Elemente, die den vollständigen Teil enthalten, den Sie testen möchten.
6. Verfassen Sie den JavaScript-Code. (Die Codesyntax für eine Beispiel-Website, die wir zu Convert hinzugefügt haben, ist unten aufgeführt.)
   
   let header = document . querySelector ( '.elementor-section-reviews' )

   let intro = document . querySelector ( '.elementor-element-5c31' )

   let services = document . querySelector ( '.elementor-element-0aa0' )

   Header. insertBefore ( Dienste, Intro )

   let header = document.querySelector('.elementor-section-reviews') let intro = document.querySelector('.elementor-element-5c31') let services = document.querySelector('.elementor-element-0aa0') Header. insertBefore(Dienste, Intro)
7. Kehren Sie zum Konvertieren-Editor zurück.
8. Führen Sie JavaScript über den gesamten Text des Tests aus.

Benutzerdefinierten CSS-Editor konvertieren (Erfahrung, Variationsstufen)

In Convert können Sie die benutzerdefinierten CSS-Editoren verwenden, um das Erscheinungsbild bestimmter Elemente auf einer Ihrer Website-Seiten zu ändern.

Vielleicht möchten Sie beispielsweise eine Überschrift hervorheben, indem Sie die Schriftart ändern oder einen Rahmen hinzufügen.

Obwohl Sie den Convert Visual Editor verwenden können, um Website-Elemente hinzuzufügen, zu ändern und zu entfernen, können Sie fortgeschrittenere Tests durchführen, wenn Sie über grundlegende CSS-Kenntnisse verfügen.

Dieser Abschnitt zeigt Ihnen, wie Sie das Styling eines Elements mit CSS als Teil Ihres Erlebnisses oder Ihrer Variation ändern.

Erleben Sie den CSS-Editor

So gestalten Sie ein Element auf Ihrer Website mit CSS und wenden die Änderungen auf der Erfahrungsebene an:

1. Gehen Sie zu Ihrem Experiment oder erstellen Sie ein neues.
2. Wählen Sie oben im visuellen Editor das Zahnradsymbol und dann Global Experience CSS aus.
   

   

3. Fügen Sie Ihren eigenen benutzerdefinierten CSS-Code hinzu.
4. Klicken Sie auf Speichern und fortfahren.

Herzliche Glückwünsche! Jetzt können Sie Ihre Änderungen in der Vorschau anzeigen und sie dann weltweit veröffentlichen.

Variations-CSS-Editor

Sie können CSS-Änderungen auch auf der Variationsebene anwenden.

Gehen Sie dazu zu Visual Editor → Variation n (Variation Menus) → Custom CSS.

Mit diesem Editor können Sie einfaches CSS einfügen, das an die Webseite angehängt wird, wenn dem Besucher diese bestimmte Variante zugewiesen wird.

Tipp: Da CSS-Regeln dauerhaft sind und keinen Rennbedingungen unterliegen, sind CSS-Änderungen langlebiger als Änderungen, die in den anderen Editoren enthalten sind.

Erweitertes A/B-Testbeispiel mit benutzerdefiniertem CSS

Wenn Besucher Ihre Website besuchen, möchten Sie, dass sie schnell finden, wonach sie suchen.

Das Zurückscrollen zum Anfang einer Seite, um auf einer Website zu navigieren, kann für manche Benutzer mühsam sein.

Sticky-Menüs bieten eine einfache Lösung, mit der Besucher mit einer permanenten Navigationsleiste schnell entdecken können, was sie brauchen.

Sticky-Menüs verbessern die Erfahrung Ihrer Besucher und ermutigen sie, mehr Inhalte zu konsumieren, was die Absprungraten senkt.

Sie können ein Sticky-Menü mit benutzerdefiniertem CSS erstellen:

 Navi {
  Hintergrund:#ffff;
  Höhe: 70 Pixel;
  Z-Index: 999;
  Rand: 0 automatisch;
  Rand unten: 1px solide #dadada;
  Breite: 100 %;
  Position:fest;
  oben:0;
  links:0;
  rechts:0;
} 

Fazit

In der heutigen Welt werden sowohl No-Code-Lösungen als auch benutzerdefinierte Code-Editoren benötigt.

Convert bietet sowohl No-Code-Lösungen, die mehr Unternehmen den Zugang zur digitalen Wirtschaft ermöglichen, als auch benutzerdefinierte Code-Editoren, die technisch versierten Benutzern die Möglichkeit geben, ihre Websites weiter anzupassen.

Codieren ist eine Fähigkeit, die weiter ausgebaut wird, da Entwickler bahnbrechende Ideen für A/B-Tests mit benutzerdefinierten Code-Editoren entwickeln. Nichtsdestotrotz werden No-Code-Lösungen weiterhin dazu beitragen, den Website-Erstellungsprozess für Unternehmen zu vereinfachen, die sich schnell etablieren und mit der Gewinnung von Kunden beginnen möchten!

Die visuellen und Code-Editoren von Convert sind für alle unsere Kunden verfügbar. Wenn Sie an unseren Produkten interessiert sind, können Sie gerne eine Demo anfordern!