Table of Contents
- Use feature flags to control the look, feel, and functionality of your apps
- Roll out your features to a specific group of users
Feature flags and rollouts are new features for Optimizely Full Stack, Mobile, and OTT. Feature flags let you configure sets of variables that control different aspects of your app, like the way it looks or how it functions. Rollouts let you enable a feature flag for a specific group or percentage of users. In this article, we'll explain the details of feature flags and rollouts, including how to create them.
Feature flags
In Optimizely a "feature" is a set of one or more variables. You use these variables to define the behavior of your apps. Feature flags let you choose which values to return for which variations.
An example of a feature is a popup modal that offers a discounted product to app users right after they log in. In this case, your feature would have variables like the title you want to display, the body copy in the modal, and the discount amount.
Create a feature flag
Here's how to create a feature flag, with detailed steps listed below:
-
In your Full Stack project, click Feature Flags.
-
Click New Feature Flag...
-
Enter a name for your feature flag and a description.
-
Configure your feature flag by specifying the variable keys, types, and default values.
Title of the modal: String
Body copy in the modal: String
Hyperlink to landing page: String
Color of CTA button: String
Discount amount: Double or Integer
For each of these variables, you choose a default value. -
Click Save.
Default values for features
Just like with live variables, the default values you specify for feature variables are the value that will be returned if the app user is not in a variation of an A/B test. Default values will be returned if:
-
The feature isn’t added to a running A/B test or to a rollout
-
The user doesn’t meet the audience conditions for an A/B test using the feature
-
The user is excluding according to traffic allocation
Feature flags in code
There are two main questions developers will have about feature flags:
-
Is the feature enabled for an app user?
-
What are the values of the variables contained within the feature?
A feature is “enabled” if the app user meets audience conditions and traffic allocation for an A/B test (or rollout) using the feature. If not, the feature is disabled, and you’ll get the default values if you try to return variables within the feature.
var enabled = optimizely.isFeatureEnabled('offer_discount_modal', userId);
The variable enabled will contain a boolean: true
if the feature is enabled for the user and false
if not. If your feature requires an audience condition to be enabled, pass your attributes in like this:
var enabled = optimizely.isFeatureEnabled('offer_discount_modal', userId, {'attributes':'values'});
If isFeatureEnabled
returns true
, Optimizely dispatches a decision event. This is how we know whether the user has seen the A/B test or rollout.
Here's how to retrieve the values for each variable:
var title = optimizely.getFeatureVariableString('offer_discount_modal', 'title', userId); var body = optimizely.getFeatureVariableString('offer_discount_modal', 'body', userId); var cta_href = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_href', userId); var cta_color = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_color', userId); var discount_value = optimizely.getFeatureVariableString('offer_discount_modal', 'discount_value', userId);
Just like with isFeatureEnabled, you have to provide your attributes if an audience condition is required for the feature.
Example feature code usage
Suppose you’re a developer who created a function showDiscountOfferModal() that shows the discount modal if an app user is eligible. Here’s how you might use the code examples listed above:
var enabled = optimizely.isFeatureEnabled('offer_discount_modal', userId, {'attributes':'values'}); if (enabled) { showDiscountOfferModal(); } function showDiscountOfferModal() { var title = optimizely.getFeatureVariableString('offer_discount_modal', 'title', userId); var body = optimizely.getFeatureVariableString('offer_discount_modal', 'body', userId); var cta_href = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_href', userId); var cta_color = optimizely.getFeatureVariableString('offer_discount_modal', 'cta_color', userId); var discount_value = optimizely.getFeatureVariableString('offer_discount_modal', 'discount_value', userId); var template = [ "<div id='myModal'>", "<p>"+title+"</p>", "<p>"+body+"</p>", "<a style='background:"+cta_color+"' href='"+cta_href+"'>Get discount!</a>", "<p>"+discount_value+" off!</p>" "</div>" ].join(""); jQuery("body").append(template); }
Rollouts
A rollout is an option that enables a feature flag for a set of users: a percentage of users, a particular audience, or both. When you create a rollout, you choose a feature, set the variable values, set the audience, and specify the percentage of those users for whom you want the feature enabled.
Rollouts allow you to create custom experiences for different audiences, similarly to Optimizely Web Personalization.
Create a rollout
Here's how to create a rollout, with step-by-step instructions below:
In your Full Stack project, click Rollouts.
-
Click New Rollout...
-
Choose the feature you want to roll out and enter a description for the rollout if desired.
-
Specify the rules for the rollout: the percentage of app users who should have the feature enabled.
To target the rollout by audience, add an audience to it. Define different experiences for each audience by changing the variable values and percentage of users in the audience who should have the feature enabled.
Update rollout rules
You may want to enable a new feature for only a small percentage of users and slowly increase that amount over time. To increase the portion of users who experience a feature:
-
Navigate to Rollouts and click the rollout you want to change.
-
Under Rollout Rules, update the percentage.
-
Click Save.
If a user meets the audience conditions for multiple rollouts in your project, the user will receive the first qualifying rollout. Users who are excluded from a rollout based on traffic allocation will not be evaluated for the remaining rollout audiences you have configured.