Skip to main content

JavaScript Client SDK for Statsig

Client vs. Server

These docs are for using our JavaScript SDK in a single-user, client side context. For server side and multi-user contexts, check out Node JS or one of our other server SDKs instead.

Statsig client SDK for js applications. This SDK is open source and hosted on github.

The Basics#

Get started in a few quick steps.

  1. Create a free account on statsig.com
  2. Install the SDK
  3. Initialize the SDK
  4. Fetch Feature Gates, Dynamic Configs, or Experiments
  5. Log a custom event

Step 1 - Create a free account on www.statsig.com#

You could skip this for now, but you will need an SDK Key and some Feature Gates or Dynamic Configs to use with the SDK in just a minute.

Step 2 - Install the SDK#

You can install the statsig SDK via npm, yarn or jsdelivr:

<script src="https://cdn.jsdelivr.net/npm/statsig-js/dist/statsig-prod-web-sdk.min.js"></script>

via jsdelivr:

Statsig is available from jsdelivr, an open source CDN. We use this installation method for using Statsig on www.statsig.com! Go ahead, inspect the page source.

To access the current primary JavaScript bundle, use:

https://cdn.jsdelivr.net/npm/statsig-js/dist/statsig-prod-web-sdk.min.js

To access specific files/versions:

http://cdn.jsdelivr.net/npm/statsig-js@{version}/{file}

Step 3 - Initialize the SDK#

After installation, you will need to initialize the SDK using a Client SDK key from the "API Keys" tab on the Statsig console.

These Client SDK Keys are intended to be embedded in client side applications. If need be, you can invalidate or create new SDK Keys for other applications/SDK integrations.

info

Do NOT embed your Server Secret Key in client side applications

In addition to the SDK key, you should also pass in a Statsig user for feature gate targeting and experimentation grouping purposes.

The 3rd parameter is optional and allows you to pass in a StatsigOptions to customize the SDK.

// Include this if using modules
// const statsig = require('statsig-js');
await statsig.initialize(
'client-sdk-key',
{ userID: 'some_user_id' },
{ environment: { tier: 'staging' } }, // optional, pass options here if needed
);

Step 4 - Fetch Feature Gates, Dynamic Configs, or Experiments#

Now that your SDK is initialized, let's fetch a Feature Gate. Feature Gates can be used to create logic branches in code that can be rolled out to different users from the Statsig Console. Gates always CLOSED or OFF (think return false;) by default.

if (statsig.checkGate('new_homepage_design')) {
// Gate is on, show new home page
} else {
// Gate is off, show old home page
}

Feature Gates can be very useful for simple on/off switches, with optional but advanced user targeting. However, if you want to be able send a different set of values (strings, numbers, and etc.) to your clients based on specific user attributes, e.g. country, Dynamic Configs can help you with that. The API is very similar to Feature Gates, but you get an entire json object you can configure on the server and you can fetch typed parameters from it. For example:

const config = statsig.getConfig("awesome_product_details");
// The 2nd parameter is the default value to be used in case the given parameter name does not exist on
// the Dynamic Config object. This can happen when there is a typo, or when the user is offline and the
// value has not been cached on the client.
const itemName = config.get("product_name", "Awesome Product v1");
const price = config.get("price", 10.0);
const shouldDiscount = config.get("discount", false);

Then we have Experiments, which you can use to run A/B/n experiments and use advanced features like layers (coming soon) to avoid collision and enable quicker iterations with parameter reuse.

const expConfig = statsig.getExperiment("new_user_promo");
const promoTitle = expConfig.get("title", "Welcome to Statsig! Use discount code WELCOME10OFF for 10% off your first purchase!");
const discount = expConfig.get("discount", 0.1);
...
const price = msrp * (1 - discount);

Step 5 - Log a custom event#

