Demo: Feature Experimentation

Dieses praxisorientierte Tutorial fuer Entwickler zeigt, wie Feature Experimentation auf der Kameleoon-Plattform funktioniert. Sie beginnen mit einer Beispielanwendung und folgen Schritt-fuer-Schritt-Anweisungen, um in der Kameleoon-App eine Reihe von Feature Flags zu konfigurieren, sie in der Beispielanwendung zu aktivieren und zu sehen, wie sich die Feature Flags auf die Seite des Besuchers auswirken. Das Beispiel ist in TypeScript geschrieben, aber Sie muessen TypeScript nicht beherrschen, um dieses Tutorial zu absolvieren. Erfahrung mit einer beliebigen modernen Programmiersprache sollte ausreichen, um die wichtigen Punkte zu verstehen.

​

Voraussetzungen​

Bevor Sie beginnen, muessen Sie einige Konten erstellen:

• Registrieren Sie sich fuer ein kostenloses 30-taegiges Kameleoon-Testkonto. Sie muessen dieses Tutorial innerhalb von 30 Tagen nach der Konto-Anforderung abschliessen, aber das Tutorial sollte nur etwa 30 Minuten dauern.
• Ein GitHub-Konto.

​

Beispielanwendung ausfuehren​

Zuerst bringen Sie die Anwendung in GitHub Pages zum Laufen, damit Sie sich nicht um die Einrichtung eines Webservers kuemmern muessen. Sie muessen in Ihrem GitHub-Konto angemeldet sein.

1. Klicken Sie im Bouncing-Ball-Repository auf GitHub auf Fork. Folgen Sie den Anweisungen, um Ihren eigenen Fork der Beispielanwendung in github.com/<your_username>/bouncing-ball zu erstellen. (Ersetzen Sie <your_username> in diesem Tutorial durch den Namen Ihres GitHub-Kontos.)
2. Klicken Sie in Ihrem neuen https://github.com/<your_username>/bouncing-ball-Repository auf GitHub auf den Tab Actions und klicken Sie auf die Schaltflaeche, um Workflows zu aktivieren.
3. Klicken Sie im Tab Settings auf Pages, klicken Sie auf das Dropdown-Menue Source und dann auf GitHub Actions.
4. Klicken Sie im Tab Actions auf Deploy static content to Pages > Run workflow > Run workflow.

Sobald der Build- und Deployment-Prozess abgeschlossen ist (dies kann ein oder zwei Minuten dauern), sollten Sie die Demo-Anwendung in einem Browser unter https://<your_username>.github.io/bouncing-ball sehen koennen! Sie sollte ungefaehr so aussehen: Um Projektaenderungen zu beschleunigen, kann das Aktualisierungsintervall, in dem das SDK Konfigurationsaenderungen im Kameleoon-Konto pruefe, programmgesteuert angepasst werden:

1. Oeffnen Sie in Ihrem GitHub-Repository im Tab Code die Datei src/main.ts.
2. Klicken Sie auf die Schaltflaeche Edit this file (mit dem Stiftsymbol).
3. Suchen und bearbeiten Sie die Datei /src/main.ts. Suchen Sie die folgende Zeile:
   const client = new KameleoonClient({ siteCode });
   
   Ersetzen Sie die Zeile durch den folgenden Code:
   const configuration = {   updateInterval: 1,};const client = new KameleoonClient({ siteCode, configuration });
   
   Der neue Code fuegt eine Konfiguration mit einem updateInterval von 1 hinzu. Dieser Wert reduziert die Haeufigkeit, mit der das SDK nach Aenderungen in der Konfiguration abfragt, auf einmal pro Minute (gegenueber dem Standardwert von 60 Minuten). Dieses haeufige Abfragen wird aufgrund der Auswirkungen auf die Leistung nicht fuer eine Produktionsumgebung empfohlen, aber es ist hilfreich fuer das Tutorial. Kameleoon bietet auch eine Premium-Streaming-Option, die Konfigurationsaenderungen sofort an das SDK uebertraegt.
4. Klicken Sie auf Commit changes….

​

Ein Kameleoon-Projekt einrichten​

Sie benoetigen die Anmeldedaten Ihres Kameleoon-Testkontos, bevor Sie diesen Abschnitt beginnen.

1. Melden Sie sich bei der Kameleoon-App mit den Anmeldedaten Ihres Testkontos an.
2. Erweitern Sie im linken Menue Admin und klicken Sie auf Projects > New project.
3. Klicken Sie im Dialog im ersten Dropdown auf Site: Feature flags und fuegen Sie https://<your_username>.github.io/bouncing-ball als URL of site ein. Denken Sie daran, <your_username> durch Ihren GitHub-Kontonamen zu ersetzen. Klicken Sie auf Add.
4. Kopieren Sie den auf der naechsten Seite angezeigten Site-Code.
   
