Skip to content

Feature-Flags

Feature-Flags ermöglichen es Ihnen, Funktionen für eine bestimmte oder zufällige Auswahl von Nutzer:innen aus der Ferne zu aktivieren oder zu deaktivieren. Wichtig ist, dass Sie damit ein Feature in der Produktion ein- und ausschalten können, ohne zusätzlichen Code zu implementieren oder Updates im App Store durchzuführen. Dies erlaubt es Ihnen, neue Features sicher und zuverlässig einzuführen.

Voraussetzungen

Dies sind die SDK-Versionen, die Sie mindestens benötigen, um Feature-Flags verwenden zu können:

Anwendungsfälle

Schrittweise Einführungen

Verwenden Sie Feature-Flags, um Features schrittweise für eine Stichprobenpopulation zu aktivieren. Sie können zum Beispiel ein neues Feature zuerst für Ihre VIP-Nutzer:innen einführen. Diese Strategie mindert die Risiken, die mit der gleichzeitigen Bereitstellung neuer Features für alle verbunden sind, und hilft, Fehler frühzeitig zu erkennen.

Bewegtes Bild eines Rollout-Verkehrsreglers, der von 0 % auf 100 % läuft.

Nehmen wir zum Beispiel an, wir haben beschlossen, unserer App einen neuen Link „Live Chat Support“ hinzuzufügen, um den Dienst für unsere Kund:innen zu beschleunigen. Wir könnten dieses Feature für alle Kund:innen auf einmal freigeben. Eine breite Veröffentlichung birgt jedoch Risiken, wie z. B.:

  • Unser Support-Team ist noch in der Ausbildung und Kund:innen können nach der Veröffentlichung Support-Tickets erstellen. Das gibt uns keinen Spielraum, falls das Support-Team mehr Zeit benötigt.
  • Wir wissen nicht, wie viele neue Support-Fälle wir tatsächlich erhalten werden, sodass wir möglicherweise nicht ausreichend mit Personal ausgestattet sind.
  • Wenn unser Support-Team überfordert ist, haben wir keine Strategie, dieses Feature schnell wieder abzuschalten.
  • Es könnte sein, dass das Chat-Widget Fehler enthält, und wir möchten nicht, dass Kund:innen ein negatives Erlebnis haben.

Mit den Feature-Flags von Braze können wir das Feature stattdessen schrittweise einführen und all diese Risiken abmildern:

  • Wir werden das Feature „Live-Chat-Support“ einschalten, sobald das Support-Team sich bereit erklärt.
  • Wir werden dieses neue Feature nur für 10 % der Nutzer:innen aktivieren, um festzustellen, ob wir angemessen besetzt sind.
  • Wenn es Fehler gibt, können wir das Feature schnell deaktivieren, anstatt überstürzt eine neue Version zu veröffentlichen.

Um dieses Feature schrittweise einzuführen, können wir ein Feature-Flag erstellen namens „Live Chat Widget“.

Feature-Flag-Details für ein Beispiel mit dem Namen „Live Chat Widget“. Die ID lautet enable_live_chat. Diese Feature-Flag-Beschreibung besagt, dass das Live-Chat-Widget auf der Support-Seite angezeigt wird.

In unserem Code für die App wird der Button Start Live Chat nur angezeigt, wenn das Feature-Flag von Braze aktiviert ist:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import {useState} from "react";
import * as braze from "@braze/web-sdk";

// Get the initial value from the Braze SDK
const featureFlag = braze.getFeatureFlag("enable_live_chat");
const [liveChatEnabled, setLiveChatEnabled] = useState(featureFlag.enabled);

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates(() => {
    const newValue = braze.getFeatureFlag("enable_live_chat").enabled;
    setLiveChatEnabled(newValue);
});

// Only show the Live Chat if the Braze SDK determines it is enabled
return (<>
  Need help? <button>Email Our Team</button>
  {liveChatEnabled && <button>Start Live Chat</button>}
</>)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Get the initial value from the Braze SDK
FeatureFlag featureFlag = braze.getFeatureFlag("enable_live_chat");
Boolean liveChatEnabled = featureFlag != null && featureFlag.getEnabled();

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates(event -> {
  FeatureFlag newFeatureFlag = braze.getFeatureFlag("enable_live_chat");
  Boolean newValue = newFeatureFlag != null && newFeatureFlag.getEnabled();
  liveChatEnabled = newValue;
});

