Context
Search…
Usage Examples
Let's say your team runs an eCommerce application. You think that adding a discount code to your home page will make users check out more frequently and with more items in their cart:
Examples assume you are using React. Pure JavaScript is also available (see the @context-experiments/core package), with Android and iOS on the way.

Create a Feature

    Create a Discount Banner feature in the Context dashboard and leave it turned off for all environments
    Add the feature to your code base and gate it behind a feature flag
useFeature is the most common hook you'll use. It takes a feature id (displayed in the Context Dashboard) and returns [isActive: bool, value: string]
1
import React from "react";
2
import { useFeature } from "@context-experiments/react";
3
import DiscountBanner from "./components/discount-banner";
4
import Body from "./components/body";
5
6
const Page = () => {
7
const [isBannerActive] = useFeature("discount-banner-dk29dkl-3k23");
8
return (
9
<React.Fragment>
10
{isBannerActive && <DiscountBanner />}
11
<Body />
12
</React.Fragment>
13
);
14
};
15
16
export default Page;
Copied!
    Turn it on for Quality Assurance (but not Production or Development) to verify the feature works as expected
Each environment's deployment settings (on / off) are treated as a feature's default state. Users see a feature's default deployment unless it is over ridden by an experiment.

Create Experiments

On / Off

ON_OFF experiments show a feature to a percentage of users
To know if the discount is worth deploying, you need know that it creates more revenue than it costs. In other words your Checkout event and it's property Checkout.Subtotal should both go up when users see the discount banner.
    Create an On / Off experiment in the Context dashboard (no code changes needed)
    Run it in Production
    Examine the Results (Users checkout more often and spend more when they do.)
    Turn the feature on by default (show to all users not in an experiment)
    Turn off the experiment

Between Values

BETWEEN_VALUES experiments show a feature to all users, but with different values
The business team wants to know if offering a bigger discount will increase revenue even more.
    Refactor to move the banner's discount amount to Context
      Add a default value to the feature in the Context Dashboard
      Get the value from the feature gate
useFeature allows you to access the feature's state (boolean) and value (string) separately
1
import { useFeature } from "@context-experiments/react";
2
3
const Banner = () => {
4
const [, { discountAmount, copy, discountCode }] = useFeature("my-banner-jwdiwkdoekn");
5
return ( `$${discountAmount} ${copy} ${discountCode}` );
6
};
Copied!
    Create an experiment
      Create a Between Values experiment in the Context dashboard ($3 vs. $5 discount)
      Run it in Production
      Examine the Results ($5 wins)
      Roll out the feature to everyone with $5
      Turn off experiment

Between Features

BETWEEN_FEATURES experiments show different features to different users
The product team wonders if showing the feature as a sidebar would be more effective.
    Refactor to add alternate feature
      Create the Side Bar Banner feature in the Context dashboard
      Add the feature to your code base and gate it behind a feature flag
1
import React from "react";
2
import { useFeature } from "@context-experiments/react";
3
import DiscountBanner from "./components/discount-banner";
4
import DiscountBannerSideBar from "./components/discount-banner-side-bar";
5
import Body from "./components/body";
6
7
const Page = () => {
8
const [isBannerActive] = useFeature("discount-banner-dk29dkl");
9
const [isDiscountBannerSideBarActive] = useFeature("discount-banner-side-bar-e2kf9bm5");
10
11
return (
12
<React.Fragment>
13
{isBannerActive && <DiscountBanner />}
14
<Body />
15
{isDiscountBannerSideBarActive && <DiscountBannerSideBar />}
16
</React.Fragment>
17
);
18
};
19
20
export default Page;
Copied!
    Create an experiment
      Create a Between Features experiment in the Context dashboard
      Run it in Production
      Examine the Results (Sidebar Banner is not better)
      Turn off experiment
Last modified 7mo ago