5. Bearbeiten Sie in Ihrem GitHub-Repository im Tab Code die Datei src/constants. Ersetzen Sie den siteCode-Wert durch den gerade kopierten Site-Code und klicken Sie auf Commit changes.

Wenn Sie Ihre Anwendung erneut im Browser pruefen (https://<your_username>.github.io/bouncing-ball), sollten Sie sehen, dass alle huepfenden Kreise verschwunden sind. Das liegt daran, dass die Kreise von einem Kameleoon Feature Flag in einem anderen Projekt hinzugefuegt wurden. Sie haben gerade den Site-Code geaendert, sodass die Site jetzt von Ihrem Kameleoon-Projekt gesteuert wird, das Sie noch nicht vollstaendig konfiguriert haben. Keine Sorge, Sie werden Ihre eigenen Kreise mit Ihren eigenen Feature Flags wieder zur Anwendung hinzufuegen.

​

Feature Flags einrichten​

Feature Flags ermoeglichen das Ausrollen neuer Funktionen an ein begrenztes Publikum und das Testen der Wirksamkeit vor einem vollstaendigen Rollout. Die Konfiguration kann von Entwicklern oder anderen Teammitgliedern verwaltet werden. Das Verstaendnis, wie Feature Flags in der Kameleoon-Oberflaeche konfiguriert werden, hilft beim effektiven Einsatz von Variablen in der App.

1. Klicken Sie in der Kameleoon-App im Menue Activate auf Feature flags.
2. Klicken Sie auf New feature flag.
3. Fuellen Sie die Felder mit den folgenden Werten aus:
   • Name: Bouncing ball demo
   • Project: {Waehlen Sie Ihr Projekt aus dem Dropdown}
   • Flag type: Permanent
   • Feature key: bouncing_ball_demo Sie koennen die Felder Tags und Beschreibung leer lassen.
4. Klicken Sie auf Validate.

​

Variablen einrichten​

Variablen sind Zeichenketten, Zahlen, boolesche Werte oder JSON-Werte, die Sie im App-Code verwenden, um das Verhalten der App zu aendern. Ihre Werte aendern sich abhaengig davon, welcher Variation Kameleoon den Besucher zuweist. Um beispielsweise festzustellen, ob Besucher laenger auf einer Site bleiben, wenn ihnen eine “Party time”-Variation gegenueber einer “Hypnotize”-Variation angezeigt wird, richten Sie fuer jede Option eine Variation ein und fuehren Sie ein Experiment durch.

1. Erweitern Sie auf der neuen Seite, die erscheint, das Menue Set Up und klicken Sie auf Variables.

2. Verwenden Sie die Schaltflaeche + Add Variable, um 6 Variablen mit den folgenden Werten hinzuzufuegen:

   Variablenschluessel	Typ	Standardwert
   title_text	String	Default variation: 1 green ball
   randomize_on_bounce	Boolean	False
   balls_amount	Number	1
   ball_speed	Number	10
   ball_color	String	green
   ball_size	Number	20

   Achten Sie auf Tippfehler! Die Namen und Typen der Variablenschluessel muessen exakt uebereinstimmen. Wenn Sie sich die Datei src/main.ts in Ihrem GitHub-Repository ansehen, werden Sie verstehen, warum. Das Codebeispiel verwendet genau diese Variablenschluesselnamen, um die Werte der Variablen abhaengig von der Variation abzurufen, der Kameleoon den Besucher zuweist.
3. Klicken Sie auf Save.

Sie haben jetzt eine Reihe von Variablen mit Standardwerten eingerichtet. Die Standardwerte sind die Werte, die Ihre App verwendet, wenn keine aktiven Kampagnen fuer den Besucher vorhanden sind. Wenn Sie Ihre Feature Flags jetzt aktivieren wuerden, wuerden Sie die Standardvariation mit 1 gruenen Ball sehen, der langsam herumspringt. Das liegt daran, dass noch keine Variationen eingerichtet wurden.

​

Variationen einrichten​

Variationen definieren die moeglichen Kombinationen von Variablen, die steuern, was ein Besucher in Ihrer App sieht. Kameleoon weist jedem Besucher bei seinem ersten Besuch der App eine Variation zu.

1. Klicken Sie in Set Up auf Variations.
2. Verwenden Sie die Schaltflaeche + Add variation, um zwei neue Variationen hinzuzufuegen:
   • Name: Party time
     • ball_size: 50
     • ball_color: random
     • ball_speed: 75
     • balls_amount: 75
     • randomize_on_bounce: True
     • title_text: Hey! Get up and dance!
   • Name: Hypnotize
     • ball_size: 200
     • ball_color: blue
     • ball_speed: 2
     • balls_amount: 10
     • randomize_on_bounce: False
     • title_text: You're getting very, very sleepy

​

Ein Ziel einrichten​

Als Naechstes richten Sie ein Ziel ein. Ziele definieren, wie Sie die Wirksamkeit Ihrer Variationen messen moechten. Es gibt eine Reihe verschiedener anpassbarer Zieltypen, die Sie verwenden koennen, aber dieses Tutorial verwendet eine einfache Metrik “Verweildauer”.

1. Klicken Sie im Menue Set Up auf Goals > + Add goal.
2. Klicken Sie im Bereich Configure goals auf + Create a new goal und fuellen Sie die folgenden Felder aus:
   • Name: Time spent
   • Type: Time Spent
   • Project: {Waehlen Sie Ihr Projekt}
3. Klicken Sie auf Next und setzen Sie das Ziel auf: The visitor spent more than 30 seconds.
4. Klicken Sie auf Validate.

​

Ein Experiment ausrollen​

Da Ihre Variationen jetzt konfiguriert sind, koennen Sie ein Experiment erstellen, das die beiden Variationen einer Teilmenge Ihres Publikums anzeigt. Sie zeigen eine Variation 40 % Ihrer Besucher und die andere Variation einer separaten Gruppe von 40 % der Besucher. Die verbleibenden 20 % der Besucher sehen eine unveraenderte Version der App (die Standardversion).

1. Klicken Sie im Bereich Rollout Planner auf Production.
2. Klicken Sie auf + Add a rule > Experiment.
3. Reduzieren Sie den Schieberegler Exposure auf 80%.
4. Klicken Sie unter Variations to serve auf Party time und aendern Sie den Exposition-Wert auf 40.00%.
5. Klicken Sie auf + Add a variation. Die Variation Hypnotize sollte automatisch ausgewaehlt sein (falls nicht, waehlen Sie sie aus). Aendern Sie den Exposition-Wert auf 40.00%.
6. Stellen Sie den ON/OFF-Schalter auf ON.
7. Klicken Sie auf Save.

​

Die App testen​

Oeffnen Sie die App in einem Browser. Sie sollten eine der drei moeglichen Variationen sehen: die Party-time-Variation, die Hypnotize-Variation oder die Standardvariation. Versuchen Sie nun, einen neuen Benutzer zu simulieren, bis Sie die anderen Variationen sehen. Dies kann einige Versuche erfordern, da Sie moeglicherweise mehrfach der gleichen Variation zugewiesen werden. Da Ihr Browser einen visitorCode speichert, eine eindeutige ID, die Sie identifiziert, koennen Sie die Seite nicht einfach aktualisieren, weil Sie immer die Variation sehen, der Sie zuerst zugewiesen wurden. Stattdessen muessen Sie wie ein neuer Besucher aussehen. Hier sind die einfachsten Moeglichkeiten:

• Wechseln Sie zu einem anderen Browser oder Geraet.
• Oeffnen Sie die App jedes Mal in einem neuen privaten Fenster (je nach gewaehltem Browser kann dies “Inkognito”, “Privates Surfen” oder aehnlich heissen).

Nach genuegend Versuchen sollten Sie alle drei Variationen sehen koennen. Wenn ja, herzlichen Glueckwunsch! Sie haben erfolgreich ein Feature-Experiment mit Kameleoon eingerichtet! 🎉🎉🎉

​

Naechste Schritte​

• Schauen Sie sich im Bereich Reporting Ihres Experiments einige der anfaenglichen Ergebnisse, verfuegbaren Integrationen und das Aktivitaetsprotokoll an. Aufgrund des geringen Traffics werden Sie noch nicht viele Ergebnisdaten haben.
• Sehen Sie sich den Beispielcode an, um zu verstehen, wie die Variablen im Code angewendet werden. Wenn Sie mit TypeScript vertraut sind, versuchen Sie, Ihre eigene Variable hinzuzufuegen.
• Schauen Sie sich den Rest dieser Entwicklerdokumentation und den Experimentation User Guide an, um mehr ueber alle verfuegbaren Optionen und Funktionen zu erfahren.
• Installieren Sie das SDK Ihrer Wahl und beginnen Sie mit dem Erstellen Ihrer eigenen Feature Flags, Personalisierungen und anderen Experimente.