// Only show the Live Chat view if the Braze SDK determines it is enabled
if (liveChatEnabled) {
  liveChatView.setVisibility(View.VISIBLE);
} else {
  liveChatView.setVisibility(View.GONE);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Get the initial value from the Braze SDK
val featureFlag = braze.getFeatureFlag("enable_live_chat")
var liveChatEnabled = featureFlag?.enabled

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates() { event ->
  val newValue = braze.getFeatureFlag("enable_live_chat")?.enabled
  liveChatEnabled = newValue
}

// Only show the Live Chat view if the Braze SDK determines it is enabled
if (liveChatEnabled) {
  liveChatView.visibility = View.VISIBLE
} else {
  liveChatView.visibility = View.GONE
}

1
2
3
4
5
6
7
8
9
10
11
12
// Get the initial value from the Braze SDK
let featureFlag = braze.featureFlags.featureFlag(id: "enable_live_chat")
var liveChatEnabled = featureFlag?.enabled ?? false

// Listen for updates from the Braze SDK
braze.featureFlags.subscribeToUpdates() { _ in
  let newValue = braze.featureFlags.featureFlag(id: "enable_live_chat")?.enabled ?? false
  liveChatEnabled = newValue
}

// Only show the Live Chat view if the Braze SDK determines it is enabled
liveChatView.isHidden = !liveChatEnabled

App-Variablen aus der Ferne steuern

Verwenden Sie Feature-Flags, um die Funktionalität Ihrer App in der Produktion zu ändern. Dies kann besonders wichtig für mobile Apps sein, bei denen die Genehmigung des App Stores eine schnelle Einführung von Änderungen für alle Nutzer:innen verhindert.

Nehmen wir zum Beispiel an, dass unser Marketing-Team unsere aktuellen Verkäufe und Aktionen in der Navigation unserer App auflisten möchte. Normalerweise benötigen unsere Entwickler:innen eine Woche Vorlaufzeit für alle Änderungen und drei Tage für eine Überprüfung im App Store. Aber mit Thanksgiving, Black Friday, Cyber Monday, Chanukka, Weihnachten und Neujahr, die alle innerhalb von zwei Monaten stattfinden, werden wir diese engen Fristen nicht einhalten können.

Mit Feature-Flags können wir Braze den Inhalt unseres App-Navigationslinks bestimmen lassen, sodass unser Marketing-Manager Änderungen in Minuten statt in Tagen vornehmen kann.

Um dieses Feature remote zu konfigurieren, erstellen wir ein neues Feature-Flag namens navigation_promo_link und definieren die folgenden anfänglichen Eigenschaften:

Feature-Flag mit Link- und Texteigenschaften, die zu einer allgemeinen Verkaufsseite führen.

In unserer App werden wir Getter-Methoden von Braze verwenden, um die Eigenschaften dieses Feature-Flags abzurufen und die Navigationslinks auf der Grundlage dieser Werte zu erstellen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import * as braze from "@braze/web-sdk";
import {useState} from "react";

const featureFlag = braze.getFeatureFlag("navigation_promo_link");
// Check if the feature flag is enabled
const [promoEnabled, setPromoEnabled] = useState(featureFlag.enabled);
// Read the "link" property
const [promoLink, setPromoLink] = useState(featureFlag.getStringProperty("link"));
// Read the "text" property
const [promoText, setPromoText] = useState(featureFlag.getStringProperty("text"));

return (<>
  <div>
    <a href="/">Home</a>
    { promoEnabled && <a href={promoLink}>{promoText}</a> }
    <a href="/products">Products</a>
    <a href="/categories">Categories
  </div>
</>)
1
2
3
4
5
6
7
8
9
10
// liveChatView is the View container for the Live Chat UI
FeatureFlag featureFlag = braze.getFeatureFlag("navigation_promo_link");
if (featureFlag != null && featureFlag.getEnabled()) {
  liveChatView.setVisibility(View.VISIBLE);
} else {
  liveChatView.setVisibility(View.GONE);
}
liveChatView.setPromoLink(featureFlag.getStringProperty("link"));
liveChatView.setPromoText(featureFlag.getStringProperty("text"));

1
2
3
4
5
6
7
8
9
// liveChatView is the View container for the Live Chat UI
val featureFlag = braze.getFeatureFlag("navigation_promo_link")
if (featureFlag?.enabled == true) {
  liveChatView.visibility = View.VISIBLE
} else {
  liveChatView.visibility = View.GONE
}
liveChatView.promoLink = featureFlag?.getStringProperty("link")
liveChatView.promoText = featureFlag?.getStringProperty("text")
1
2
3
4
5
6
7
8
let featureFlag = braze.featureFlags.featureFlag(id: "navigation_promo_link")
if let featureFlag {
  liveChatView.isHidden = !featureFlag.enabled
} else {
  liveChatView.isHidden = true
}
liveChatView.promoLink = featureFlag?.stringProperty("link")
liveChatView.promoText = featureFlag?.stringProperty("text")

Jetzt, am Tag vor Thanksgiving, müssen wir nur noch die Werte dieser Eigenschaften im Braze-Dashboard ändern.

Feature-Flag mit Link- und Texteigenschaften, die zu einer Thanksgiving-Verkaufsseite führen.

Wenn nun das nächste Mal jemand die App lädt, werden die neuen Thanksgiving-Angebote angezeigt.

Nachrichtenkoordination

Verwenden Sie Feature-Flags, um das Rollout eines Features und das Messaging zu synchronisieren und die Zusammenarbeit zwischen Produkt- und Marketing-Teams zu stärken. Durch die Koordination von Feature-Releases und Messaging über Feature-Flags können beide Teams ihre Strategien aufeinander abstimmen und konsistente Nutzererlebnisse schaffen.

Nehmen wir zum Beispiel an, dass wir ein neues Kundenbindungs-Programm für unsere Nutzer:innen einführen wollen. Für Marketing- und Produkt-Teams kann es schwierig sein, das Timing von Werbe-Messaging mit der Einführung eines Features perfekt zu koordinieren. Mit Feature-Flags in Canvas kann unser Produkt-Team jedoch eine ausgeklügelte Logik anwenden, um ein Feature für eine bestimmte Zielgruppe zu aktivieren, während unser Marketing-Team das zugehörige Messaging an dieselben Nutzer:innen steuert.

Um die Einführung von Features und Messaging effektiv zu koordinieren, erstellen wir ein neues Feature-Flag namens show_loyalty_program. Für unsere anfängliche stufenweise Veröffentlichung werden wir Canvas die Kontrolle darüber überlassen, wann und für wen das Feature-Flag aktiviert wird. Für den Moment belassen wir den Rollout-Prozentsatz bei 0 % und wählen keine Targeting-Segmente aus.

Ein Feature-Flag mit dem Namen „Loyalty Rewards Program“. Die ID lautet show_loyalty_program, und die Beschreibung besagt, dass dies das neue Kundenbindungs-Programm auf dem Startbildschirm und der Profilseite anzeigt.

Anschließend erstellen wir in Canvas einen Feature-Flag-Schritt, der das show_loyalty_program-Feature-Flag für unser Segment „High Value Customers“ aktiviert:

Ein Beispiel für ein Canvas mit einem Schritt zur Segmentierung der Zielgruppen, bei dem das Segment der hochwertigen Kund:innen das show_loyalty_program-Feature-Flag aktiviert.

Die Nutzer:innen dieses Segments werden nun das neue Kundenbindungs-Programm sehen, und nach dessen Aktivierung werden automatisch eine E-Mail und eine Umfrage verschickt, damit unsere Teams Feedback einholen können.

Experimentieren mit Features

Verwenden Sie Feature-Flags, um zu experimentieren und Ihre Hypothesen über Ihr neues Feature zu bestätigen. Wenn Sie den Datenverkehr in zwei oder mehr Gruppen aufteilen, können Sie die Auswirkungen eines Feature-Flags in den verschiedenen Gruppen vergleichen und anhand der Ergebnisse die beste Vorgehensweise festlegen.

Ein A/B-Test ist ein leistungsstarkes Instrument, das die Reaktionen der Nutzer:innen auf mehrere Versionen einer Variablen vergleicht.

In diesem Beispiel hat unser Team einen neuen Checkout-Flow für unsere E-Commerce-App erstellt. Obwohl wir sicher sind, dass er das Nutzererlebnis verbessert, möchten wir einen A/B-Test durchführen, um die Auswirkungen auf den Umsatz unserer App zu messen.

Zunächst erstellen wir ein neues Feature-Flag namens enable_checkout_v2. Wir fügen keine Zielgruppe und keinen Rollout-Prozentsatz hinzu. Stattdessen verwenden wir ein Feature-Flag-Experiment, um den Datenverkehr aufzuteilen, das Feature zu aktivieren und das Ergebnis zu messen.

In unserer App prüfen wir, ob das Feature-Flag aktiviert ist oder nicht, und ändern den Checkout-Flow entsprechend der Antwort:

1
2
3
4
5
6
7
8
9
import * as braze from "@braze/web-sdk";

const featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag?.enabled) {
  return <NewCheckoutFlow />
} else {
  return <OldCheckoutFlow />
}
1
2
3
4
5
6
7
FeatureFlag featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag != null && featureFlag.getEnabled()) {
  return new NewCheckoutFlow();
} else {
  return new OldCheckoutFlow();
}
1
2
3
4
5
6
7
val featureFlag = braze.getFeatureFlag("enable_checkout_v2")
braze.logFeatureFlagImpression("enable_checkout_v2")
if (featureFlag?.enabled == true) {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}
1
2
3
4
5
6
7
let featureFlag = braze.featureFlags.featureFlag(id: "enable_checkout_v2")
braze.featureFlags.logFeatureFlagImpression(id: "enable_checkout_v2")
if let featureFlag, featureFlag.enabled {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}

