Create your first feature flag

This tutorial walks you through how to check your first Feature Gate in Statsig from end to end. Feature Gates, also known as feature flags, are a way to safely control the rollout of new features to your users without deploying additional code. Common examples for using Feature Gates include shipping new UI elements, API endpoints, or product features.

By the end of this tutorial, you have:

• Created a Feature Gate in the Statsig console, with targeting rules to enable the feature for a segment of Users
• Initialized a Statsig Client SDK
• Checked a single feature gate in your code using the checkGate function

Prerequisites

1. A Statsig account
2. An existing application you can integrate the Statsig Client SDK into

Step 1: In the Statsig console

Create a Feature Gate

This example adds a Feature Gate to deploy a new UI element to a user with the "statsig.com" email domain. You can follow along with a specific feature if you have your own scenario in mind.

1. Navigate to Feature Gates in the Statsig console.

2. Then, click on Get Started if you don't have any Feature Gates set up yet, or Create to create a new one.

3. Name your gate "Example Gate". The SDK also uses this name to identify the Feature Gate later.

4. Enter a description for your Feature Gate. It's good practice to describe it in a way that other teammates can easily understand. For example: "This Feature Gate is for launching an example feature for Statsig employees only."

Create a targeting rule

When you create a Feature Gate in Statsig, Statsig excludes all users from the feature by default. To enable the feature, add a rule that lets users pass the gate. The steps below walk through adding that rule in the console.

1. In the console, on the page for the Feature Gate you just created, click on Add New Rule.

2. Give this rule a Name, such as "Statsig Users Only".

3. Select Email as the targeting criteria to target users based on their email address.

4. In the User section of the dropdown, select the Any Of (Case Insensitive) operator, and then add statsig.com for email-based user targeting.

5. Set the Pass Percentage to 100%. Doing so ensures that all users with the statsig.com email domain pass the Feature Gate and see the new feature.

6. Click Add Rule to add this rule to your Feature Gate.

7. Next, hit Save on the bottom right to commit these changes to the Feature Gate.

You can now test this feature gate by configuring the User object in the "Test Gate" section.

Create a Client API Key

Now that you've set up the Feature Gate from the console, it's time to integrate it into your product with the Statsig SDK. First, create a new Client API key to use in your product.

1. Navigate to Keys & Environments in the Statsig console. You can also find this by going to Settings at the bottom left of the Statsig console.

2. Scroll down to API Keys. Click on Generate New Key.

3. In the dropdown, select Client.

4. Copy the Client API Key you just created to your clipboard.

Step 2: In your code

Initialize the Statsig SDK

Now that you have a Client API Key, integrate the Statsig Client SDK into your product. This tutorial uses the React SDK, but you can use a different SDK if you prefer.

1. Install the Statsig React SDK using your preferred package manager. This tutorial uses npm.

npm install @statsig/react

2. Import the SDK in your App.js file:

import { StatsigProvider } from "@statsig/react-bindings";

3. Wrap your app's content within the StatsigProvider component. The following code snippet also creates a User object for targeting your Feature Gate.

function App() {
  return (
    <StatsigProvider
      sdkKey="client-KEY"
      user={{ userID: "Example", email: "example@statsig.com" }}>
        <div>Hello world</div>
    </StatsigProvider>
  );
}

export default App;

4. Make sure to also replace client-KEY with the Client API Key you copied in Step 3.

Check your Feature Gate

1. Add the following code to your App.js file. In this snippet, the example_gate is the name of the Feature Gate you created in Step 1.

const { client } = useStatsigClient();
return (
  <div>Gate is {client.checkGate('check_user') ? 'passing' : 'failing'}.</div>
);

2. Run your app. The app renders "Gate is passing" because the targeting rule targets all users with the statsig.com email domain, and this client's User object uses that same domain.
3. After you set up your gate, monitor the impact of your new feature rollout or manage flag lifecycles.

Run your first A/B test

This tutorial configured a simple feature flag. To do more complex feature rollouts or metric analysis, continue to the next tutorial to run your first A/B test in Statsig.