Zum Inhalt springen

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-Mindestversionen, die Sie benötigen, um Feature-Flags zu verwenden:

Anwendungsfälle

Schrittweise Rollouts

Mit Feature-Flags können Sie Features schrittweise für eine Stichprobe Ihrer Nutzer:innen aktivieren. Sie können ein neues Feature zum Beispiel zunächst als Soft Launch nur für Ihre VIP-Nutzer:innen freigeben. So verringern Sie die Risiken, die entstehen, wenn ein neues Feature für alle gleichzeitig ausgeliefert wird, und entdecken Fehler frühzeitig.

Animierte Darstellung des Rollout-Traffic-Schiebereglers, der von 0 % auf 100 % bewegt wird.

Angenommen, wir möchten unserer App einen neuen Link „Live Chat Support“ hinzufügen, um den Kundenservice zu beschleunigen. Wir könnten dieses Feature für alle Kund:innen gleichzeitig freigeben. Eine breite Freigabe birgt jedoch Risiken, zum Beispiel:

  • Unser Support-Team befindet sich noch in der Schulung, und Kund:innen können nach der Freigabe sofort Support-Tickets eröffnen. Damit haben wir keinen Spielraum, falls das Support-Team mehr Zeit braucht.
  • Wir wissen nicht genau, wie viele neue Support-Anfragen eingehen werden, und sind daher möglicherweise personell nicht ausreichend aufgestellt.
  • Wenn unser Support-Team überlastet ist, haben wir keine Strategie, um das Feature schnell wieder zu deaktivieren.
  • Im Chat-Widget könnten Fehler auftreten, und wir möchten nicht, dass Kund:innen eine negative Erfahrung machen.

Mit Braze Feature-Flags können wir das Feature stattdessen schrittweise ausrollen und all diese Risiken verringern:

  • Wir aktivieren das Feature „Live Chat Support“ erst, wenn das Support-Team bereit ist.
  • Wir aktivieren das neue Feature zunächst nur für 10 % der Nutzer:innen, um festzustellen, ob unsere personelle Besetzung ausreicht.
  • Falls Fehler auftreten, können wir das Feature schnell deaktivieren, anstatt hastig ein neues Release auszuliefern.

Um dieses Feature schrittweise auszurollen, können wir ein Feature-Flag erstellen und es „Live Chat Widget“ nennen.

Feature-Flag-Details für ein Beispiel namens „Live Chat Widget“. Die ID lautet enable_live_chat. Laut Beschreibung des Feature-Flags wird das Live-Chat-Widget auf der Support-Seite angezeigt.

In unserem App-Code zeigen wir den Button Live-Chat starten nur an, wenn das Braze Feature-Flag aktiviert ist:

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);

// - Available in version 7.0.0+
// Listen for events from the Braze SDK
braze.subscribeToFeatureFlagsEvents((event) => {
  switch (event.type) {
    case braze.ChannelEventType.CACHE_REPLAY:
    case braze.ChannelEventType.CACHE_LOAD:
    case braze.ChannelEventType.DATA_UPDATED: {
      const flag = event.cacheSnapshot.featureFlags.find((f) => f.id === "enable_live_chat");
      setLiveChatEnabled(flag ? flag.enabled : false);
      break;
    }
    case braze.ChannelEventType.ERROR:
      if (event.reason === braze.ChannelErrorReason.FEATURE_DISABLED) {
        setLiveChatEnabled(false);
      }
      break;
  }
});

// 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>}
</>)

Verwenden Sie subscribeToFeatureFlagsEvents ab Web SDK 7.0.0. subscribeToFeatureFlagsUpdates ist das frühere Muster und seit Version 7.0.0 veraltet.

Eine vollständige Liste der Events, die Sie empfangen können, finden Sie unter Feature-Flags erstellen.

// Get the initial value from the Braze SDK
FeatureFlag featureFlag = braze.getFeatureFlag("enable_live_chat");
Boolean liveChatEnabled = featureFlag != null && featureFlag.getEnabled();

// - Available in version 44.0.0+
// Listen for events from the Braze SDK
braze.subscribeToFeatureFlagsEvents(event -> {
  if (event instanceof FeatureFlagsEvent.CacheReplay || event instanceof FeatureFlagsEvent.CacheLoad || event instanceof FeatureFlagsEvent.DataUpdated) {
    FeatureFlag newFeatureFlag = braze.getFeatureFlag("enable_live_chat");
    Boolean newValue = newFeatureFlag != null && newFeatureFlag.getEnabled();
    liveChatEnabled = newValue;
  } else if (event instanceof FeatureFlagsEvent.ErrorEvent) {
    FeatureFlagsEvent.ErrorEvent errorEvent = (FeatureFlagsEvent.ErrorEvent) event;
    if (errorEvent.getReason() instanceof ChannelErrorReason.FeatureDisabled) {
      liveChatEnabled = false;
    }
  }
});

// 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);
}

