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]

import React from "react";
import { useFeature } from "@context-experiments/react";
import DiscountBanner from "./components/discount-banner";
import Body from "./components/body";
const Page = () => {
const [isBannerActive] = useFeature("discount-banner-dk29dkl-3k23");
return (
<React.Fragment>
{isBannerActive && <DiscountBanner />}
<Body />
</React.Fragment>
);
};
export default Page;
  • 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

import { useFeature } from "@context-experiments/react";
const Banner = () => {
const [, { discountAmount, copy, discountCode }] = useFeature("my-banner-jwdiwkdoekn");
return ( `$${discountAmount} ${copy} ${discountCode}` );
};
  • 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

import React from "react";
import { useFeature } from "@context-experiments/react";
import DiscountBanner from "./components/discount-banner";
import DiscountBannerSideBar from "./components/discount-banner-side-bar";
import Body from "./components/body";
const Page = () => {
const [isBannerActive] = useFeature("discount-banner-dk29dkl");
const [isDiscountBannerSideBarActive] = useFeature("discount-banner-side-bar-e2kf9bm5");
return (
<React.Fragment>
{isBannerActive && <DiscountBanner />}
<Body />
{isDiscountBannerSideBarActive && <DiscountBannerSideBar />}
</React.Fragment>
);
};
export default Page;
  • 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