[Exklusiv für Entwickler] Professionalisieren Sie Ihr A/B-Test Setup mit Kameleoons REST API

Der WYSIWYG-Editor ist eine gute Möglichkeit mit dem A/B-Testen zu beginnen, sofern keine oder wenige technische Kenntnisse von der Funktionsweise von Websites vorhanden sind.

Sobald Ihre A/B-Tests jedoch umfangreicher und komplexer werden, werden diese in der Regel durch Frontend-Entwickler mithilfe von Javascript und CSS-Code auf Basis der vorhandenen Website umgesetzt. Das A/B-Testing Tool bietet hierfür die Möglichkeit in der Variation dediziert Javascript- und CSS-Inhalte zu hinterlegen, welche die Veränderung möglich machen.

Das Hinterlegen von Code über einen visuellen Editor entspricht jedoch nicht der üblichen Arbeitsweise von Entwicklern, die normalerweise Code innerhalb einer IDE (Integrated Development Environment) schreiben.

Die gute Nachricht ist, dass Entwickler mit Kameleoon arbeiten können, ohne ihre tägliche Routine ändern zu müssen und ohne dabei überhaupt mit dem visuellen Editor in Verbindung zu kommen. Entwickler können jetzt kommen, wie sie sind :-).

Es gibt für einen Großteil der Merkmale des visuellen Editors eine entsprechende Schnittstelle in der Kameleoon REST API, sodass Sie Ihre A/B-Tests vollständig automatisieren können. Mithilfe des Versionskontrollsystem git ist es möglich eine detailliertere Kontrolle über Ihre A/B-Tests zu erhalten.

In diesem Artikel erklären wir, wie einige unserer Kunden unsere REST-APIs in Kombination mit git nutzen, um ihre A/B-Testing Strategie zu skalieren.

Sie können direkt auf unsere Entwicklerdokumentation zu dem Thema Rest APIs zugreifen.

Kameleoon und Git verbinden, um Tests zu erstellen und zu versionieren

Kameleoon kann über die REST-API genutzt werden um A/B-Tests zu erstellen, zu aktualisieren und anschließend zu veröffentlichen. Innerhalb Ihrer Testumgebung haben Sie die Möglichkeit die verfügbaren API-Endpunkte zu nutzen. Um die Interaktion zu erleichtern, Tests zu erstellen und eine Versionshistorie zu führen, empfehlen wir Ihnen, eine lokale Testsuite zu verwenden.

Um die ersten Schritte zu einer eigenen lokalen Testsuite zu vereinfachen, haben wir ein Repository mit einigen Beispielen aufgebaut, auf welches man hier auf Github zugreifen kann.

Das Beispielpaket ist unter der MIT Open Source Lizenz lizenziert, also zögern Sie nicht, weitere Funktionen hinzuzufügen, Pull-Requests Ihrer hinzugefügten Funktionen zu stellen oder es an Ihre Bedürfnisse und Ihren Testaufbau anzupassen. Der Vorlagenordner "template/ab-000" dient als Grundlage, welche als Template für die Erstellung Ihrer Experimente verwendet wird. Sie finden außerdem einen Ordner mit dem Namen "tests".

Beim Erstellen eines neuen Experiments befindet sich alles, was aktualisiert wird, in diesem Ordner: Varianten, CSS und JS je Variante oder global zu einem Test, etc.

Während der Arbeit in diesem Ordner wird dieser automatisch als Git-Repository versioniert, da er ursprünglich aus github ausgecheckt wurde. Sie können das Repository klonen und eine eigene Remote-URL festlegen, um Änderungen daran vorzunehmen.

Nachdem Sie einen Test erstellt haben, stehen neue Dateien zum Versionieren bereit.

Mit git ist es möglich, ein granulares Versionssystem Ihrer A/B-Testkonfiguration zu haben.

Wie kann man das Paket nutzen?

Sie müssen zuerst Ihre Kameleoon-Anmeldeinformationen in der Datei kameleoon-configuration.json hinzufügen. Um Ihnen den Einstieg in die Verwendung von REST-API-Funktionen zu erleichtern, haben wir eine Bibliothek mit einigen nützlichen Grundtasks erstellt, die Sie im Stammverzeichnis des Repositorys in der Datei Gruntfile.js finden. Einige von ihnen werden die Kameleoon REST API-Endpunkte nutzen.

