Skip to main content

Build your first Feature

Now that you have created your Statsig account, let's get started on building and shipping your first feature using Statsig.

Step 1 - Create a new Feature Gate#

Start by creating a new Feature Gate. Pick a name related to the product feature you're building. As an example, if you are building a new mobile registration UI flow, "Mobile Registration" is a good name. If you want, you can copy the name and description below:

Mobile Registration

It's also a good practice to write in a good description that is easy for people other than you to understand what this feature is about.

This feature enables a new mobile optimized registration flow which
we will be launching on iOS and Android as part of the V2 refresh.

Screen Shot 2021-06-14 at 4 59 29 PM

Once you create a new Feature Gate, you will see a screen like this: Screen Shot 2021-06-14 at 5 02 47 PM

The Feature Gate is enabled by default (meaning calls to this gate will evaluate the rules and conditions you specify next). You can disable gates by clicking on the toggle button (this stops the gate from evaluating rules and conditions and instead just returns false). Let's leave it on for now.

Screen Shot 2021-06-14 at 5 03 11 PM

Step 2 - Create a new Rule#

By default, your new Feature Gate will not pass any rule and hence will be returning false for all checks on the client side. In order to turn on this feature, you will need to target this feature to a specific set of folks. You do that by clicking on Add Rule

Screen Shot 2021-06-14 at 5 03 23 PM

You can choose from a list of targeting criteria like User ID, Country, Browser, Operating System, etc.

Screen Shot 2021-06-14 at 5 03 36 PM

Let's go ahead and choose Operating System is Any of and pick Android and iOS for our Mobile only targeting.

Screen Shot 2021-06-14 at 5 03 59 PM

Now hit the Add Rule button and you should now see the new rule in the Feature Gate details page.

Go ahead and hit Save Changes on the top right to commit these changes. New rules and conditions are staged at first, and the changes are only commited when you finalize them by clicking "Save Changes"

Screen Shot 2021-06-14 at 5 04 26 PM

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

Step 3 - Adding additional rules#

Let's add one more rule to our Feature Gate, one that allows us to test the new feature - say, for dogfooding purposes.

This time, let's pick Email Contains any of and choose a domain. Like this:

Screen Shot 2021-06-14 at 5 04 49 PM

Hit Add Rule and don't forget to Save Changes.

Screen Shot 2021-06-14 at 5 04 59 PM

Step 4 - Create a new Client API key#

Navigate to the API Keys section of the Statsig console. Here you would see different types of API keys you can generate.

Screen Shot 2021-06-14 at 5 05 20 PM

Server Secret Keys are used only for server side integrations. These keys are secrets that you want to safe-guard and that means not using it on clients.

Client SDK Keys are used in product apps or websites to access Statsig features. It's okay to embed these keys in apps or website.

For the purposes of this exercise, let's go ahead and create a new Client SDK Key.

Screen Shot 2021-06-07 at 12 34 57 PM

Copy this newly created SDK key. We're going to use this in the next step.

Step 5 - Using your new Gate via the Statsig SDK#

Now that we have configured this feature gate, let's go ahead and implement the feature behind this feature gate. For this exercise, let's pick a website that uses our JS SDK.

Other SDKs

Statsig supports many different SDKs. Please checkout Getting Started for the full list of Client side SDKs

Statsig is available from jsdelivr, an open source CDN. So let's open the Console Window of a new Chrome browser window for the next set of steps.

The current version at this writing is 2.0.3, but using this link https://cdn.jsdelivr.net/npm/statsig-js/dist/statsig-prod-web-sdk.min.js will get you the latest SDK version that's available.

Copy and paste the following code in your console:

var scrpt = document.createElement("script");
scrpt.src =
"https://cdn.jsdelivr.net/npm/statsig-js/dist/statsig-prod-web-sdk.min.js";
document.getElementsByTagName("head")[0].appendChild(scrpt);

image

Step 6 - Check gates using the SDK#

Copy and paste the following code in your console:

await statsig.initialize("YOUR_SDK_KEY", {});

image

Now that we have initialized Statsig, we can go ahead and make a call to our newly created Feature Gate. Copy and paste the following code in the console.

statsig.checkGate("mobile_registration");

You should get a response 'false' back from the server.

image

This is because we are not running this code on iOS or Android. And the way we configured our Feature Gate, the feature is only available on mobile.

Step 7 - Change the Environment to Mobile#

Chrome DevTools allows us to change our Device type to mobile. Let's use that feature to simulate the request coming from a mobile device. First, go ahead and toggle the Mobile Device toolbar to ON by clicking on this icon at the top left corner:

image

Since the environment has changed, we need to call updateUser on Statsig. Copy and paste the following code in the console.

await statsig.updateUser({});

Now, let's rerun the gate check again.

statsig.checkGate("mobile_registration");

This time, you should see true, meaning that this feature is now available on this 'mobile' device!

image

Step 7 - Let's try a different check#

Let's toggle the mobile device to off, so we're now back to Desktop device. This time let's try a different check - one that uses the user email as the condition. When we update the user this time, we will prodive an employee email address.

Type the following code in your console:

await statsig.updateUser({ email: "vijaye@statsig.com" });

image

And let's try the same checkGate once more

statsig.checkGate("mobile_registration");

This time, you should get back a true indicating that this feature is available for this user.

image

Step 8 - How to use these gates in production#

The psuedocode for feature gates would look something like this:

if (statsig.checkGate("mobile_registration")) {
// Show mobile registration UI
show(mobileRegistrationPage);
} else {
// Use the default path
show(oldRegistrationPage);
}

Happy Feature Gating!#