Wir werden unseren A/B-Test in einem Feature-Flag-Experiment einrichten.

Jetzt werden 50 % der Nutzer:innen das alte Erlebnis sehen, während die anderen 50 % das neue Erlebnis sehen werden. Anschließend können wir die beiden Varianten analysieren, um festzustellen, welcher Checkout-Ablauf zu einer höheren Konversionsrate geführt hat.

Die Konversionsrate ist der Prozentsatz der Häufigkeit, mit der ein definiertes Ereignis im Vergleich zu allen Empfänger:innen einer Nachricht eingetreten ist. Dieses definierte Ereignis wird festgelegt, wenn Sie die Campaign erstellen.

Ein Feature-Flag-Experiment, bei dem der Datenverkehr in zwei Gruppen zu je 50 Prozent aufgeteilt wird.

Sobald wir die Gewinnervariante ermittelt haben, können wir diese Campaign stoppen und den Rollout-Prozentsatz des Feature-Flags auf 100 % für alle Nutzer:innen erhöhen, während unser Entwicklerteam dies in unsere nächste App-Version fest einkodiert.

Segmentierung

Verwenden Sie den Filter Feature-Flag, um ein Segment zu erstellen oder Messaging an Nutzer:innen zu richten, je nachdem, ob bei ihnen ein Feature-Flag aktiviert ist. Nehmen wir zum Beispiel an, wir haben ein Feature-Flag, das Premium-Inhalte in unserer App steuert. Wir könnten ein Segment erstellen, das nach Nutzer:innen filtert, bei denen das Feature-Flag nicht aktiviert ist, und diesem Segment dann eine Nachricht schicken, in der sie aufgefordert werden, ihr Konto zu upgraden, um Premium-Inhalte zu sehen.

Weitere Informationen zum Filtern nach Segmenten finden Sie unter Erstellen eines Segments.

Beschränkungen je Tarif

Dies sind die Feature-Flag-Beschränkungen für den kostenlosen und den kostenpflichtigen Tarif.

Merkmal Kostenlose Version Kostenpflichtige Version
Aktive Feature-Flags 10 pro Workspace 110 pro Workspace
Aktive Campaign-Experimente 1 pro Workspace 100 pro Workspace
Feature-Flag-Canvas-Schritte Unbegrenzt Unbegrenzt

Ein Feature-Flag gilt als aktiv und wird auf Ihr Limit angerechnet, wenn einer der folgenden Punkte zutrifft:

  • Rollout ist mehr als 0 %
  • In einem aktiven Canvas verwendet
  • In einem aktiven Experiment verwendet

Selbst wenn dasselbe Feature-Flag mehrere Kriterien erfüllt, z. B. wenn es in einem Canvas verwendet wird und der Rollout 50 % beträgt, zählt es nur als 1 aktives Feature-Flag für Ihr Limit.

New Stuff!