• grunt: Dieser Defaulttask wird ein Ascii-Art anzeigen, zur Verfügung gestellt von Henry Münster (Die Welt), unser erster Kunde war, welcher unsere REST-API genutzt hat, um Experimente live auf seinen Webseiten zu pushen - vielen Dank für die Inspiration und Ideen!
• grunt authentication: Erstellen Sie den Authentifizierungstoken, welcher 1 Stunde lang gültig ist. Wenn Sie diesen Task innerhalb dieses Zeitraums wiederholen, sollte kein neuer Token erstellt werden. Der Token wird automatisch in der Kameleoon-Konfiguration gespeichert und von dort aus in den einzelnen Tasks verwendet.
• grunt listSites: Zeigt alle Seiten, welche im Account konfiguriert sind.
• grunt setSite: Definiert eine Site für das aktuelle lokale Arbeits-Setup, diese wird automatisch in der Kameleoon-Konfiguration gespeichert und in den Aufgaben zur Aktualisierung und Bereitstellung an der ausgewählten Site verwendet.
• grunt listTests: Listet alle Tests innerhalb einer Site auf, nachdem die Site vorher festgelegt wurde.
• grunt createLocalTest: Diese Funktion erstellt einen neuen Test aus einer Vorlage, die sich im Ordner /template/ befindet. Option --name ist obligatorisch, der Name wird verwendet, um einen neuen Ordner unter dem Ordner /template/ einzurichten. Nach der Einrichtung des Tests sollte man die URL und den Namen dafür in der configuration.json im Testordner einstellen.
• grunt deleteLocalTest: Löschen eines lokalen Tests, Bereitstellen von --name als Parameter ist erforderlich
• grunt listLocalTests: Diese Funktion zeigt alle lokal erstellten Tests an (nicht die, welche sich im Account befinden).
• grunt scrapeLocalTest: die in der configuration.json angegebene URL wird zum Scrapen der Seite verwendet, diese wird im Ordner /target/ gespeichert, Option --name ist obligatorisch für eine Ausführung
• grunt previewLocalTest: Start des lokalen Servers, mit Inhalten aus den zuvor kopierten Daten des Tasks scrapeLocalTest
• grunt deployTest: Diese Methode stellt einen lokal erstellten Test im Kameleoon Backoffice bereit. Innerhalb des Tasks wird die Methode updateVariations aufgerufen, welche die Variationen aktualisiert, um die CSS- und JS-Dateien in den lokalen Test einzufügen.
• grunt listGoals: Liefert eine Liste aller Ziele, die mit der ausgewählten Seite verbunden sind. grunt setSite muss mindestens einmal vorher aufgerufen werden.
• grunt assignGoal: Geben Sie einen param --name und mindestens ein param --goal an um einem Test ein Ziel zuzuweisen
• grunt deleteTest: Löschen eines Tests in Kameleoon, --id als Parameter ist erforderlich
• grunt updateTest: Aktualisieren Sie einen bereits installierten Test, verwenden Sie --name=ab-xxx, um auszuwählen, welcher Test aktualisiert werden soll.
• grunt simulation: Erstellen Sie einen Simulationslink, um den Test im Produktionssystem mit einem Simulationspanel zu sehen - der Parameter --name=ab-123 ist erforderlich.
• grunt experimentResults: Liefert Statistiken über Ihren Test und dem Test zugewiesenen Zielen zurück.
• grunt startTest: Startet den Test im Produktivsystem

Mit dem Grunt-Skript kann ein Test erstellt, alle Tests aufgelistet und aktualisiert werden, mit dem Simulationstask ist es möglich, einen Simulationslink zu erstellen, sodass Sie alles live auf Ihrer Website über das Simulationspanel testen können ohne den Test bereits gestartet zu haben.

Wie man im Sourcecode erkennen kann, wird das Paket aktiv weiterentwickelt, es vermittelt somit eine erste Idee und eine Art Boilerplate, um Ihren eigenen Testaufbau mit einer Versionshistorie zu starten. Behalten Sie das Repository im Auge, es wird in Zukunft mit weiteren Funktionen aktualisiert, die noch nicht abgeschlossenen werden noch ergänzt.

Beispiel: Wie man einen neuen Test erstellt und Code aus GitHub in eine Variation innerhalb eines Tests verschiebt

Angenommen, Sie möchten Code von Ihrem lokalen Computer in Ihren Kameleoon-Account übertragen. Hier erfahren Sie, wie Sie es mit unserem Repository machen würden:

1. Klonen Sie das Repository von https://github.com/pixelschrubber/grunting-kameleoon
2. Bearbeiten Sie die Datei kameleoon-configuration.json mit Ihren Zugangsdaten.
3. Rufen Sie "npm install" in Ihrer Shell auf, um alle Abhängigkeiten einzurichten.
4. Rufen Sie "grunt authentication" in Ihrer Shell auf, um einen Authentifizierungstoken zu erhalten.
5. Rufen Sie "grunt listSites" an, um sich einen Überblick über Ihre Seiten innerhalb des Kontos zu verschaffen.
6. Rufen Sie "grunt setSite --site=19046" mit einem Sitecode auf, der von der Aufgabe vorher erhalten wurde, um eine Site in Ihrer lokalen Arbeitsumgebung einzurichten.
7. Rufen Sie "grunt createLocalTest --name=ab-123" auf, um Ihren ersten lokalen Test zu erstellen.
8. Bearbeiten Sie die Datei configuration.json im neu erstellten Testordner in tests/ab-123, geben Sie die Felder url und name an.
9. Fügen Sie Ihre Variationen in variation.css und variation.js in den Testordner tests/ab-123/variation-0/ ein.
10. Rufen Sie "grunt deployTest --name=ab-123" auf, um Ihren Test nach Kameleoon zu verschieben, wobei der gesamte CSS- und JS-Code in die entsprechenden Felder deployed wird.
11. Rufen Sie "grunt simulation --name=ab-123" auf, um eine Simulations-URL für Ihren Test zu erhalten, verwenden Sie das Simulationspanel, um Ihre Änderungen zu testen.
12. Wenn Sie den Code aktualisieren müssen, verwenden Sie "grunt updateTest --name=ab-123", nachdem Sie Ihre lokalen Dateien geändert haben.

Wie im Screenshot zu sehen, zeigt das Backoffice den kürzlich erstellten und bereitgestellten Test

an:

Unsere Plattform wurde für die Nutzung durch alle Arten von Benutzern konzipiert, unabhängig davon, ob es sich um Marketingspezialisten oder Entwickler handelt. Mit den Rest-APIs bietet Kameleoon Entwicklern eine einfachere Möglichkeit zu arbeiten!

Wenn Sie hierzu noch mehr erfahren möchten, besuchen Sie bitte unsere Entwicklerdokumentation zu diesem Thema.