Skip to content

フィーチャーフラグを作成する

フィーチャーフラグを使用すると、選択したユーザーに対してリモートで機能を有効または無効にすることができます。Brazeダッシュボードで新しいフィーチャーフラグを作成します。名前とID、ターゲットオーディエンス、およびこの機能を有効にするユーザーの割合を指定します。その後、アプリまたはWebサイトのコードで同じIDを使用して、ビジネスロジックの特定の部分を条件付きで実行できます。フィーチャーフラグおよびBrazeでの使用方法の詳細については、フィーチャーフラグについてを参照してください。

前提条件

SDKバージョン

フィーチャーフラグを使用するには、SDKが少なくとも以下の最小バージョンに更新されていることを確認してください。

Brazeの権限

ダッシュボードでフィーチャーフラグを管理するには、管理者であるか、以下の権限を持っている必要があります。

権限 できること
Manage Feature Flags フィーチャーフラグの表示、作成、編集。
Access キャンペーン, キャンバス, Cards, Feature Flags, セグメント, Media Library 利用可能なフィーチャーフラグのリストの表示。

フィーチャーフラグの作成

ステップ1：新しいフィーチャーフラグを作成する

メッセージング > フィーチャーフラグに移動し、フィーチャーフラグを作成を選択します。

既存のフィーチャーフラグと新しいフィーチャーフラグの作成方法を示すデータテーブル。

ステップ2：詳細を入力する

フィーチャーフラグの詳細で、フィーチャーフラグの名前、ID、説明を入力します。

フィーチャーフラグに名前、ID、説明、プロパティを追加できるフォーム。

フィールド 説明
名前 マーケターや管理者向けの、人間が読めるタイトルです。
ID この機能がユーザーに対して有効かどうかをコードで確認するために使用する一意のIDです。このIDは後から変更できないため、続行する前にIDの命名ベストプラクティスを確認してください。
説明 フィーチャーフラグに関するコンテキストを提供するオプションの説明です。
プロパティ フィーチャーフラグをリモートで設定するオプションのプロパティです。キャンバスステップやフィーチャーフラグの実験で上書きできます。

ステップ2a：カスタムプロパティを作成する

プロパティで、機能が有効な場合にBraze SDKを通じてアプリがアクセスできるカスタムプロパティをオプションで作成できます。各変数には文字列、ブール値、画像、タイムスタンプ、JSON、または数値を割り当てることができ、デフォルト値を設定することもできます。

次の例では、フィーチャーフラグがカスタムプロパティを使用してeコマースストアの在庫切れバナーを表示しています。

プロパティ名 タイプ 値
banner_height number 75
banner_color string blue
banner_text string Widgets are out of stock until July 1.
dismissible boolean false
homepage_icon image http://s3.amazonaws.com/[bucket_name]/
account_start timestamp 2011-01-01T12:00:00Z
footer_settings JSON { "colors": [ "red", "blue", "green" ], "placement": 123 }

ステップ4：ターゲットとなるセグメントを選択する

フィーチャーフラグをロールアウトする前に、ターゲットとするユーザーのセグメントを選択する必要があります。新しく作成したフラグでルールを追加を選択し、フィルターグループとセグメントのドロップダウンメニューを使用して、ターゲットオーディエンスからユーザーをフィルタリングします。複数のフィルターを追加して、オーディエンスをさらに絞り込むことができます。

セグメントとフィルターを追加できるロールアウトトラフィックというラベルのテキストボックス。

ステップ5：ロールアウトトラフィックを設定する

デフォルトでは、フィーチャーフラグは常に無効であり、機能リリースの日付をユーザーの全体的なアクティベーションから分離できます。ロールアウトを開始するには、ロールアウトトラフィックセクションでテキストボックスにパーセンテージを入力します。これにより、選択したセグメント内のランダムなユーザーの中から、この新機能を受け取るユーザーのパーセンテージが選択されます。

マルチルールフィーチャーフラグロールアウト

マルチルールフィーチャーフラグロールアウトを使用すると、ユーザーを評価するための一連のルールを定義でき、正確なセグメンテーションと制御されたフィーチャーリリースが可能になります。この方法は、同じフィーチャーを多様なオーディエンスにデプロイする場合に最適です。

評価順序

フィーチャーフラグのルールは、リストに表示されている順番で上から下に評価されます。ユーザーは、最初に一致したルールに適用されます。どのルールにも一致しない場合、そのユーザーの適格性はデフォルトの「Everyone Else」ルールによって決定されます。

ユーザーの適格性判定

  • ユーザーが最初のルールの条件を満たした場合、そのユーザーはすぐにフィーチャーフラグを受け取る対象となります。
  • ユーザーが最初のルールに該当しない場合、2番目のルールに対して評価され、以降同様に続きます。

この順次評価は、ユーザーがいずれかのルールに該当するか、リストの最下部にある「Everyone Else」ルールに到達するまで続きます。

「Everyone Else」ルール

「Everyone Else」ルールはデフォルトとして機能します。ユーザーがそれ以前のどのルールにも該当しない場合、フィーチャーフラグの適格性は「Everyone Else」ルールのトグル設定によって決定されます。たとえば、「Everyone Else」ルールがデフォルト状態で「Off」にトグルされている場合、他のルールの条件を満たさないユーザーはセッション開始時にフィーチャーフラグを受け取りません。

ルールの並べ替え

デフォルトでは、ルールは作成された順序で並べられますが、ダッシュボードでドラッグ＆ドロップして並べ替えることができます。

フィーチャーフラグにルールを追加する画面。

複数のルールとEveryone Elseルールが追加されたフィーチャーフラグのサマリー画面。

マルチルールフィーチャーフラグのユースケース

チェックアウトページを段階的にリリースする

eコマースブランドで働いていて、安定性を確保しながら異なる地域に新しいチェックアウトページをロールアウトしたいとします。マルチルールフィーチャーフラグを使用して、以下のように設定できます。

  • ルール1： 米国セグメントを100%に設定します。
  • ルール2： ブラジルのユーザーの50%にセグメントを設定し、全員が一度にフローを受け取らないようにします。
  • ルール3（Everyone Else）： その他すべてのユーザーに対して、「Everyone Else」ルールをオンにトグルし、15%に設定します。これにより、すべてのユーザーの一部が新しいフローでチェックアウトできます。

社内テスターに最初にリーチする

プロダクトマネージャーとして、新製品をリリースする際に社内テスターが常にフィーチャーフラグを受け取るようにしたいとします。社内テスターのセグメントを最初のルールに追加し、100%に設定することで、すべてのフィーチャーロールアウトで社内テスターが対象となります。

フィーチャーフラグの「enabled」フィールドの使用

フィーチャーフラグを定義したら、アプリやサイトを設定して、特定のユーザーに対してそのフィーチャーフラグが有効かどうかを確認するようにします。有効になったら、ユースケースに応じて何らかのアクションを設定するか、フィーチャーフラグの変数プロパティを参照します。Braze SDKは、フィーチャーフラグのステータスとそのプロパティをアプリに取り込むためのゲッターメソッドを提供します。

フィーチャーフラグはセッション開始時に自動的に更新されるため、起動時に機能の最新バージョンを表示できます。SDKはこれらの値をキャッシュし、オフラインの状態でも使用できるようにします。

たとえば、アプリに新しいタイプのユーザープロファイルをロールアウトするとします。IDをexpanded_user_profileに設定します。次に、この新しいユーザープロファイルを特定のユーザーに表示するかどうかをアプリで確認します。以下に例を示します。

1
2
3
4
5
6

const featureFlag = braze.getFeatureFlag("expanded_user_profile");
if (featureFlag?.enabled) {
  console.log(`expanded_user_profile is enabled`);
} else {
  console.log(`expanded_user_profile is not enabled`);
}

1
2
3
4
5
6

let featureFlag = braze.featureFlags.featureFlag(id: "expanded_user_profile")
if featureFlag?.enabled == true {
  print("expanded_user_profile is enabled")
} else {
  print("expanded_user_profile is not enabled")
}

1
2
3
4
5
6

FeatureFlag featureFlag = braze.getFeatureFlag("expanded_user_profile");
if (featureFlag != null && featureFlag.getEnabled()) {
  Log.i(TAG, "expanded_user_profile is enabled");
} else {
  Log.i(TAG, "expanded_user_profile is not enabled");
}

1
2
3
4
5
6

val featureFlag = braze.getFeatureFlag("expanded_user_profile")
if (featureFlag?.enabled == true) {
  Log.i(TAG, "expanded_user_profile is enabled.")
} else {
  Log.i(TAG, "expanded_user_profile is not enabled.")
}

1
2
3
4
5
6

const featureFlag = await Braze.getFeatureFlag("expanded_user_profile");
if (featureFlag?.enabled) {
  console.log(`expanded_user_profile is enabled`);
} else {
  console.log(`expanded_user_profile is not enabled`);
}

1
2
3
4
5
6

var featureFlag = Appboy.AppboyBinding.GetFeatureFlag("expanded_user_profile");
if (featureFlag != null && featureFlag.Enabled) {
  Console.WriteLine("expanded_user_profile is enabled");
} else {
  Console.WriteLine("expanded_user_profile is not enabled");
}

1
2
3
4
5
6

const featureFlag = await BrazePlugin.getFeatureFlag("expanded_user_profile");
if (featureFlag?.enabled) {
  console.log(`expanded_user_profile is enabled`);
} else {
  console.log(`expanded_user_profile is not enabled`);
}

1
2
3
4
5
6

BrazeFeatureFlag? featureFlag = await braze.getFeatureFlagByID("expanded_user_profile");
if (featureFlag?.enabled == true) {
  print("expanded_user_profile is enabled");
} else {
  print("expanded_user_profile is not enabled");
}

1
2
3
4
5
6

featureFlag = m.braze.getFeatureFlag("expanded_user_profile")
if featureFlag <> invalid and featureFlag.enabled
  print "expanded_user_profile is enabled"
else
  print "expanded_user_profile is not enabled"
end if

フィーチャーフラグのインプレッションをログに記録する

ユーザーが新しい機能を操作する機会があった場合、または機能が無効になっている場合（A/Bテストのコントロールグループの場合）にユーザーが操作した__可能性がある__場合は、フィーチャーフラグのインプレッションを追跡します。フィーチャーフラグのインプレッションは、1セッションにつき1回のみ記録されます。

通常、このコード行は、アプリ内でフィーチャーフラグを参照する場所の直下に置くことができます。

1

braze.logFeatureFlagImpression("expanded_user_profile");

1

braze.featureFlags.logFeatureFlagImpression(id: "expanded_user_profile")

1

braze.logFeatureFlagImpression("expanded_user_profile");

1

braze.logFeatureFlagImpression("expanded_user_profile")

1

Braze.logFeatureFlagImpression("expanded_user_profile");

1

Appboy.AppboyBinding.LogFeatureFlagImpression("expanded_user_profile");

1

BrazePlugin.logFeatureFlagImpression("expanded_user_profile");

1

braze.logFeatureFlagImpression("expanded_user_profile");

1

m.Braze.logFeatureFlagImpression("expanded_user_profile");

プロパティにアクセスする

フィーチャーフラグのプロパティにアクセスするには、ダッシュボードで定義したタイプに応じて、以下のメソッドのいずれかを使用します。

指定したキーに対応する型のプロパティが存在しない場合、これらのメソッドはnullを返します。

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

// Returns the Feature Flag instance
const featureFlag = braze.getFeatureFlag("expanded_user_profile");

// Returns the String property
const stringProperty = featureFlag.getStringProperty("color");

// Returns the boolean property
const booleanProperty = featureFlag.getBooleanProperty("expanded");

// Returns the number property
const numberProperty = featureFlag.getNumberProperty("height");

// Returns the Unix UTC millisecond timestamp property as a number
const timestampProperty = featureFlag.getTimestampProperty("account_start");

// Returns the image property as a String of the image URL
const imageProperty = featureFlag.getImageProperty("homepage_icon");

// Returns the JSON object property as a FeatureFlagJsonPropertyValue
const jsonProperty = featureFlag.getJsonProperty("footer_settings");

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

// Returns the Feature Flag instance
let featureFlag: FeatureFlag = braze.featureFlags.featureFlag(id: "expanded_user_profile")

// Returns the string property
let stringProperty: String? = featureFlag.stringProperty(key: "color")

// Returns the boolean property
let booleanProperty: Bool? = featureFlag.boolProperty(key: "expanded")

// Returns the number property as a double
let numberProperty: Double? = featureFlag.numberProperty(key: "height")

// Returns the Unix UTC millisecond timestamp property as an integer
let timestampProperty: Int? = featureFlag.timestampProperty(key: "account_start")

// Returns the image property as a String of the image URL
let imageProperty: String? = featureFlag.imageProperty(key: "homepage_icon")

// Returns the JSON object property as a [String: Any] dictionary
let jsonObjectProperty: [String: Any]? = featureFlag.jsonObjectProperty(key: "footer_settings")

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

// Returns the Feature Flag instance
FeatureFlag featureFlag = braze.getFeatureFlag("expanded_user_profile");

// Returns the String property
String stringProperty = featureFlag.getStringProperty("color");

// Returns the boolean property
Boolean booleanProperty = featureFlag.getBooleanProperty("expanded");

// Returns the number property
Number numberProperty = featureFlag.getNumberProperty("height");

// Returns the Unix UTC millisecond timestamp property as a long
Long timestampProperty = featureFlag.getTimestampProperty("account_start");

// Returns the image property as a String of the image URL
String imageProperty = featureFlag.getImageProperty("homepage_icon");

// Returns the JSON object property as a JSONObject
JSONObject jsonObjectProperty = featureFlag.getJSONProperty("footer_settings");

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

// Returns the Feature Flag instance
val featureFlag = braze.getFeatureFlag("expanded_user_profile")

// Returns the String property
val stringProperty: String? = featureFlag.getStringProperty("color")

// Returns the boolean property
val booleanProperty: Boolean? = featureFlag.getBooleanProperty("expanded")

// Returns the number property
val numberProperty: Number? = featureFlag.getNumberProperty("height")

// Returns the Unix UTC millisecond timestamp property as a long
val timestampProperty: Long? = featureFlag.getTimestampProperty("account_start")

// Returns the image property as a String of the image URL
val imageProperty: String?  = featureFlag.getImageProperty("homepage_icon")

// Returns the JSON object property as a JSONObject
val jsonObjectProperty: JSONObject? = featureFlag.getJSONProperty("footer_settings")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Returns the String property
const stringProperty = await Braze.getFeatureFlagStringProperty("expanded_user_profile", "color");

// Returns the boolean property
const booleanProperty = await Braze.getFeatureFlagBooleanProperty("expanded_user_profile", "expanded");

// Returns the number property
const numberProperty = await Braze.getFeatureFlagNumberProperty("expanded_user_profile", "height");

// Returns the Unix UTC millisecond timestamp property as a number
const timestampProperty = await Braze.getFeatureFlagTimestampProperty("expanded_user_profile", "account_start");

// Returns the image property as a String of the image URL
const imageProperty = await Braze.getFeatureFlagImageProperty("expanded_user_profile", "homepage_icon");

// Returns the JSON object property as an object
const jsonObjectProperty = await Braze.getFeatureFlagJSONProperty("expanded_user_profile", "footer_settings");

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

// Returns the Feature Flag instance
var featureFlag = Appboy.AppboyBinding.GetFeatureFlag("expanded_user_profile");

// Returns the String property
var stringProperty = featureFlag.GetStringProperty("color");

// Returns the boolean property
var booleanProperty = featureFlag.GetBooleanProperty("expanded");

// Returns the number property as an integer
var integerProperty = featureFlag.GetIntegerProperty("height");

// Returns the number property as a double
var doubleProperty = featureFlag.GetDoubleProperty("height");

// Returns the Unix UTC millisecond timestamp property as a long
var timestampProperty = featureFlag.GetTimestampProperty("account_start");

// Returns the image property as a String of the image URL
var imageProperty = featureFlag.GetImageProperty("homepage_icon");

// Returns the JSON object property as a JSONObject
var jsonObjectProperty = featureFlag.GetJSONProperty("footer_settings");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Returns the String property
const stringProperty = await BrazePlugin.getFeatureFlagStringProperty("expanded_user_profile", "color");

// Returns the boolean property
const booleanProperty = await BrazePlugin.getFeatureFlagBooleanProperty("expanded_user_profile", "expanded");

// Returns the number property
const numberProperty = await BrazePlugin.getFeatureFlagNumberProperty("expanded_user_profile", "height");

// Returns the Unix UTC millisecond timestamp property as a number
const timestampProperty = await BrazePlugin.getFeatureFlagTimestampProperty("expanded_user_profile", "account_start");

// Returns the image property as a String of the image URL
const imageProperty = await BrazePlugin.getFeatureFlagImageProperty("expanded_user_profile", "homepage_icon");

// Returns the JSON object property as an object
const jsonObjectProperty = await BrazePlugin.getFeatureFlagJSONProperty("expanded_user_profile", "footer_settings");

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

// Returns the Feature Flag instance
BrazeFeatureFlag featureFlag = await braze.getFeatureFlagByID("expanded_user_profile");

// Returns the String property
var stringProperty = featureFlag.getStringProperty("color");

// Returns the boolean property
var booleanProperty = featureFlag.getBooleanProperty("expanded");

// Returns the number property
var numberProperty = featureFlag.getNumberProperty("height");

// Returns the Unix UTC millisecond timestamp property as an integer
var timestampProperty = featureFlag.getTimestampProperty("account_start");

// Returns the image property as a String of the image URL
var imageProperty = featureFlag.getImageProperty("homepage_icon");

// Returns the JSON object property as a Map<String, dynamic> collection
var jsonObjectProperty = featureFlag.getJSONProperty("footer_settings");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

' Returns the String property
color = featureFlag.getStringProperty("color")

' Returns the boolean property
expanded = featureFlag.getBooleanProperty("expanded")

' Returns the number property
height = featureFlag.getNumberProperty("height")

' Returns the Unix UTC millisecond timestamp property
account_start = featureFlag.getTimestampProperty("account_start")

' Returns the image property as a String of the image URL
homepage_icon = featureFlag.getImageProperty("homepage_icon")

' Returns the JSON object property
footer_settings = featureFlag.getJSONProperty("footer_settings")

すべてのフィーチャーフラグのリストを取得する

1
2
3
4

const features = getAllFeatureFlags();
for(const feature of features) {
  console.log(`Feature: ${feature.id}`, feature.enabled);
}

1
2
3
4

let features = braze.featureFlags.featureFlags
for let feature in features {
  print("Feature: \(feature.id)", feature.enabled)
}

1
2
3
4

List<FeatureFlag> features = braze.getAllFeatureFlags();
for (FeatureFlag feature: features) {
  Log.i(TAG, "Feature: ", feature.getId(), feature.getEnabled());
}

1
2
3
4

val featureFlags = braze.getAllFeatureFlags()
featureFlags.forEach { feature ->
  Log.i(TAG, "Feature: ${feature.id} ${feature.enabled}")
}

1
2
3
4

const features = await Braze.getAllFeatureFlags();
for(const feature of features) {
  console.log(`Feature: ${feature.id}`, feature.enabled);
}

1
2
3
4

List<FeatureFlag> features = Appboy.AppboyBinding.GetAllFeatureFlags();
foreach (FeatureFlag feature in features) {
  Console.WriteLine("Feature: {0} - enabled: {1}", feature.ID, feature.Enabled);
}

1
2
3
4

const features = await BrazePlugin.getAllFeatureFlags();
for(const feature of features) {
  console.log(`Feature: ${feature.id}`, feature.enabled);
}

1
2
3
4

List<BrazeFeatureFlag> featureFlags = await braze.getAllFeatureFlags();
featureFlags.forEach((feature) {
  print("Feature: ${feature.id} ${feature.enabled}");
});

1
2
3
4

features = m.braze.getAllFeatureFlags()
for each feature in features
      print "Feature: " + feature.id + " enabled: " + feature.enabled.toStr()
end for

フィーチャーフラグを更新する

セッションの途中で現在のユーザーのフィーチャーフラグを更新して、Brazeから最新の値を取得できます。

1
2
3
4
5

braze.refreshFeatureFlags(() => {
  console.log(`Feature flags have been refreshed.`);
}, () => {
  console.log(`Failed to refresh feature flags.`);
});

1
2
3
4
5
6
7
8

braze.featureFlags.requestRefresh { result in
  switch result {
  case .success(let features):
    print("Feature flags have been refreshed:", features)
  case .failure(let error):
    print("Failed to refresh feature flags:", error)
  }
}

1

braze.refreshFeatureFlags();

1

braze.refreshFeatureFlags()

1

Braze.refreshFeatureFlags();

1

Appboy.AppboyBinding.RefreshFeatureFlags();

1

BrazePlugin.refreshFeatureFlags();

1

braze.refreshFeatureFlags();

1

m.Braze.refreshFeatureFlags()

変更をリッスンする

SDKがフィーチャーフラグを更新するときにアプリをリッスンして更新するようにBraze SDKを構成できます。

これは、ユーザーがある機能を利用できなくなった場合にアプリを更新したい場合に便利です。たとえば、ある機能が有効かどうか、またはそのプロパティ値の1つに基づいて、アプリの状態を設定する場合です。

1
2
3
4
5
6

// Register an event listener
const subscriptionId = braze.subscribeToFeatureFlagsUpdates((features) => {
  console.log(`Features were updated`, features);
});
// Unregister this event listener
braze.removeSubscription(subscriptionId);

1
2
3
4
5
6
7

// Create the feature flags subscription
// - You must keep a strong reference to the subscription to keep it active
let subscription = braze.featureFlags.subscribeToUpdates { features in
  print("Feature flags were updated:", features)
}
// Cancel the subscription
subscription.cancel()

1
2
3
4
5
6

braze.subscribeToFeatureFlagsUpdates(event -> {
  Log.i(TAG, "Feature flags were updated.");
  for (FeatureFlag feature: event.getFeatureFlags()) {
    Log.i(TAG, "Feature: ", feature.getId(), feature.getEnabled());
  }
});

1
2
3
4
5
6

braze.subscribeToFeatureFlagsUpdates() { event ->
  Log.i(TAG, "Feature flags were updated.")
  event.featureFlags.forEach { feature ->
    Log.i(TAG, "Feature: ${feature.id}")
  }
}

1
2
3
4

// Register an event listener
Braze.addListener(braze.Events.FEATURE_FLAGS_UPDATED, (featureFlags) => {
  console.log(`featureFlagUpdates`, JSON.stringify(featureFlags));
});

変更をリッスンするには、Braze Configuration > Feature FlagsのGame Object NameとCallback Method Nameの値を、アプリケーションの対応する値に設定します。

1
2
3
4

// Register an event listener
BrazePlugin.subscribeToFeatureFlagUpdates((featureFlags) => {
    console.log(`featureFlagUpdates`, JSON.stringify(featureFlags));
});

アプリのDartコードでは、以下のサンプルコードを使用します。

1
2
3
4
5
6
7
8
9

// Create stream subscription
StreamSubscription featureFlagsStreamSubscription;

featureFlagsStreamSubscription = braze.subscribeToFeatureFlags((featureFlags) {
  print("Feature flags were updated");
});

// Cancel stream subscription
featureFlagsStreamSubscription.cancel();

フィーチャーフラグのデータは、AndroidとiOSの両方のネイティブレイヤーから自動的に転送されます。追加のセットアップは不要です。

Flutter SDK 17.1.0以前を使用している場合、iOSネイティブレイヤーからのフィーチャーフラグデータの転送には手動セットアップが必要です。アプリケーションには、BrazePlugin.processFeatureFlags(featureFlags)を呼び出すfeatureFlags.subscribeToUpdatesコールバックが含まれている可能性があります。Flutter SDK 18.0.0に移行するには、BrazePlugin.processFeatureFlags(_:)の呼び出しを削除してください。データ転送は自動的に処理されるようになりました。

例については、Braze Flutter SDKサンプルアプリケーションのAppDelegate.swiftを参照してください。

1
2

' Define a function called `onFeatureFlagChanges` to be called when feature flags are refreshed
m.BrazeTask.ObserveField("BrazeFeatureFlags", "onFeatureFlagChanges")

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

import { useEffect, useState } from "react";
import {
  FeatureFlag,
  getFeatureFlag,
  removeSubscription,
  subscribeToFeatureFlagsUpdates,
} from "@braze/web-sdk";

export const useFeatureFlag = (id: string): FeatureFlag => {
  const [featureFlag, setFeatureFlag] = useState<FeatureFlag>(
    getFeatureFlag(id)
  );

  useEffect(() => {
    const listener = subscribeToFeatureFlagsUpdates(() => {
      setFeatureFlag(getFeatureFlag(id));
    });
    return () => {
      removeSubscription(listener);
    };
  }, [id]);

  return featureFlag;
};

ユーザーの適格性を確認する

Brazeでユーザーがどのフィーチャーフラグに適格であるかを確認するには、オーディエンス > ユーザー検索に移動し、ユーザーを検索して選択します。

フィーチャーフラグの適格性タブでは、適格なフィーチャーフラグのリストをプラットフォーム、アプリケーション、またはデバイスでフィルタリングできます。また、フィーチャーフラグの横にあるを選択すると、ユーザーに返されるペイロードをプレビューすることもできます。

ユーザーが適格なフィーチャーフラグのテーブルを表示する画面。

変更履歴の表示

フィーチャーフラグの変更履歴を表示するには、フィーチャーフラグを開き、変更履歴を選択します。

フィーチャーフラグの「編集」ページ。「変更履歴」ボタンがハイライトされています。

ここでは、変更が行われた日時、変更を行ったユーザー、変更が属するカテゴリーなどを確認できます。

選択したフィーチャーフラグの変更履歴。

フィーチャーフラグでセグメント化する

Brazeは、現在フィーチャーフラグが有効になっているユーザーを自動的に追跡します。フィーチャーフラグフィルターを使ってセグメントまたはターゲットメッセージングを作成できます。セグメントでのフィルタリングの詳細については、セグメントの作成を参照してください。

「フィルター」セクションで、フィルター検索バーに「フィーチャーフラグ」と入力した状態。

ベストプラクティス

ロールアウトをキャンバスや実験と組み合わせない

ユーザーが異なるエントリポイントによって有効化・無効化されることを防ぐため、ロールアウトスライダーをゼロより大きい値に設定するか、キャンバスまたは実験でフィーチャーフラグを有効にするかのどちらかにしてください。ベストプラクティスとして、キャンバスや実験でフィーチャーフラグを使用する予定がある場合は、ロールアウトの割合をゼロのままにしてください。

命名規則

コードを明確で一貫性のあるものに保つため、フィーチャーフラグIDの命名には以下の形式を検討してください。

1

BEHAVIOR_PRODUCT_FEATURE

以下を置き換えてください。

プレースホルダー 説明
BEHAVIOR フィーチャーの動作です。コード内では、デフォルトで動作が無効になるようにし、フィーチャーフラグ名にdisabledのようなフレーズを使用しないようにしてください。
PRODUCT フィーチャーが属するプロダクトです。
FEATURE フィーチャーの名前です。

以下は、showが動作、animation_profileがプロダクト、driverがフィーチャーであるフィーチャーフラグの例です。

1

show_animation_profile_driver

事前に計画する

常に安全策を取ってください。オフスイッチが必要になる可能性のある新機能を検討する際は、フィーチャーフラグ付きで新しいコードをリリースして結局不要だったという方が、新しいアプリのアップデートが必要だと後から気づくよりもはるかに良い選択です。

説明的にする

フィーチャーフラグに説明を追加してください。Brazeではオプションのフィールドですが、利用可能なフィーチャーフラグを確認する際に他の人が抱く疑問に答えるのに役立ちます。

  • このフラグの有効化と動作の責任者の連絡先
  • このフラグを無効にすべきタイミング
  • このフラグが制御する新機能に関するドキュメントやメモへのリンク
  • 依存関係やフィーチャーの使用方法に関する注意事項

古いフィーチャーフラグを整理する

100%のロールアウトのまま必要以上に長くフィーチャーを残してしまうことは誰にでもあります。

コード（およびBrazeダッシュボード）をクリーンに保つため、すべてのユーザーがアップグレードし、フィーチャーを無効にするオプションが不要になったら、コードベースから恒久的なフィーチャーフラグを削除してください。これにより、開発環境の複雑さが軽減されるだけでなく、フィーチャーフラグのリストも整理された状態に保たれます。
New Stuff!