Verwenden Sie subscribeToFeatureFlagsEvents ab Android SDK 44.0.0. subscribeToFeatureFlagsUpdates ist das frühere Muster und seit Version 44.0.0 veraltet.

// Get the initial value from the Braze SDK
val featureFlag = braze.getFeatureFlag("enable_live_chat")
var liveChatEnabled = featureFlag?.enabled

// - Available in version 44.0.0+
// Listen for events from the Braze SDK
braze.subscribeToFeatureFlagsEvents { event ->
  when (event) {
    is FeatureFlagsEvent.CacheReplay, is FeatureFlagsEvent.CacheLoad, is FeatureFlagsEvent.DataUpdated -> {
      val newValue = braze.getFeatureFlag("enable_live_chat")?.enabled
      liveChatEnabled = newValue
    }
    is FeatureFlagsEvent.ErrorEvent -> {
      if (event.reason is ChannelErrorReason.FeatureDisabled) {
        liveChatEnabled = false
      }
    }
    else -> {}
  }
}

// Listen for updates from the Braze SDK
braze.subscribeToFeatureFlagsUpdates {
  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
}

Verwenden Sie subscribeToFeatureFlagsEvents ab Android SDK 44.0.0. subscribeToFeatureFlagsUpdates ist das frühere Muster und seit Version 44.0.0 veraltet.

// Get the initial value from the Braze SDK
let featureFlag = braze.featureFlags.featureFlag(id: "enable_live_chat")
var liveChatEnabled = featureFlag?.enabled ?? false

// - Available in version 19.0.0+
// Listen for events from the Braze SDK
let cancellable = braze.featureFlags.subscribeToEvents { event in
  switch event {
  case .cacheReplay, .cacheLoad, .dataUpdated:
    let newValue = braze.featureFlags.featureFlag(id: "enable_live_chat")?.enabled ?? false
    liveChatEnabled = newValue
  default:
    break
  }
}

// Listen for updates from the Braze SDK
let cancellable = 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

Verwenden Sie subscribeToEvents(_:) ab Swift SDK 19.0.0. subscribeToUpdates(_:) ist das frühere Muster und seit Version 19.0.0 veraltet.

Wann die einzelnen Events ausgelöst werden und was die jeweiligen Update-Gründe, Retry-Zustände, Analytics-Aktionen und Fehlergründe bedeuten, erfahren Sie unter Event-Abonnements.

App-Variablen aus der Ferne steuern

Mit Feature-Flags können Sie die Funktionalität Ihrer App in der Produktion anpassen. Das ist besonders für mobile Apps wichtig, bei denen die Freigabe durch den App Store verhindert, dass Änderungen schnell für alle Nutzer:innen ausgerollt werden.

Angenommen, unser Marketing-Team möchte unsere aktuellen Sales und Aktionen in der Navigation unserer App auflisten. Normalerweise benötigen unsere Entwickler:innen für jede Änderung eine Woche Vorlaufzeit plus drei Tage für die Prüfung im App Store. Da jedoch Thanksgiving, Black Friday, Cyber Monday, Chanukka, Weihnachten und Neujahr alle innerhalb von zwei Monaten liegen, können wir diese knappen Fristen nicht einhalten.

Mit Feature-Flags können wir den Inhalt des Navigationslinks unserer App über Braze steuern. So kann unser Marketing Manager Änderungen innerhalb von Minuten statt Tagen vornehmen.

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

Feature-Flag mit Link- und Text-Eigenschaften, die auf eine allgemeine Sale-Seite verweisen.

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

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>
</>)
// 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"));

// 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")
let featureFlag = braze.featureFlags.featureFlag(id: "navigation_promo_link")
if let featureFlag {
  liveChatView.isHidden = !featureFlag.enabled
} else {
  liveChatView.isHidden = true
}
liveChatView.promoLink = featureFlag?.stringProperty(key: "link")
liveChatView.promoText = featureFlag?.stringProperty(key: "text")

Am Tag vor Thanksgiving müssen wir jetzt nur noch diese Eigenschaftswerte im Braze-Dashboard ändern.

Feature-Flag mit Link- und Text-Eigenschaften, die auf eine Thanksgiving-Sale-Seite verweisen.

Wenn jemand die App das nächste Mal lädt, sieht er die neuen Thanksgiving-Angebote.

Nachrichtenkoordination

Mit Feature-Flags können Sie den Rollout eines Features und das zugehörige Messaging synchronisieren und die Zusammenarbeit zwischen Produkt- und Marketing-Teams stärken. Wenn Sie Feature-Releases und Messaging über Feature-Flags koordinieren, können beide Teams ihre Strategien aufeinander abstimmen und konsistente Nutzererlebnisse schaffen.

Angenommen, wir führen ein neues Kundenbindungs-Programm mit Rewards für unsere Nutzer:innen ein. Für Marketing- und Produkt-Teams kann es schwierig sein, das Timing der Werbenachrichten perfekt mit dem Rollout eines Features abzustimmen. Mit Feature-Flags in Canvas kann unser Produkt-Team jedoch ausgefeilte Logik anwenden, um ein Feature für eine bestimmte Zielgruppe zu aktivieren, während unser Marketing-Team die zugehörigen Nachrichten an genau diese Nutzer:innen steuert.

