> ## Documentation Index > Fetch the complete documentation index at: https://docs.kameleoon.com/llms.txt > Use this file to discover all available pages before exploring further. # Demo: Feature Experimentation > Folgen Sie einem Schritt-fuer-Schritt-Tutorial mit einer TypeScript-Beispielanwendung, um Feature Flags in Kameleoon zu konfigurieren, sie in der App zu aktivieren und zu beobachten, wie sie das Seitenverhalten beeinflussen. 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](https://login.kameleoon.com/app/sign-up?utm_campaign=FM%26E%20Free%20Trial\&utm_source=documentation%20dev\&utm_medium=cta%20dev%20doc) 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](https://github.com)-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](https://github.com)-Konto angemeldet sein. 1. Klicken Sie im [Bouncing-Ball-Repository auf GitHub](https://github.com/kameleoon/bouncing-ball) auf **Fork**. Folgen Sie den Anweisungen, um Ihren eigenen Fork der Beispielanwendung in `github.com//bouncing-ball` zu erstellen. (Ersetzen Sie \ in diesem Tutorial durch den Namen Ihres GitHub-Kontos.) 2. Klicken Sie in Ihrem neuen `https://github.com//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://.github.io/bouncing-ball` sehen koennen! Sie sollte ungefaehr so aussehen: ![Bouncing-Ball-Demoanwendung](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/bouncing-ball.png) 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: ```js theme={null} const client = new KameleoonClient({ siteCode }); ``` Ersetzen Sie die Zeile durch den folgenden Code: ```js theme={null} 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](../technical-reference/technical-considerations#streaming-premium-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](https://app.kameleoon.com) 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://.github.io/bouncing-ball` als **URL of site** ein. Denken Sie daran, `` durch Ihren GitHub-Kontonamen zu ersetzen. Klicken Sie auf **Add**. 4. Kopieren Sie den auf der naechsten Seite angezeigten Site-Code. ![Seite Neues Projekt mit Site-Code](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/sitecode.png) 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://.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. Fehlerbehebung: Wenn Sie immer noch den Text **Slow + Random + Big** und die huepfenden Kreise sehen, versuchen Sie, die Seite in einem Inkognito-Fenster (oder im Privatmodus) zu oeffnen. ### 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](/user-manual/experimentation/feature-experimentation/configure-your-feature-flags/define-feature-variables) 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**. ![Menue Set Up](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images/bb-feature-flag.png) 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](/user-manual/experimentation/feature-experimentation/configure-your-feature-flags/define-feature-variations) 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](/user-manual/assets/goals/manage-goals) 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. ![Party-time-Variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-party-time.png) *Party-time-Variation* ![Hypnotize-Variation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-hypnotize.png) *Hypnotize-Variation* ![Standardvariation](https://storage.googleapis.com/kameleoon-storage-documentation/developers/images//bb-default-variation.png) *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](/user-manual/experimentation/feature-experimentation/create-and-manage-flags/create-a-feature-flag) 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.