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

Sie koennen die Beispielanwendung entweder in GitHub Pages oder auf Ihrem lokalen Rechner ausfuehren. Melden Sie sich bei Ihrem GitHub-Konto an, bevor Sie mit einem der beiden Wege beginnen.

​

In GitHub Pages bereitstellen

Wenn Sie in GitHub Pages bereitstellen, muessen Sie sich nicht um die Einrichtung eines Webservers kuemmern.

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:

​

Die App lokal ausfuehren

Sie koennen die Beispielanwendung auch auf Ihrem lokalen Rechner ausfuehren, anstatt sie in GitHub Pages bereitzustellen. Die lokale Ausfuehrung erleichtert es Ihnen, die Debug-Ausgabe in der Browserkonsole zu sehen, waehrend Sie dieses Tutorial durcharbeiten.

1. Klonen Sie Ihren Fork: git clone https://github.com/<your_username>/bouncing-ball.git.
2. Installieren Sie die Abhaengigkeiten: npm install.
3. Starten Sie den lokalen Entwicklungsserver: npm run dev.
4. Oeffnen Sie die URL, die im Terminal ausgegeben wird, zum Beispiel http://localhost:5173.

Verwenden Sie diese lokale URL anstelle von https://<your_username>.github.io/bouncing-ball fuer den Rest dieses Tutorials, auch als Site-URL, wenn Sie Ihr Kameleoon-Projekt erstellen.

​

Das Abfrageintervall fuer die Konfiguration verkuerzen

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 (oder Ihre lokale URL, wenn Sie die App lokal ausfuehren) 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 oder Ihre lokale URL), 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

Jetzt testen Sie das konfigurierte Feature Flag mit der Debug-Ausgabe des SDKs, einigen Browsertechniken und den Live events der Kameleoon-App, um zu bestaetigen, dass alles funktioniert.

​

Debug-Protokollierung aktivieren

Debug-Protokolle zeigen jede interne Entscheidung, die das SDK trifft, sodass Sie verstehen, warum das SDK eine Variation nicht ausliefert oder ein Event nicht trackt. Aktivieren Sie die Debug-Protokollierung, bevor Sie die App zum ersten Mal oeffnen, damit Sie von Ihrem allerersten Besuch an volle Transparenz haben.

1. Aendern Sie in src/main.ts den SDK-Import so, dass KameleoonLogger und LogLevel aus dem vollstaendigen Bundle statt aus dem Standardbundle stammen:
   import { EventType, KameleoonClient, KameleoonLogger, LogLevel } from "@kameleoon/javascript-sdk/full";
   
2. Legen Sie direkt nach dem Erstellen des Clients die Protokollstufe fest:
   const client = new KameleoonClient({ siteCode });
   client.setLogLevel(LogLevel.DEBUG);
   
3. Committen Sie Ihre Aenderungen (oder speichern Sie die Datei, wenn Sie die App lokal ausfuehren).
4. Oeffnen Sie die Entwicklerkonsole Ihres Browsers, bevor Sie die App laden. Sie sehen detaillierte Protokolle zum Laden der Konfiguration, zur Zuweisung des Visitor Codes und zur Berechnung der Variation.

Eine vollstaendige Liste der Protokollstufen und deren Bedeutung finden Sie unter Logging.

​

Ihre Variation ansehen

Oeffnen Sie die App in einem Browser, entweder ueber Ihre GitHub-Pages-URL oder Ihre lokale URL. Sie sollten eine der drei moeglichen Variationen sehen: die Party-time-Variation, die Hypnotize-Variation oder die Standardvariation.

​

Eine andere Variation sehen

Da Ihr Browser einen visitorCode speichert, eine eindeutige ID, die Sie identifiziert, liefert ein Neuladen der Seite immer die Variation, die Kameleoon Ihnen zuerst zugewiesen hat. Verwenden Sie eine der folgenden Methoden, um wie ein neuer Besucher zu wirken:

• 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).
• Verwenden Sie das Simulationspanel des Rollout Planners, um eine bestimmte Variation auszuwaehlen, ohne einen neuen Visitor Code zu generieren. Eine Anleitung zur Einrichtung, einschliesslich der fuer reine Feature-Experimentation-Projekte notwendigen Chrome-Erweiterung, finden Sie unter Simulationsmodus verwenden.

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

​

Tracking mit Live events ueberpruefen

Dass eine Variation in Ihrem Browser erscheint, garantiert nicht, dass Kameleoon den Besuch getrackt hat. Pruefen Sie Live events in der Kameleoon-App, um zu bestaetigen, dass Kameleoon das Event empfangen hat.

1. Gehen Sie in der Kameleoon-App zu Insights > Live events.
2. Waehlen Sie Ihr Projekt aus.
3. Filtern Sie nach dem Event-Typ Experiment.
4. Suchen Sie nach einer Zeile mit einem aktuellen Zeitstempel und dem Namen Ihres Feature Flags.

Live events funktioniert unabhaengig davon, ob die App auf GitHub Pages oder auf Ihrem lokalen Rechner laeuft, da Kameleoon das Event in beiden Faellen ueber das Netzwerk empfaengt. Weitere Details zum Filtern und zu den Event-Typen finden Sie unter Live events.

​

Haeufige Probleme beheben

• Immer dieselbe Variation erscheint. Ihr Browser hat bereits einen visitorCode in einem Cookie gespeichert. Verwenden Sie ein privates Fenster, wechseln Sie den Browser, oder verwenden Sie das Simulationspanel, um eine andere Variation zu ueberpruefen, ohne Ihren Visitor Code zuruecksetzen zu muessen.
• Es erscheint keine Variation, oder Sie sehen immer die Standardvariation. Pruefen Sie, ob der ON/OFF-Schalter der Regel im Rollout Planner auf ON steht und ob der Status der Regel auf Active steht.
• Die App zeigt nach einer Regelaenderung weiterhin eine alte Konfiguration. Das SDK fragt Konfigurationsaktualisierungen in einem festen Intervall ab, standardmaessig alle 60 Minuten. Stellen Sie sicher, dass Sie in Ihrer Konfiguration einen kuerzeren updateInterval-Wert festgelegt und die Aenderung committet haben, und warten Sie dann mindestens die Laenge dieses Intervalls, bevor Sie erneut testen.
• Debug-Protokolle erscheinen nicht in der Konsole. Stellen Sie sicher, dass Ihre Import-Anweisung @kameleoon/javascript-sdk/full statt @kameleoon/javascript-sdk verwendet. Das Standardbundle entfernt Debug- und Info-Protokolle, um seine Groesse zu reduzieren.
• Eine Variation erscheint, aber Live events zeigt kein Event an. Das Simulationspanel zeigt eine Variation an, ohne ein trackbares Event zu senden, sodass es nie in Live events erscheint. Besuchen Sie die App normal, ohne das Simulationspanel, um ein Event zu erzeugen, das Sie ueberpruefen koennen.

​

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.