フィーチャーフラグ

フィーチャーフラグを使用すると、特定のユーザーまたはランダムに選択したユーザーの機能をリモートで有効または無効にすることができます。重要なのは、追加のコードデプロイやアプリストアの更新なしに、本番環境で機能のオンオフを切り替えられることです。これにより、新しい機能を安全かつ確信を持ってロールアウトできます。

ヒント

独自のフィーチャーフラグを作成する準備ができたら、フィーチャーフラグの作成をご確認ください。

前提条件

フィーチャーフラグの使用を開始するには、以下の最小SDKバージョンが必要です。

ユースケース

段階的なロールアウト

フィーチャーフラグを使用すると、一部のユーザーを対象に機能を段階的に有効にできます。たとえば、新機能をまずVIPユーザーにソフトローンチできます。この戦略により、新機能を全員に一度にリリースするリスクを軽減でき、バグを早期に発見しやすくなります。

たとえば、カスタマーサービスを迅速化するために、アプリに新しい「Live Chat Support」リンクを追加することにしたとします。この機能をすべての顧客に一度にリリースすることもできます。しかし、広範なリリースには次のようなリスクが伴います。

• サポートチームはまだトレーニング中ですが、リリース後は顧客がサポートチケットを作成できるようになります。サポートチームがさらに時間を必要とした場合の余裕がありません。
• 実際に新規のサポートケースがどれくらい発生するかわからないため、適切な人員を配置できない可能性があります。
• サポートチームの対応が追いつかなくなった場合でも、この機能をすぐに無効にする手段がありません。
• チャットウィジェットにバグが含まれている可能性があり、顧客に悪い体験をさせたくありません。

Brazeのフィーチャーフラグを使用すれば、機能を段階的にロールアウトし、これらのリスクをすべて軽減できます。

• サポートチームの準備が整ったら、「Live Chat Support」機能をオンにします。
• この新機能をユーザーの10%に限定して有効にし、人員配置が適切かどうかを判断します。
• バグがあった場合は、新しいリリースを急いで出荷する代わりに、機能をすぐに無効にできます。

この機能を段階的にロールアウトするには、「Live Chat Widget」という名前のフィーチャーフラグを作成します。

アプリのコードでは、Brazeのフィーチャーフラグが有効な場合にのみStart Live Chatボタンを表示します。

• javascript
• java
• kotlin
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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

Web SDK 7.0.0以降ではsubscribeToFeatureFlagsEventsを使用してください。subscribeToFeatureFlagsUpdatesは以前のパターンで、7.0.0で非推奨になりました。

受信できるイベントの一覧については、フィーチャーフラグの作成を参照してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

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

Android SDK 44.0.0以降ではsubscribeToFeatureFlagsEventsを使用してください。subscribeToFeatureFlagsUpdatesは以前のパターンで、44.0.0で非推奨になりました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

Android SDK 44.0.0以降ではsubscribeToFeatureFlagsEventsを使用してください。subscribeToFeatureFlagsUpdatesは以前のパターンで、44.0.0で非推奨になりました。

注

braze.featureFlags.featureFlagsまたはbraze.featureFlags.featureFlag(id:)を読み取ると、SDKが初期化後の処理を完了するまで呼び出し元のスレッドがブロックされます。メインスレッドやレイテンシーが重要なコンテキストでは、代わりにgetAllFeatureFlags(_:)を使用してください。

1
2
3
4
5

// Non-blocking — completion handler always delivers on the main thread.
braze.featureFlags.getAllFeatureFlags { flags in
  let liveChatEnabled = flags.first(where: { $0.id == "enable_live_chat" })?.enabled ?? false
  liveChatView.isHidden = !liveChatEnabled
}

Objective-Cの場合:

1
2
3

[braze.featureFlags getAllFeatureFlagsWithCompletion:^(NSArray<BRZFeatureFlag *> *flags) {
  // Use `flags` here.
}];

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

Swift SDK 19.0.0以降ではsubscribeToEvents(_:)を使用してください。subscribeToUpdates(_:)は以前のパターンで、19.0.0で非推奨になりました。

各イベントが発生するタイミングや、各更新理由、再試行状態、分析アクション、エラー理由の意味については、イベントサブスクリプションを参照してください。

アプリの変数をリモートで制御する

フィーチャーフラグを使用すると、本番環境でアプリの機能を変更できます。これは、アプリストアの審査があるために変更をすべてのユーザーにすばやくロールアウトできないモバイルアプリでは特に重要です。

たとえば、マーケティングチームが、現在のセールやプロモーションをアプリのナビゲーションに掲載したいとします。通常、開発者はあらゆる変更に1週間のリードタイムを必要とし、アプリストアの審査にも3日かかります。しかし、感謝祭、ブラックフライデー、サイバーマンデー、ハヌカー、クリスマス、元日がすべて2か月以内に集中しているため、このような厳しい締め切りには間に合いません。

フィーチャーフラグを使えば、アプリのナビゲーションリンクのコンテンツをBrazeで制御できるため、マーケティングマネージャーは数日ではなく数分で変更を加えられます。

この機能をリモートで設定するために、navigation_promo_linkという新しいフィーチャーフラグを作成し、次の初期プロパティを定義します。

アプリでは、BrazeのGetterメソッドを使用してこのフィーチャーフラグのプロパティを取得し、その値に基づいてナビゲーションリンクを作成します。

• javascript
• java
• kotlin
• swift

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(key: "link")
liveChatView.promoText = featureFlag?.stringProperty(key: "text")

これで、感謝祭の前日には、Brazeダッシュボードでこれらのプロパティ値を変更するだけで済みます。

その結果、次にユーザーがアプリを読み込むと、新しい感謝祭のセール情報が表示されます。

メッセージの調整

フィーチャーフラグを使用すると、機能のロールアウトとメッセージングを同期させ、プロダクトチームとマーケティングチームの連携を強化できます。フィーチャーフラグを通じて機能リリースとメッセージングを調整することで、両チームは戦略を一致させ、一貫したユーザー体験を生み出せます。

たとえば、ユーザー向けに新しいロイヤルティ報酬プログラムを開始するとします。マーケティングチームとプロダクトチームが、プロモーションメッセージのタイミングを機能のロールアウトと完全に一致させるのは難しい場合があります。しかし、キャンバスでフィーチャーフラグを使用すれば、プロダクトチームは高度なロジックを適用して特定のオーディエンスに対して機能を有効にし、マーケティングチームはそれと同じユーザーに向けた関連メッセージングを管理できます。

機能のロールアウトとメッセージングを効果的に調整するために、show_loyalty_programという新しいフィーチャーフラグを作成します。最初の段階的リリースでは、フィーチャーフラグをいつ、誰に対して有効にするかをキャンバスで制御します。現時点では、ロールアウトの割合は0%のままにし、ターゲットセグメントは選択しません。

次に、キャンバスでフィーチャーフラグステップを作成し、「High Value Customers」セグメントに対してshow_loyalty_programフィーチャーフラグを有効にします。

これで、このセグメントのユーザーに新しいロイヤルティプログラムが表示されるようになり、有効になった後はメールとアンケートが自動的に送信され、チームがフィードバックを収集できるようになります。

機能の実験

フィーチャーフラグを使用すると、新機能に関する仮説を実験して検証できます。トラフィックを2つ以上のグループに分割することで、グループ間でフィーチャーフラグの影響を比較し、その結果に基づいて最適な対応策を判断できます。

フィーチャーフラグ実験では、最大9つのグループ（コントロールグループ1つと最大8つのバリアント）を設定できます。

A/Bテストは、変数の複数のバージョンに対するユーザーの反応を比較できる強力なツールです。

この例では、チームがeコマースアプリ向けに新しいチェックアウトフローを構築しました。ユーザー体験が向上すると確信していますが、アプリの収益への影響を測定するためにA/Bテストを実施したいと考えています。

まず、enable_checkout_v2という新しいフィーチャーフラグを作成します。オーディエンスやロールアウトの割合は追加しません。代わりに、フィーチャーフラグ実験を使用してトラフィックを分割し、機能を有効にして、結果を測定します。

アプリでは、フィーチャーフラグが有効かどうかを確認し、その応答に基づいてチェックアウトフローを切り替えます。

• javascript
• java
• kotlin
• swift

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

A/Bテストはフィーチャーフラグ実験で設定します。

これで、ユーザーの50%には従来の体験が、残りの50%には新しい体験が表示されます。その後、2つのバリアントを分析して、どちらのチェックアウトフローのコンバージョン率が高かったかを判断できます。

コンバージョン率は、メッセージの全受信者と比較して、定義されたイベントが発生した回数の割合です。この定義されたイベントは、キャンペーンを作成するときに決定します。

勝者が決まったら、このキャンペーンを停止し、フィーチャーフラグのロールアウトの割合をすべてのユーザーに対して100%に引き上げます。その間に、開発チームが次回のアプリリリースでこれをハードコーディングします。

セグメンテーション

Feature Flagフィルターを使用すると、ユーザーがフィーチャーフラグを有効にしているかどうかに基づいて、セグメントを作成したり、メッセージングのターゲットを設定したりできます。たとえば、アプリのプレミアムコンテンツを制御するフィーチャーフラグがあるとします。フィーチャーフラグが有効になっていないユーザーを絞り込むセグメントを作成し、そのセグメントにプレミアムコンテンツを閲覧するためにアカウントをアップグレードするよう促すメッセージを送信できます。

1. セグメントまたはメッセージのオーディエンスを開きます。
2. Feature Flagフィルターを追加します。
3. フィーチャーフラグを選択します。
4. フィーチャーフラグが有効なユーザーを含めるには比較演算子をisに、有効でないユーザーを含めるにはis notに設定します。

セグメントでのフィルタリングの詳細については、セグメントの作成を参照してください。

注

再帰的なセグメントを防ぐため、他のフィーチャーフラグを参照するセグメントは作成できません。

プランの制限

無料プランと有料プランにおけるフィーチャーフラグの制限は以下のとおりです。

以下のいずれかに該当する場合、フィーチャーフラグはアクティブとみなされ、制限数にカウントされます。

• ロールアウトが0%を超えている
• アクティブなキャンバスで使用されている
• アクティブな実験で使用されている

同じフィーチャーフラグが複数の条件に該当する場合でも (たとえば、キャンバスで使用されていて、かつロールアウトが50%の場合など)、制限数には1つのアクティブなフィーチャーフラグとしてのみカウントされます。

注

フィーチャーフラグの有料版を購入するには、Brazeのアカウントマネージャーにお問い合わせいただくか、Brazeダッシュボードでアップグレードをリクエストしてください。