Now that you have a Feature Gate or an Experiment set up, you may want to track some custom events and see how your new features or different experiment groups affect these events. This is super easy with Statsig - simply call the Log Event API for the event, and you can additionally provide some value and/or an object of metadata to be logged together with the event:

statsig.logEvent('add_to_cart', 'SKU_12345', {'price': '9.99', 'item_name': 'diet_coke_48_pack'});

Statsig User#

You should provide a StatsigUser object whenever possible when initializing the SDK, passing as much information as possible in order to take advantage of advanced gate and config conditions (like country or OS/browser level checks). Most of the time, the userID field is needed in order to provide a consistent experience for a given user (see logged-out experiments to understand how to correctly run experiments for logged-out users). If the user is logged out at the SDK init time, you can leave the userID out for now, and we will use a stable device ID that we create and store in the local storage for targeting purposes.

Besides userID, we also have email, ip, userAgent, country, locale and appVersion as top-level fields on StatsigUser. In addition, you can pass any key-value pairs in an object/dictionary to the custom field and be able to create targeting based on them.

Once the user logs in or has an update/changed, make sure to call updateUser with the updated userID and/or any other updated user attributes:

const user = {
userID: currentUserID,
ip: currentIP,
custom: {
new_user: true,
level: 2
}
};
await statsig.initialize('client-sdk-key', user);
...
// if you want to update the existing user, or change to a different user, call updateUser
const newUser = { ... };
await statsig.updateUser(newUser);

Have sensitive user PII data that should not be logged?#

No problem, we have a solution for it! On the StatsigUser object we also have a field called privateAttributes, which is a simple object/dictionary that you can use to set private user attributes. Any attribute set in privateAttributes will only be used for evaluation/targeting, and removed from any logs before they are sent to Statsig server.

For example, if you have feature gates that should only pass for users with emails ending in "@statsig.com", but do not want to log your users' email addresses to Statsig, you can simply add the key-value pair { email: "my_user@statsig.com" } to privateAttributes on the user and that's it!

Statsig Options#

statsig.initialize() takes an optional parameter options in addition to sdkKey and user that you can provide to customize the Statsig client. Here are the current options and we are always adding more to the list:

  • environment: StatsigEnvironment, default null
    • An object you can use to set environment variables that apply to all of your users in the same session and will be used for targeting purposes.
    • The most common usage is to set the environment tier ('production', 'staging' or 'development'), e.g. { tier: 'staging' }, and have feature gates pass/fail for specific environments.
  • disableCurrentPageLogging boolean, default false.
    • By default, the sdk appends the current page for log events to the event payload to generate user journey/funnel analytics
  • loggingIntervalMillis: number, default 5000 (5s), min 1000, max 60000. sdk v4.1.0+
    • How frequently to flush logs to statsig (milliseconds)
  • loggingBufferMaxSize: number, default 10), min 2, max 500. sdk v4.1.0+
    • Maximum number of events to buffer before flushing events to statsig
  • disableNetworkKeepalive: boolean, default false. sdk v4.2.0+
    • Entirely disables the keepalive flag from being appended to network requests issued by the SDK
  • api - default https://api.statsig.com/v1/
    • The endpoint to use for all SDK network requests. You should not override this (unless you have another API that implements the Statsig API endpoints)

Shutting down Statsig#

In order to save users' data and battery usage, as well as prevent logged events from being dropped, we keep event logs in client cache and flush periodically. Because of this, some events may not have been sent when your app shuts down. To make sure all logged events are properly flushed or saved locally, you should tell Statsig to shutdown when your app is closing:

statsig.shutdown();

FAQ#

How do I run experiments for logged out users?#

(Coming soon)

What kind of browser support can I expect from the SDK?#

We strive to keep the SDK as lightweight as possible, while supporting as many browsers as possible. The primary feature that our SDK relies on which may not be supported by all browsers is a javascript Promise. You may wish to polyfill a Promise library to ensure maximum browser compatibility. We recommend taylorhakes/promise-polyfill for its small size and compatibility.