Einführung von Erweiterungen - Bessere Zusammenarbeit für Teams
Niemand möchte Code für einmalige Anwendungsfälle schreiben. Doch allzu oft müssen Entwickler einmalige Lösungen erstellen, um einem Marketingteam bei der Durchführung einer Werbeaktion oder einer Änderung an der Marketing Site zu helfen. Wir haben Erweiterungen entwickelt, wiederverwendbare Vorlagen, die mit HTML, CSS und JavaScript erstellt wurden, um sowohl technischen als auch nicht-technischen Teams zu helfen, Experimente durchzuführen.
Freundlich für Entwickler: Reduzieren, Wiederverwenden, Recyceln
Erweiterungen bieten Ihnen einen flexiblen Rahmen für die Erstellung wiederverwendbarer Komponenten wie Ankündigungen, Sonderangebote, Karussells, Leuchtkästen und vieles mehr. Erweiterungen können mit dem visuellen Editor oder über die REST-API erstellt werden.
Nehmen wir an, Sie haben eine Reise-Website. Dann könnten Sie Erweiterungen verwenden, um ein Leuchtpult auszulösen, das die Besucher auffordert, sich für Ihr Treueprogramm anzumelden, nachdem sie einen Kauf abgeschlossen haben. Mit Optimizely Web Personalization können Sie die Nachrichten für das Treueprogramm auf der Grundlage des Standorts Ihres Kunden personalisieren. Für Reisende, die in der kalten Jahreszeit unterwegs sind, könnten Sie z.B. in der Werbung für das Treueprogramm den Hinweis "Sparen Sie kräftig bei Strandurlauben" einbauen. Wenn Sie noch Optimizely Classic verwenden und noch nicht auf Optimizely X umgestiegen sind, sind die Erweiterungen ein weiterer überzeugender Grund, dies zu tun.
Beispiel für eine Erweiterung zur Anzeige eines Modals für die E-Mail-Anmeldung
Marketer-freundlich: Unendliche Anpassungsmöglichkeiten
Erweiterungen ermöglichen es Entwicklern, eine Vorlage zu erstellen, in der sie eine breite Palette von Elementen für Marketer zur Anpassung bereitstellen können, wie z.B. Text, Bilder, Call-to-Action, Hintergrundfarbe und viele weitere Elemente. Erweiterungen sind flexibel und ermöglichen es den Entwicklern, Eingabetypen zu spezifizieren, die von offenen Optionen wie Freiformtext bis hin zu eingeschränkteren Auswahlmöglichkeiten wie Dropdowns, Umschalttasten und Farbwählern reichen. Anstatt dass Entwickler ständig einmalige Codelösungen erstellen müssen, können Erweiterungen jetzt von nicht-technischen Teams jederzeit wiederverwendet werden, wenn sie eine ähnliche Aktion oder einen ähnlichen Anwendungsfall haben.
Einige Beispiele für Eingabetypen, die für Erweiterungen verfügbar sind
Designer-freundlich: Bleiben Sie bei der Marke
Eine weitere Gruppe, die von Erweiterungen profitieren kann, sind Designer. Erweiterungen können so eingerichtet werden, dass bestimmte Elemente in hohem Maße anpassbar sind und andere Elemente entweder fest codiert oder auf einige wenige, vorab genehmigte Auswahlmöglichkeiten beschränkt sind. Sie können zum Beispiel die Eingabe von freiem Text erlauben, aber die Farbe des Textes und des Hintergrunds auf bestimmte vordefinierte Farben beschränken, die Teil der Markenrichtlinien Ihres Unternehmens sind. Auf diese Weise können Sie Experimente und Kampagnen durchführen, ohne dass Ihr Designer Sodbrennen bekommt. Im folgenden Beispiel haben wir eine Erweiterung erstellt, die nur drei verschiedene Farbkombinationen für den Bannerhintergrund zulässt und dem Benutzer die Möglichkeit gibt, die Platzierung der Call-to-Action-Schaltfläche festzulegen.
Erstellen Sie Ihre erste Erweiterung
Das Erstellen einer Erweiterung ist ganz einfach. Führen Sie für jedes Optimizely X Webprojekt die folgenden Schritte aus:
- Gehen Sie zu Implementierung > Erweiterungen
- Definieren Sie alle Felder, die vom Benutzer eingegeben werden sollen. Jedes Feld erhält einen eindeutigen Bezeichner, auf den Sie in Ihrem Code mit {{extension.your_field_name}} verweisen können.
- Als nächstes fügen Sie das benutzerdefinierte HTML und CSS zu Ihrer Erweiterung hinzu
- Im Abschnitt ApplyJS können Sie auf der Grundlage eines bestimmten Selektors festlegen, wo die Erweiterung in die Seite eingefügt wird.
- Verwenden Sie schließlich den Abschnitt ResetJS, um die Erweiterung zu bereinigen. Wenn Sie z.B. auf eine Schaltfläche klicken, die die Anzeige eines Modals erzwingt, und durch diesen Klick wird auch ein Cookie gesetzt, dann können Sie mit ResetJS dieses Cookie entfernen und das Modal löschen.
Lassen Sie uns nun durchgehen, wie man eine Erweiterung erstellt, mit der man ein Banner mit anpassbarer Hintergrundfarbe, Überschrift und einem Call-to-Action-Link erstellen kann. In der Optimizely-Benutzeroberfläche für die Erstellung von Erweiterungen können wir die folgenden Elemente erstellen: Überschrift, Call-to-Action-Text, Hintergrundfarbe des Banners und Call-to-Action-Link. Die Überschrift, der Call-to-Action-Text und der Call-to-Action-Link können durch Textfelder dargestellt werden, aber wir verwenden einen Farbwähler für die Hintergrundfarbe. Jedes dieser Felder hat seinen eigenen API-Namen, auf den wir in unserem Code verweisen werden. Für die Beschriftung Hintergrundfarbe lautet der API-Name zum Beispiel bg_color.
Sobald wir die bearbeitbaren Felder eingerichtet haben, können wir in unserem HTML-Code ganz einfach auf sie verweisen. Wir referenzieren diese API-Felder mit der Syntax {{extension.api_name}}. In unserem HTML-Beispiel unten verweisen wir auf die entsprechenden API-Felder und fügen einige CSS-Klassen hinzu, um die Erweiterung zu gestalten. Wir haben uns entschieden, die Schriftfarbe des Textes auf der CTA-Schaltfläche aus Gründen der Konsistenz an die Hintergrundfarbe anzupassen, also fügen wir das Feld extension.bg_color zweimal ein. Das erste Mal, um den Hintergrund des Banners zu gestalten und das zweite Mal, um die Schrift auf der CTA-Schaltfläche zu gestalten.
<div id="optimizely-extension-{{ extension.$instance }}" class="banner"><a href="{{extension.cta_link}}" class="cta_link"> {{extension.cta_text}}</a><div class="banner_text">{{ extension.text }}</div>In unserem CSS-Abschnitt fügen wir Klassen und Styling für das Banner, den Bannertest und den CTA-Link hinzu. Wir haben uns dafür entschieden, diese Werte fest zu kodieren, aber wir könnten sie auch unseren Endbenutzern zugänglich machen, indem wir sie zu editierbaren Feldern machen.
.banner { color: #555; padding:10px } .banner_text { font-size:20px; color: white; font-weight: 400; text-align: center; font-family: "Helvetica",sans-serif; } .cta_link { float:right; vertical-align:middle; border:1px; background-color:white; padding:5px 20px; font-weight:600; font-size:16px; font-family: "Helvetica",sans-serif; }In unserem JavaScript-Abschnitt geben wir im Abschnitt "elem.insertAdjacentHTML" an, dass wir unser Banner oben auf der Seite einfügen wollen. Wir können die Erweiterung jedoch auch an einer beliebigen Stelle auf unserer Seite einfügen oder eine benutzerdefinierte Logik einrichten, um die Erweiterung nur nach Eintreten eines bestimmten Ereignisses auszulösen.
var utils = optimizely.get('utils'); utils.waitForElement('body') .then(function(elem) { // Die html-Erweiterung dem Body voranstellen elem.insertAdjacentHTML('afterbegin', extension.$html); });Eine ausführlichere Erklärung, wie Sie Erweiterungen einrichten können, finden Sie in der Dokumentation zu den Erweiterungen. Erweiterungen können auch über die REST-API erstellt und aktualisiert werden. Sie haben z.B. eine Reihe von Erweiterungen, die ein bestimmtes Farb- und Schriftschema verwenden, aber Ihr Unternehmen beschließt, ein Re-Branding durchzuführen, und nun müssen Sie alle Farben und Schriftarten aktualisieren. Mit der REST-API können Sie alle CSS für Ihre Erweiterungen durchgehen und programmatisch auf die neuesten Markenrichtlinien aktualisieren.
Erweiterungen verwenden
Erweiterungen werden im Bereich "Änderungen erstellen" unter Variationen für Experimente und Personalisierungskampagnen angezeigt. Sie können eine Erweiterung zu Ihrem Experiment oder Ihrer Kampagne hinzufügen und die Felder für Ihre Variation anpassen. Zum Beispiel sehen Sie die Erweiterung mit dem Titel "Design Approved Banner" als eine Option.
Da Erweiterungen tief in die Optimizely-Plattform für Experimente und Personalisierung integriert sind, können Sie Experimente durchführen, um eine Version einer Erweiterung im Vergleich zu einer anderen Version zu testen, um herauszufinden, welche Version am besten konvertiert.
Teilen ist Pflegen
Um Ihnen den Einstieg in die Nutzung von Erweiterungen zu erleichtern, haben wir eine Bibliothek mit einigen nützlichen Erweiterungen zusammengestellt, die Sie hier auf Github herunterladen können. Da die Erweiterungen durch eine einzige json-Datei dargestellt werden, lassen sie sich leicht weitergeben. Um eine der vorgefertigten Erweiterungen zu verwenden, klicken Sie im Fenster Erweiterungen auf die Schaltfläche Neu erstellen und wählen Sie dann "Json verwenden". Sie können den json-Code von Github einfach kopieren und in dieses Feld einfügen.
Eine von uns erstellte Beispielerweiterung ermöglicht es Ihnen, nach einem Hero Image zu suchen, um Ihre Seite individuell zu gestalten. Sie verwendet die Unsplash-API, die Ihnen Zugang zu Tausenden von kostenlosen Bildern bietet, die Sie verwenden können. Sie können ein Schlüsselwort wie "san fran" eingeben und erhalten ein Hero Image mit Bildern aus San Francisco für Ihre Site. Sie können diese Erweiterung von unserem GitHub Repository hier herunterladen.
Wenn Sie eine Erweiterung entwickelt haben, auf die Sie stolz sind und die Sie mit der Optimizely-Community teilen möchten, wenden Sie sich an uns unter developers@optimizely.com, damit wir Ihre Erweiterung in unsere Bibliothek aufnehmen können. Wir freuen uns darauf, zu sehen, was Sie bauen!
Nützliche Ressourcen:
