diff --git a/_docs/_developer_guide/platform_wide/banner_cards.md b/_docs/_developer_guide/banner_cards.md similarity index 82% rename from _docs/_developer_guide/platform_wide/banner_cards.md rename to _docs/_developer_guide/banner_cards.md index a9a72b63c94..1e4dcef86dc 100644 --- a/_docs/_developer_guide/platform_wide/banner_cards.md +++ b/_docs/_developer_guide/banner_cards.md @@ -1,7 +1,6 @@ --- nav_title: Banner Cards article_title: Banner Cards -page_order: 4 layout: dev_guide hidden: true guide_top_header: "Banner Cards" @@ -12,15 +11,17 @@ channel: guide_featured_title: "Section articles" guide_featured_list: +- name: Creating placements + link: /docs/developer_guide/banner_cards/creating_placements/ + image: /assets/img/braze_icons/compass-01.svg - name: Creating Banner Cards link: /docs/create_banner_card/ image: /assets/img/braze_icons/channel-content-cards.svg - name: Integrating Banner Cards - link: /docs/developer_guide/platform_wide/banner_cards/integration/ + link: /docs/developer_guide/banner_cards/integration/ image: /assets/img/braze_icons/code-01.svg --- {% alert important %} Banner Cards are currently in early access. Contact your Braze account manager if you’re interested in participating in this early access. {% endalert %} - diff --git a/_docs/_developer_guide/banner_cards/creating_placements.md b/_docs/_developer_guide/banner_cards/creating_placements.md new file mode 100644 index 00000000000..b299779a3e8 --- /dev/null +++ b/_docs/_developer_guide/banner_cards/creating_placements.md @@ -0,0 +1,54 @@ +--- +nav_title: Creating placements +article_title: Creating Banner Card placements for the Braze SDK +hidden: true +description: "This reference article covers Banner Cards and how to integrate this feature in the Braze SDK." +platform: + - iOS + - Android + - Web + +--- + +# Creating Banner Card placements + +> Before launching a Banner Card campaign in your app, you'll need to create a placement in the Braze dashboard. Placements are locations that you define in your app that can display Banner Cards. + +{% alert important %} +Banner Cards are currently in early access. Contact your Braze account manager if you’re interested in participating in this early access. +{% endalert %} + +## Prerequisites + +These are the minimum SDK versions to start using Banner Cards: + +{% sdk_min_versions swift:11.3.0 android:33.1.0 web:5.6.0 %} + +## Creating a placement + +### Step 1: Create a new placement + +Go to **Settings** > **Banner Cards Placements**, then select **Create Placement**. + +![Banner Card Placements section to create placement IDs.]({% image_buster /assets/img/banner_cards/create_placement.png %}) + +### Step 2: Fill in the details + +Name your placement and give it a **Placement ID**. Optionally, you can add a description for your placement. + +Work with your marketing team to create this ID. This is the ID you'll reference in your app's code, and your marketing team will use the ID to assign a campaign to the location in your app. + +{% alert important %} +Avoid editing your placement ID after launch, as this can break the integration with your app or website. +{% endalert %} + +![Placement details that designate a Banner Card will display in the left sidebar for spring sale promotion campaigns.]({% image_buster /assets/img/banner_cards/placement_details_example.png %}) + +For steps on how to launch a Banner Card campaign, refer to [Creating a Banner Card]({{site.baseurl}}/create_banner_card/). + +## Next steps + +Now that you've created your Banner Card placements, you can: + +- [Integrate Banner Cards]({{site.baseurl}}/developer_guide/banner_cards/integration/) +- [Create Banner Cards]({{site.baseurl}}/create_banner_card/) diff --git a/_docs/_developer_guide/platform_wide/banner_cards/integration.md b/_docs/_developer_guide/banner_cards/integration.md similarity index 77% rename from _docs/_developer_guide/platform_wide/banner_cards/integration.md rename to _docs/_developer_guide/banner_cards/integration.md index ccea40be837..c2da9fd3c13 100644 --- a/_docs/_developer_guide/platform_wide/banner_cards/integration.md +++ b/_docs/_developer_guide/banner_cards/integration.md @@ -1,6 +1,6 @@ --- -nav_title: Integrating Banner Cards -article_title: Integrating Banner Cards +nav_title: Banner Cards +article_title: Banner Cards for the Braze SDK hidden: true description: "This reference article covers Banner Cards and how to integrate this feature in the Braze SDK." platform: @@ -12,43 +12,23 @@ platform: # Integrating Banner Cards -Similar to [Content Cards]({{site.baseurl}}/user_guide/message_building_by_channel/content_cards/about), Banner Cards are embedded directly in your app or website so that you can engage users with an experience that feels natural. They’re a quick and seamless solution to create personalized messaging for your users all while extending the reach of other channels (such as email or push notifications). +> Similar to [Content Cards]({{site.baseurl}}/user_guide/message_building_by_channel/content_cards/about), Banner Cards are embedded directly in your app or website so that you can engage users with an experience that feels natural. They’re a quick and seamless solution to create personalized messaging for your users all while extending the reach of other channels (such as email or push notifications). {% alert important %} Banner Cards are currently in early access. Contact your Braze account manager if you’re interested in participating in this early access. {% endalert %} -This feature is available as of the following [SDK versions]({{site.baseurl}}/user_guide/engagement_tools/campaigns/ideas_and_strategies/new_features/#filtering-by-most-recent-app-versions): +## Prerequisites -{% sdk_min_versions swift:11.3.0 android:33.1.0 web:5.6.0 %} - -## Dashboard prerequisites - -### Define placements {#define-placements} - -Before launching a Banner Card campaign in your app, you must set up a placement in the Braze dashboard. Placements are locations that you define in your app that can display Banner Cards. - -#### Step 1: Create a new placement - -Go to **Settings** > **Banner Cards Placements**, then select **Create Placement**. - -![Banner Card Placements section to create placement IDs.]({% image_buster /assets/img/banner_cards/create_placement.png %}) - -#### Step 2: Fill in the details +Before you can integrate Banner Cards, you'll need to [create Banner Card placements]({{site.baseurl}}/developer_guide/banner_cards/creating_placements) in your app. -Name your placement and give it a **Placement ID**. Optionally, you can add a description for your placement. +In addition, these are the minimum SDK versions needed to start using Banner Cards: -Work with your marketing team to create this ID. This is the ID you'll reference in your app's code, and your marketing team will use the ID to assign a campaign to the location in your app. - -{% alert important %} -Avoid editing your placement ID after launch, as this can break the integration with your app or website. -{% endalert %} - -![Placement details that designate a Banner Card will display in the left sidebar for spring sale promotion campaigns.]({% image_buster /assets/img/banner_cards/placement_details_example.png %}) +{% sdk_min_versions swift:11.3.0 android:33.1.0 web:5.6.0 %} -For steps on how to launch a Banner Card campaign, refer to [Creating a Banner Card]({{site.baseurl}}/create_banner_card/). +## Integrating Banner Cards -## Refresh placements in your app {#requestBannersRefresh} +### Step 2: Refresh placements in your app {#requestBannersRefresh} Placements can be requested each session and will be cached automatically when a user's session expires or when you change identified users using the `changeUser` method. @@ -119,7 +99,7 @@ This feature is not currently supported on Roku. {% endtab %} {% endtabs %} -## Listen for updates {#subscribeToBannersUpdates} +### Step 3: Listen for updates {#subscribeToBannersUpdates} {% alert tip %} If you insert banners using the SDK methods in this guide, all analytics events will be handled automatically. If you want to manually render the HTML, [let us know](mailto:banners-feedback@braze.com). @@ -202,7 +182,7 @@ This feature is not currently supported on Roku. {% endtab %} {% endtabs %} -## Get and insert a Banner Card by placement ID {#insertBanner} +### Step 4: Insert cards by placement ID {#insertBanner} {% tabs %} {% tab JavaScript %} @@ -411,15 +391,10 @@ This feature is not currently supported on Roku. {% enddetails %} -## Best practices - -### Banner Card dimensions and sizing +## Dimensions and sizing -- No dimension information is sent from Braze. - -{% alert note %} -The composer allows a user to preview banners in different dimensions. That information is not saved or sent to the SDK. -{% endalert %} +Here's some things to know about Banner Card dimensions and sizing: +- While the composer let's you preview banners in different dimensions, that information is not saved or sent to the SDK. - The HTML will take up the full width of the container it's rendered in. -- As a best practice, we recommend making a fixed dimension element and testing those dimensions in composer. +- We recommend making a fixed dimension element and testing those dimensions in composer. diff --git a/_docs/_developer_guide/feature_flags.md b/_docs/_developer_guide/feature_flags.md index 6b043f11464..8965cbca8c1 100644 --- a/_docs/_developer_guide/feature_flags.md +++ b/_docs/_developer_guide/feature_flags.md @@ -1,31 +1,205 @@ --- nav_title: Feature Flags -article_title: Feature Flags -page_order: 4 -layout: dev_guide -guide_top_header: "Feature Flags" -guide_top_text: "Feature flags allow you to remotely enable or disable functionality for a selection of users. Importantly, they let you turn a feature on and off in production without additional code deployment or app store updates. This allows you to safely roll out new features with confidence." -description: "This landing page is home to all things feature flags, including articles on how to create feature flags, and use cases." -channel: - - feature flags - -guide_featured_title: "Section articles" -guide_featured_list: -- name: About Feature Flags - link: /docs/developer_guide/platform_wide/feature_flags/about/ - image: /assets/img/braze_icons/check-square-broken.svg -- name: Create a Feature Flag - link: /docs/developer_guide/platform_wide/feature_flags/create/ - image: /assets/img/braze_icons/columns-01.svg -- name: Feature Flag Experiments - link: /docs/developer_guide/platform_wide/feature_flags/experiments/ - image: /assets/img/braze_icons/beaker-02.svg -- name: Feature Flags in Canvas - link: /docs/developer_guide/platform_wide/feature_flags/canvas/ - image: /assets/img/braze_icons/dataflow-03.svg -- name: Frequently Asked Questions - link: /docs/developer_guide/platform_wide/feature_flags/faq/ - image: /assets/img/braze_icons/annotation-question.svg +article_title: Feature flags for the Braze SDK +page_order: 1 +description: "This reference article covers an overview of feature flags including prerequisites and use cases." +tool: Feature Flags +platform: + - iOS + - Android + - Web + - Unity + - Cordova + - React Native + - Flutter + - Roku + --- -

+# Feature flags + +> Feature flags allow you to remotely enable or disable functionality for a specific or random selection of users. Importantly, they let you turn a feature on and off in production without additional code deployment or app store updates. This allows you to safely roll out new features with confidence. + +{% alert tip %} +When you're ready to create your own feature flags, check out [Creating feature flags]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/create/). +{% endalert %} + +## Prerequisites + +These are the minimum SDK versions needed to start using feature flags: + +{% sdk_min_versions swift:5.9.0 android:24.2.0 web:4.6.0 unity:4.1.0 cordova:5.0.0 reactnative:4.1.0 flutter:6.0.0 roku:1.0.0 %} + +## Use cases + +### Gradual rollouts + +Use feature flags to gradually enable features to a sample population. For example, you can soft launch a new feature to your VIP users first. This strategy helps mitigate risks associated with shipping new features to everyone at once and helps catch bugs early. + +![Moving image of rollout traffic slider going from 0% to 100%.]({% image_buster /assets/img/feature_flags/feature-flags-rollout.gif %}) + +For example, let's say we've decided to add a new "Live Chat Support" link to our app for faster customer service. We could release this feature to all customers at once. However, a wide release carries risks, such as: + +* Our Support team is still in training, and customers can start support tickets after it's released. This doesn't give us any leeway in case the Support team needs more time. +* We're unsure of the actual volume of new support cases we'll get, so we might not be staffed appropriately. +* If our Support team is overwhelmed, we have no strategy to quickly turn this feature off again. +* There might be bugs introduced in the chat widget, and we don't want customers to have a negative experience. + +With Braze feature flags, we can instead gradually roll out the feature and mitigate all of these risks: + +* We will turn on the "Live Chat Support" feature when the Support team says they're ready. +* We will enable this new feature for only 10% of users to determine if we're staffed appropriately. +* If there are any bugs, we can quickly disable the feature instead of rushing to ship a new release. + +To gradually roll out this feature, we can [create a feature flag]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/create/) named "Live Chat Widget." + +![Feature flag details for an example named Live Chat Widget. The ID is enable_live_chat. This feature flag description reads that the live chat widget will show on the support page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-livechat-1.png %}) + +In our app code, we will only show the **Start Live Chat** button when the Braze feature flag is enabled: + +```javascript +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? + {liveChatEnabled && } +) + +``` + +### Remotely control app variables + +Use feature flags to modify your app's functionality in production. This can be particularly important for mobile apps, where app store approvals prevent rolling out changes quickly to all users. + +For example, let's say that our marketing team wants to list our current sales and promotions in our app's navigation. Normally, our engineers require one week's lead time for any changes and three days for an app store review. But with Thanksgiving, Black Friday, Cyber Monday, Hanukkah, Christmas, and New Year's Day all within two months, we won't be able to meet these tight deadlines. + +With feature flags, we can let Braze power the content of our app navigation link, letting our marketing manager make changes in minutes rather than days. + +To remotely configure this feature, we'll create a new feature flag called `navigation_promo_link` and define the following initial properties: + +![Feature flag with link and text properties directing to a generic sales page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-navigation-link-1.png %}) + +In our app, we'll use getter methods by Braze to retrieve this feature flag's properties and build the navigation links based on those values: + +```javascript +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 (<> +
+ Home + { promoEnabled && {promoText} } + Products + Categories +
+) +``` + +Now, the day before Thanksgiving, we only have to change those property values in the Braze dashboard. + +![Feature flag with link and text properties directing to a Thanksgiving sales page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-navigation-link-2.png %}) + +As a result, the next time someone loads the app, they will see the new Thanksgiving deals. + +### Message coordination + +Use feature flags to synchronize a feature's rollout and messaging. This will allow you to use Braze as the source of truth for both your user experience and its relevant messaging. To achieve this, target the new feature to a particular segment or filtered portion of your audience. Then, create a campaign or Canvas that only targets that segment. + +Let's say that we're launching a new loyalty rewards program for our users. It can be difficult for marketing and product teams to perfectly coordinate the timing of promotional messaging with a feature's rollout. Feature flags in Canvas let you apply sophisticated logic when it comes to enabling a feature for a select audience and controlling the related messaging to those same users. + +To effectively coordinate feature rollout and messaging, we'll create a new feature flag called `show_loyalty_program`. For our initial phased release, we'll let Canvas control when and for whom the feature flag is enabled. For now, we'll leave the rollout percentage at 0% and not select any target segments. + +![A feature flag with the name Loyalty Rewards Program. The ID is show_loyalty_program, and the description that this shows the new loyalty rewards program on the home screen and profile page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-loyalty.png %}) + +Then, in Canvas Flow, we'll create a [Feature Flag step]({{site.baseurl}}/user_guide/engagement_tools/canvas/canvas_components/feature_flags/) that enables the `show_loyalty_program` feature flag for our "High Value Customers" segment: + +![An example of a Canvas with an Audience Split step where the high-value customers segment turns on the show_loyalty_program feature flag.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-canvas-flow.png %}) + +Now, users in this segment will start to see the new loyalty program, and after it's enabled, an email and survey will be sent out automatically to help our team gather feedback. + +### Feature experimentation + +Use feature flags to experiment and confirm your hypotheses around your new feature. By splitting traffic into two or more groups, you can compare the impact of a feature flag across groups, and determine the best course of action based on the results. + +An [A/B test]({{site.baseurl}}/user_guide/engagement_tools/testing/multivariant_testing/) is a powerful tool that compares users' responses to multiple versions of a variable. + +In this example, our team has built a new checkout flow for our ecommerce app. Even though we're confident it's improving the user experience, we want to run an A/B test to measure its impact on our app's revenue. + +To begin, we'll create a new feature flag called `enable_checkout_v2`. We won't add an audience or rollout percentage. Instead, we'll use a feature flag experiment to split traffic, enable the feature, and measure the outcome. + +In our app, we'll check if the feature flag is enabled or not and swap out the checkout flow based on the response: + +```javascript +import * as braze from "@braze/web-sdk"; + +const featureFlag = braze.getFeatureFlag("enable_checkout_v2"); +braze.logFeatureFlagImpression("enable_checkout_v2"); +if (featureFlag?.enabled) { + return +} else { + return +} +``` + +We'll set up our A/B test in a [Feature Flag Experiment]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/experiments/). + +Now, 50% of users will see the old experience, while the other 50% will see the new experience. We can then analyze the two variants to determine which checkout flow resulted in a higher conversion rate. {% multi_lang_include metrics.md metric='Conversion Rate' %} + +![A feature flag experiment splitting traffic into two 50 percent groups.]({% image_buster /assets/img/feature_flags/feature-flag-use-case-campaign-experiment.png %}) + +Once we determine our winner, we can stop this campaign and increase the rollout percentage on the feature flag to 100% for all users while our engineering team hard-codes this into our next app release. + +### Segmentation + +Use the **Feature Flag** filter to create a segment or target messaging at users based on whether they have a feature flag enabled. For example, let's say we have a feature flag that controls premium content in our app. We could create a segment that filters for users who don't have the feature flag enabled, and then send that segment a message urging them to upgrade their account to view premium content. + +![]({% image_buster /assets/img/feature_flags/feature_flag_segmentation_filter.png %}) + +For more information about filtering on segments, see [Creating a segment]({{site.baseurl}}/user_guide/engagement_tools/segments/creating_a_segment/). + +{% alert note %} +To prevent recursive segments, it is not possible to create a segment that references other feature flags. +{% endalert %} + +## Plan limitations + +These are the feature flag limitations for free and paid plans. + +| Feature | Free version | Paid version | +| :---------------------------------------------------------------------------------------------------------------- | :--------------- | ----------------- | +| [Active feature flags](#active-feature-flags) | 10 per workspace | 110 per workspace | +| [Active campaign experiments]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/experiments/) | 1 per workspace | 100 per workspace | +| [Feature Flag Canvas steps]({{site.baseurl}}/user_guide/engagement_tools/canvas/canvas_components/feature_flags/) | Unlimited | Unlimited | +{: .reset-td-br-1 .reset-td-br-2 role="presentation" } + +A feature flag is considered active and will count toward your limit if any of the following apply: + +- Rollout is more than 0% +- Used in an active Canvas +- Used in an active experiment + +Even if the same feature flag matches multiple criteria, such as if it's used in a Canvas and the rollout is 50%, it will only count as 1 active feature flag toward your limit. + +{% alert note %} +To purchase the paid version of feature flags, contact your Braze account manager, or request an upgrade in the Braze dashboard. +{% endalert %} diff --git a/_docs/_developer_guide/feature_flags/about.md b/_docs/_developer_guide/feature_flags/about.md deleted file mode 100644 index dfd5b23feb7..00000000000 --- a/_docs/_developer_guide/feature_flags/about.md +++ /dev/null @@ -1,210 +0,0 @@ ---- -nav_title: About Feature Flags -article_title: About Feature Flags -page_order: 1 -description: "This reference article covers an overview of feature flags including prerequisites and use cases." -tool: Feature Flags -platform: - - iOS - - Android - - Web - - Unity - - Cordova - - React Native - - Flutter - - Roku - ---- - -# About feature flags - -> Feature flags allow you to remotely enable or disable functionality for a specific or random selection of users. Importantly, they let you turn a feature on and off in production without additional code deployment or app store updates. This allows you to safely roll out new features with confidence. - -Looking for steps on how to create a feature flag in Braze? Refer to [Creating feature flags]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/create/). - -## Prerequisites - -To use feature flags, ensure your SDKs are up to date with at least these minimum versions: - -{% sdk_min_versions swift:5.9.0 android:24.2.0 web:4.6.0 unity:4.1.0 cordova:5.0.0 reactnative:4.1.0 flutter:6.0.0 roku:1.0.0 %} - -## Using feature flags - -Use feature flags to: - -- [Introduce gradual rollouts](#gradual-rollouts) -- [Remotely control app variables](#remotely-control-app-variables) -- [Synchronize feature rollout and messaging](#message-coordination) -- [Experiment with new features](#feature-experimentation) -- [Segment users by feature flags](#segmentation) - -### Gradual rollouts - -Use feature flags to gradually enable features to a sample population. For example, you can soft launch a new feature to your VIP users first. This strategy helps mitigate risks associated with shipping new features to everyone at once and helps catch bugs early. - -![Moving image of rollout traffic slider going from 0% to 100%.]({% image_buster /assets/img/feature_flags/feature-flags-rollout.gif %}) - -For example, let's say we've decided to add a new "Live Chat Support" link to our app for faster customer service. We could release this feature to all customers at once. However, a wide release carries risks, such as: - -* Our Support team is still in training, and customers can start support tickets after it's released. This doesn't give us any leeway in case the Support team needs more time. -* We're unsure of the actual volume of new support cases we'll get, so we might not be staffed appropriately. -* If our Support team is overwhelmed, we have no strategy to quickly turn this feature off again. -* There might be bugs introduced in the chat widget, and we don't want customers to have a negative experience. - -With Braze feature flags, we can instead gradually roll out the feature and mitigate all of these risks: - -* We will turn on the "Live Chat Support" feature when the Support team says they're ready. -* We will enable this new feature for only 10% of users to determine if we're staffed appropriately. -* If there are any bugs, we can quickly disable the feature instead of rushing to ship a new release. - -To gradually roll out this feature, we can [create]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/create/) a feature flag named "Live Chat Widget." - -![Feature flag details for an example named Live Chat Widget. The ID is enable_live_chat. This feature flag description reads that the live chat widget will show on the support page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-livechat-1.png %}) - -In our app code, we will only show the **Start Live Chat** button when the Braze feature flag is enabled: - -```javascript -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? - {liveChatEnabled && } -) - -``` - -### Remotely control app variables - -Use feature flags to modify your app's functionality in production. This can be particularly important for mobile apps, where app store approvals prevent rolling out changes quickly to all users. - -For example, let's say that our marketing team wants to list our current sales and promotions in our app's navigation. Normally, our engineers require one week's lead time for any changes and three days for an app store review. But with Thanksgiving, Black Friday, Cyber Monday, Hanukkah, Christmas, and New Year's Day all within two months, we won't be able to meet these tight deadlines. - -With feature flags, we can let Braze power the content of our app navigation link, letting our marketing manager make changes in minutes rather than days. - -To remotely configure this feature, we'll create a new feature flag called `navigation_promo_link` and define the following initial properties: - -![Feature flag with link and text properties directing to a generic sales page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-navigation-link-1.png %}) - -In our app, we'll use getter methods by Braze to retrieve this feature flag's properties and build the navigation links based on those values: - -```javascript -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 (<> -
- Home - { promoEnabled && {promoText} } - Products - Categories -
-) -``` - -Now, the day before Thanksgiving, we only have to change those property values in the Braze dashboard. - -![Feature flag with link and text properties directing to a Thanksgiving sales page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-navigation-link-2.png %}) - -As a result, the next time someone loads the app, they will see the new Thanksgiving deals. - -### Message coordination - -Use feature flags to synchronize a feature's rollout and messaging. This will allow you to use Braze as the source of truth for both your user experience and its relevant messaging. To achieve this, target the new feature to a particular segment or filtered portion of your audience. Then, create a campaign or Canvas that only targets that segment. - -Let's say that we're launching a new loyalty rewards program for our users. It can be difficult for Marketing and Product teams to perfectly coordinate the timing of promotional messaging with a feature's rollout. Feature flags in Canvas let you apply sophisticated logic when it comes to enabling a feature for a select audience and controlling the related messaging to those same users. - -To effectively coordinate feature rollout and messaging, we'll create a new feature flag called `show_loyalty_program`. For our initial phased release, we'll let Canvas control when and for whom the feature flag is enabled. For now, we'll leave the rollout percentage at 0% and not select any target segments. - -![A feature flag with the name Loyalty Rewards Program. The ID is show_loyalty_program, and the description that this shows the new loyalty rewards program on the home screen and profile page.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-loyalty.png %}) - -Then, in Canvas Flow, we'll create a [Feature Flag step]({{site.baseurl}}/user_guide/engagement_tools/canvas/canvas_components/feature_flags/) that enables the `show_loyalty_program` feature flag for our "High Value Customers" segment: - -![An example of a Canvas with an Audience Split step where the high-value customers segment turns on the show_loyalty_program feature flag.]({% image_buster /assets/img/feature_flags/feature-flags-use-case-canvas-flow.png %}) - -Now, users in this segment will start to see the new loyalty program, and after it's enabled, an email and survey will be sent out automatically to help our team gather feedback. - -### Feature experimentation - -Use feature flags to experiment and confirm your hypotheses around your new feature. By splitting traffic into two or more groups, you can compare the impact of a feature flag across groups, and determine the best course of action based on the results. - -An [A/B test]({{site.baseurl}}/user_guide/engagement_tools/testing/multivariant_testing/) is a powerful tool that compares users' responses to multiple versions of a variable. - -In this example, our team has built a new checkout flow for our ecommerce app. Even though we're confident it's improving the user experience, we want to run an A/B test to measure its impact on our app's revenue. - -To begin, we'll create a new feature flag called `enable_checkout_v2`. We won't add an audience or rollout percentage. Instead, we'll use a feature flag experiment to split traffic, enable the feature, and measure the outcome. - -In our app, we'll check if the feature flag is enabled or not and swap out the checkout flow based on the response: - -```javascript -import * as braze from "@braze/web-sdk"; - -const featureFlag = braze.getFeatureFlag("enable_checkout_v2"); -braze.logFeatureFlagImpression("enable_checkout_v2"); -if (featureFlag?.enabled) { - return -} else { - return -} -``` - -We'll set up our A/B test in a [Feature Flag Experiment]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/experiments/). - -Now, 50% of users will see the old experience, while the other 50% will see the new experience. We can then analyze the two variants to determine which checkout flow resulted in a higher conversion rate. {% multi_lang_include metrics.md metric='Conversion Rate' %} - -![A feature flag experiment splitting traffic into two 50 percent groups.]({% image_buster /assets/img/feature_flags/feature-flag-use-case-campaign-experiment.png %}) - -Once we determine our winner, we can stop this campaign and increase the rollout percentage on the feature flag to 100% for all users while our engineering team hard-codes this into our next app release. - -### Segmentation - -Use the **Feature Flag** filter to create a segment or target messaging at users based on whether they have a feature flag enabled. For example, let's say we have a feature flag that controls premium content in our app. We could create a segment that filters for users who don't have the feature flag enabled, and then send that segment a message urging them to upgrade their account to view premium content. - -![]({% image_buster /assets/img/feature_flags/feature_flag_segmentation_filter.png %}) - -For more information about filtering on segments, see [Creating a segment]({{site.baseurl}}/user_guide/engagement_tools/segments/creating_a_segment/). - -{% alert note %} -To prevent recursive segments, it is not possible to create a segment that references other feature flags. -{% endalert %} - -## Limitations - -The following table describes the limitations that apply at a feature flag level. To purchase the paid version of feature flags, contact your Braze account manager, or request an upgrade in the Braze dashboard. - -| Limitation area | Free version | Paid version | -| :---------------------------------------------------------------------------------------------------------------- | :--------------- | ----------------- | -| [Active feature flags](#active-feature-flags) | 10 per workspace | 110 per workspace | -| [Active campaign experiments]({{site.baseurl}}/developer_guide/platform_wide/feature_flags/experiments/) | 1 per workspace | 100 per workspace | -| [Feature Flag Canvas steps]({{site.baseurl}}/user_guide/engagement_tools/canvas/canvas_components/feature_flags/) | Unlimited | Unlimited | -{: .reset-td-br-1 .reset-td-br-2 role="presentation" } - -### Active feature flags - -A feature flag is considered active and will count toward your limit if any of the following apply: - -- Rollout is more than 0% -- Used in an active Canvas -- Used in an active experiment - -Even if the same feature flag matches multiple criteria, such as if it's used in a Canvas and the rollout is 50%, it will only count as 1 active feature flag toward your limit. - diff --git a/_docs/_developer_guide/home.md b/_docs/_developer_guide/home.md index 13c14811733..d898f171f3d 100644 --- a/_docs/_developer_guide/home.md +++ b/_docs/_developer_guide/home.md @@ -2,7 +2,7 @@ page_order: 0 layout: dev_guide guide_top_header: "Braze Developer Guide" -guide_top_text: "This is where developers can find all the integrations available with Braze.
For additional resources and to join the Braze developer community, visit the
Braze developer portal." +guide_top_text: "This is where developers can find all the integrations available with Braze. To connect, learn, and get inspired with other developers building with Braze, join the Braze developer community." article_title: Braze Developer Guide description: "This landing page is where developers can find all the integrations available with Braze." diff --git a/assets/js/broken_redirect_list.js b/assets/js/broken_redirect_list.js index f8468d84f52..5060b05e269 100644 --- a/assets/js/broken_redirect_list.js +++ b/assets/js/broken_redirect_list.js @@ -1260,4 +1260,6 @@ validurls['/docs/help/help_articles/in-app_messages/'] = '/docs/developer_guide/ validurls['/docs/_help/help_articles/in-app_messages/in-app_message_impressions_appear_lower_than_expected/'] = '/docs/developer_guide/home/'; validurls['/docs/help/help_articles/in-app_messages/in-app_messages_not_displaying'] = '/docs/developer_guide/home/'; -// validurls['OLD'] = 'NEW'; \ No newline at end of file +// validurls['OLD'] = 'NEW';validurls['/docs/developer_guide/platform_wide/banner_cards'] = '/docs/developer_guide/banner_cards'; +validurls['/docs/developer_guide/platform_wide/banner_cards/integration'] = '/docs/developer_guide/banner_cards/integration'; +validurls['/docs/developer_guide/feature_flags/about'] = '/docs/developer_guide/feature_flags';