フィーチャーフラグ

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

ヒント

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

前提条件

フィーチャーフラグの使用を開始するために必要な最小SDKバージョンは以下のとおりです。

ユースケース

段階的なロールアウト

フィーチャーフラグを使用して、サンプル母集団に対して機能を段階的に有効にできます。たとえば、VIPユーザーに対して最初に新機能をソフトローンチできます。この戦略は、一度にすべてのユーザーに新機能をリリースすることに伴うリスクを軽減し、バグを早期に発見するのに役立ちます。

たとえば、より迅速なカスタマーサービスのために、アプリに新しい「ライブチャットサポート」リンクを追加することを決定したとします。この機能をすべての顧客に一度にリリースすることもできますが、広範なリリースには以下のようなリスクがあります：

• サポートチームはまだトレーニング中であり、リリース後に顧客がサポートチケットを作成し始める可能性があります。サポートチームにもっと時間が必要な場合の余裕がありません。
• 新しいサポートケースの実際のボリュームが不明なため、適切な人員配置ができていない可能性があります。
• サポートチームが圧倒された場合、この機能をすぐにオフにする戦略がありません。
• チャットウィジェットにバグが含まれている可能性があり、顧客にネガティブな体験をさせたくありません。

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

• サポートチームの準備が整ったと言った時点で「ライブチャットサポート」機能をオンにします。
• 適切な人員配置かどうかを判断するために、ユーザーの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

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
}

注

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

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

アプリ変数のリモート制御

フィーチャーフラグを使用して、本番環境でアプリの機能を変更できます。これは特にモバイルアプリにとって重要です。アプリストアの承認により、すべてのユーザーに迅速に変更をロールアウトできないためです。

たとえば、マーケティングチームがアプリのナビゲーションに現在のセールやプロモーションを表示したいとします。通常、エンジニアは変更に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("link")
liveChatView.promoText = featureFlag?.stringProperty("text")

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

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

メッセージの連携

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

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

機能のロールアウトとメッセージングを効果的に連携させるために、show_loyalty_programという新しいフィーチャーフラグを作成します。初回の段階的リリースでは、キャンバスにフィーチャーフラグの有効化のタイミングと対象を制御させます。ここでは、ロールアウト率を0%のままにし、ターゲットセグメントは選択しません。

次に、キャンバスでフィーチャーフラグステップを作成し、「高価値顧客」セグメントに対して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%に引き上げ、エンジニアリングチームが次のアプリリリースにこれをハードコーディングします。

セグメンテーション

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

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

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

注

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

プランの制限事項

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

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

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

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

注

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