Um den Feature-Rollout und das Messaging effektiv zu koordinieren, erstellen wir ein neues Feature-Flag namens show_loyalty_program. Für unser erstes, gestaffeltes Release lassen wir Canvas steuern, wann und für wen das Feature-Flag aktiviert wird. Vorerst belassen wir den Rollout-Prozentsatz bei 0 % und wählen keine Zielsegmente aus.

Ein Feature-Flag namens „Loyalty Rewards Program“. Die ID lautet show_loyalty_program, und laut Beschreibung wird damit das neue Kundenbindungs-Programm auf dem Startbildschirm und der Profilseite angezeigt.

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

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

Nutzer:innen in diesem Segment sehen nun das neue Kundenbindungs-Programm. Nach der Aktivierung werden automatisch eine E-Mail und eine Umfrage versendet, damit unsere Teams Feedback sammeln können.

Feature-Experimente

Mit Feature-Flags können Sie experimentieren und Ihre Hypothesen zu einem neuen Feature bestätigen. Indem Sie den Traffic auf zwei oder mehr Gruppen aufteilen, können Sie die Auswirkungen eines Feature-Flags gruppenübergreifend vergleichen und anhand der Ergebnisse das beste Vorgehen bestimmen.

Bei Feature-Flag-Experimenten können Sie bis zu neun Gruppen insgesamt verwenden: eine Kontrollgruppe plus bis zu acht Varianten.

Ein A/B-Test ist ein leistungsstarkes Tool, das die Reaktionen von Nutzer:innen auf mehrere Versionen einer Variable vergleicht.

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

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

In unserer App prüfen wir, ob das Feature-Flag aktiviert ist, und tauschen den Checkout-Ablauf je nach Antwort aus:

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 />
}
FeatureFlag featureFlag = braze.getFeatureFlag("enable_checkout_v2");
braze.logFeatureFlagImpression("enable_checkout_v2");
if (featureFlag != null && featureFlag.getEnabled()) {
  return new NewCheckoutFlow();
} else {
  return new OldCheckoutFlow();
}
val featureFlag = braze.getFeatureFlag("enable_checkout_v2")
braze.logFeatureFlagImpression("enable_checkout_v2")
if (featureFlag?.enabled == true) {
  return NewCheckoutFlow()
} else {
  return OldCheckoutFlow()
}
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()
}

Unseren A/B-Test richten wir in einem Feature-Flag-Experiment ein.

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

Die Konversionsrate gibt in Prozent an, wie oft ein definiertes Ereignis im Verhältnis zu allen Empfänger:innen einer Nachricht eingetreten ist. Dieses definierte Ereignis wird festgelegt, wenn Sie die Campaign erstellen.

Ein Feature-Flag-Experiment, das den Traffic auf zwei Gruppen mit jeweils 50 Prozent aufteilt.

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

Segmentierung

Verwenden Sie den Filter Feature-Flag, um ein Segment zu erstellen oder Nachrichten gezielt an Nutzer:innen zu senden, je nachdem, ob bei ihnen ein Feature-Flag aktiviert ist. Angenommen, Sie haben ein Feature-Flag, das Premium-Inhalte in Ihrer App steuert. Sie könnten ein Segment erstellen, das nach Nutzer:innen filtert, bei denen das Feature-Flag nicht aktiviert ist, und diesem Segment dann eine Nachricht senden, in der Sie sie auffordern, ihr Konto zu upgraden, um Premium-Inhalte anzusehen.

  1. Öffnen Sie Ihr Segment oder Ihre Nachrichtenzielgruppe.
  2. Fügen Sie den Filter Feature-Flag hinzu.
  3. Wählen Sie das Feature-Flag aus.
  4. Setzen Sie den Vergleichsoperator auf ist, um Nutzer:innen einzuschließen, bei denen das Feature-Flag aktiviert ist, oder auf ist nicht, um Nutzer:innen einzuschließen, bei denen es nicht aktiviert ist. Braze-Segmentierungstool mit einem Filter für den Aktivierungswert eines Feature-Flags.

Weitere Informationen zum Filtern in Segmenten finden Sie unter Ein Segment erstellen.

Plan-Einschränkungen

Dies sind die Einschränkungen für Feature-Flags in der kostenlosen und der kostenpflichtigen Version.

Feature 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:

  • Der Rollout liegt über 0 %
  • Es wird in einem aktiven Canvas verwendet
  • Es wird in einem aktiven Experiment verwendet

Auch wenn dasselbe Feature-Flag mehrere Kriterien erfüllt, etwa wenn es in einem Canvas verwendet wird und der Rollout bei 50 % liegt, wird es nur als 1 aktives Feature-Flag auf Ihr Limit angerechnet.

New Stuff!