Skip to main content

JavaScript Client SDK

Getting Started​

The following will outline how to get up and running with Statsig for JavaScript.

Create an Account​

To work with the SDK, you will need a Statsig account. If you don't yet have an account, go ahead and sign up for a free account now.

You could skip this for now, but you will need an SDK key and some gates/experiments to use with the SDK in just a minute.

Installation​

You can install the Statsig SDK via npm, yarn or 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/build/statsig-prod-web-sdk.min.js

To access specific files/versions:

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

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

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 StatsigUser 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.

import Statsig from "statsig-js";

// initialize returns a promise which always resolves
await Statsig.initialize(
  "client-sdk-key",
  { userID: "some_user_id" },
  { environment: { tier: "staging" } } // optional, pass options here if needed
);

Working with the SDK​

Checking a Gate​

Now that your SDK is initialized, let's check 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 are 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
}

Reading a Dynamic Config​

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:

import type { DynamicConfig } from "statsig-js";

const config: DynamicConfig = 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: string = config.get("product_name", "Awesome Product v1");
const price: number = config.get("price", 10.0);
const shouldDiscount: boolean = config.get("discount", false);

Getting an Layer/Experiment​

Then we have Layers/Experiments, which you can use to run A/B/n experiments. We offer two APIs, but we recommend the use of layers to enable quicker iterations with parameter reuse.

import type { Layer, DynamicConfig } from "statsig-js";

// Values via getLayer

const layer: Layer = Statsig.getLayer("user_promo_experiments");
const promoTitle: string = layer.get("title", "Welcome to Statsig!");
const discount: number = layer.get("discount", 0.1);

// or, via getExperiment

const titleExperiment: DynamicConfig = Statsig.getExperiment(
  "new_user_promo_title"
);
const priceExperiment: DynamicConfig = Statsig.getExperiment(
  "new_user_promo_price"
);

const promoTitle: string = titleExperiment.get("title", "Welcome to Statsig!");
const discount: number = priceExperiment.get("discount", 0.1);

Logging an 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:

import type { StatsigUser } from "statsig-js";

const user: StatsigUser = {
    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: StatsigUser = { ... };
await Statsig.updateUser(newUser);

Private Attributes​

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!

Prefetching Users During Initialization​

If you have multiple user objects and wish to cut down on network calls, you may provide a prefetchUsers array as part of StatsigOptions during initialization.

import type { StatsigUser } from "statsig-js";

const prefetchUsers: StatsigUser[] = [
  { userID: "user_a", customIDs: { groupID: "group_a" } },
  { userID: "user_b", customIDs: { groupID: "group_a" } },
];

await Statsig.initialize(
  "client-sdk-key",
  { userID: "user_a" },
  { prefetchUsers: prefetchUsers }
);

Prefetching Users Directly​

You may also call the prefetchUsers method at any time after initialization.

import type { StatsigUser } from "statsig-js";

const prefetchUsers: StatsigUser[] = [
  { userID: "user_a", customIDs: { groupID: "group_a" } },
  { userID: "user_b", customIDs: { groupID: "group_a" } },
];

await Statsig.prefetchUsers(prefetchUsers);

These users are evaluated on the Statsig server and the results are returned to the client. Later calls to updateUser will not execute a network request if a user is found to be prefetched.

info

The prefetchUsers array is limited to 5 users. If a larger array is given, only the first 5 users will be taken.

Fetch Mode v4.32.0+​

In some advanced use cases, you may want to limit the number of network requests to be fired during updates to the current user.

Since version 4.32.0, the JS SDK supports StatsigOptions.fetchMode. Setting this option will change the bevahior of Statsig.updateUser.

The supported FetchModes are as follows:

  • network-only - This is the default behavior. The SDK will always fetch the latest feature gate and experiment values from the Statsig servers when Statsig.updateUser is called.

  • cache-or-network - When set to this mode, the SDK will first check if a cached value exists for the user and was cached during this session (After Statsig.initialize). If no valid cache value is found, a network request will be made to fetch the latest values.

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.
  • disableAllLogging boolean default false
    • Disables all logging by the SDK. Useful in complaince situations before getting user consent. You can then re-enable logging with Statsig.reenableAllLogging
  • 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 default endpoint to use for all SDK network requests. You should not override this (unless you have another API that implements the Statsig API endpoints)
    • Starting in v4.17.0+, if you wish to separately override the log_event endpoint only, see eventLoggingApi
  • overrideStableID - string, default null
    • If you'd like to use your own ID in place of Statsig's stableID, then you can pass the ID as an option here.
    • Once a value is passed, the SDK will store this ID in the local storage for the browser for future use as well.
  • localMode - boolean, default false
    • Pass true to this option to turn on Local Mode for the SDK, which will stop the SDK from issuing any network requests and make it only operate with only local overrides (If supported) and cache.
      Note: Since no network requests will be made, a dummy SDK key starting with "client-" can be used. (eg "client-key")
  • initTimeoutMs - number, default 3000
    • This option configures the maximum time (in milliseconds) the SDK would wait for the network request made by initialize() to respond before it resolves.
    • If the SDK resolves before the network request has completed due to the timeout, it will continue work with local overrides, cached values, and then default values set in code.
  • disableErrorLogging - boolean, default false (added in v4.11.0)
    • By default, the SDK auto logs javascript errors to Statsig. This will be connected with the metrics and pulse views to show the impact of new features on key error metrics
    • See also: Auto-generated Metrics
  • disableAutoMetricsLogging - boolean, default false (added in v4.13.0)
    • By default, the SDK auto logs javascript performance metrics to Statsig. This will be connected with the metrics and pulse views to show the impact of new features on key performance metrics
    • See also: Auto-generated Metrics
  • initializeValues? Record<string, any> | null, default null (supported in v4.13.0+)
    • Provide the initializeResponse values directly to the Javascript SDK to synchronously initialize the client. You can generate these values from a Statsig Server SDK like the NodeJS Server SDK.
  • eventLoggingApi? string, default 'https://events.statsigapi.net/v1/ (supported in v4.17.0+)
    • The SDK will hit different endpoints for initialize to evaluate gates and for logEvent to log event data. The api option controls the evaluation endpoint, and eventLoggingApi controls the event logging endpoint.
  • prefetchUsers? StatsigUser[] | null, default null (supported in v4.20.0+)
    • An array of additional StatsigUser objects to be fetched during the statsig.initialize call. A max of 5 users is enforced, if more than 5 users are provided, the 5 users at the start of the array will be used.
  • disableLocalStorage? boolean, default false (supported in v4.21.0+)
    • Completely disable the use of local storage for the lifecycle of this initialize -> shutdown. The only access to local storage will be to clear out existing keys when statsig is shutdown
  • initCompletionCallback? (initDurationMs: number, success: boolean, message: string | null) => void, default null
    • A callback that's invoked whenever initialization has completed.
  • updateUserCompletionCallback? (durationMs: number, success: boolean, message: string | null) => void, default null
    • A callback that's invoked whenever an updateUser call has completed.
  • fetchMode? network-only | cache-or-network, default network-only
    • Changes the behavior of updateUser calls. See Fetch Mode for more details.
  • disableDiagnosticsLogging? boolean?, default false
    • Disables non-core diagnostics logging. Some diagnostics logging is required for us to maintain our service, but you can disable optional diagnostic data.
  • initRequestRetries number, default 3
    • The number of times to retry failed requests to initialize for the user. If the initialize timeout is hit first, the request may still retry and save the updated values to cache for future sessions.
  • ignoreWindowUndefined boolean, default false
    • When the global window object is undefined, the sdk will not issue network requests. This prevents additional requests from the SDK when using server side rendering or running in a non-browser environment. To disable that, set this to true.
  • disableHashing boolean default false
    • By default, the /initialize request will return a hashed gate/experiment/layer/config name, rather than the plain text. To disable, reach out to statsig support and then set this option to true.
  • logLevel default NONE
export enum LogLevel {
  NONE = 'NONE',
  INFO = 'INFO',
  DEBUG = 'DEBUG',
  WARN = 'WARN',
  ERROR = 'ERROR',
}
  • the level of logs to output to the console or via a custom logger.
  • logger
export interface LoggerInterface {
  error(message?: any, ...optionalParams: any[]): void;
  info(message?: any, ...optionalParams: any[]): void;
  debug?(message?: any, ...optionalParams: any[]): void;
  warn(message?: any, ...optionalParams: any[]): void;
}
  • A custom logger for redirecting output from stdout.
  • evaluationCallback (args: EvaluationCallbackParams) => void | null default null
evaluationCallback: (args: EvaluationCallbackParams) => void;

export type EvaluationCallbackParams =
  | { type: 'gate'; gate: FeatureGate }
  | { type: 'config' | 'experiment'; config: DynamicConfig }
  | { type: 'layer'; layer: Layer };
  • A callback function invoked for any evaluation, including feature gates, dynamic configs, experiments, and layers. It provides a mechanism to hook into the evaluation lifecycle for custom analytics or logging purposes.

Shutting Statsig Down​

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();

Local Overrides​

If you want to locally override gates/configs/experiments/layers, there are a set of override APIs as follows.

// Overrides the given gate to the specified value
Statsig.overrideGate("a_gate_name", true);
	
// Overrides the given config (dynamic config or experiment) to the provided value
Statsig.overrideConfig("a_config_or_experiment_name", { key: "value" });
	
// Overrides the given layer to the provided value
Statsig.overrideLayer("a_layer_name", { key: "value" });
	
// Removing gate overrides
Statsig.removeGateOverride("a_gate_name"); // Removes a single override
Statsig.removeGateOverride(null); // Removes all gate overrides
	
// Removing config/experiment overrides
Statsig.removeConfigOverride("a_config_or_experiment_name"); // Removes a single override
Statsig.removeConfigOverride(null); // Removes all config/experiment overrides
	
// Removing layer overrides
Statsig.removeLayerOverride("a_layer_name"); // Removes a single override
Statsig.removeLayerOverride(null); // Removes all layer overrides
	
// Returns a StatsigOverrides object, contain all the current overrides
const currentOverrides = Statsig.getAllOverrides()
note
  1. These only apply locally on the device where they are being tested - they do not update definitions in the Statsig console or elsewhere.
  2. These will be persisted to local storage on the device, so overrides will persist across sessions. If you want to clear out the overrides, you can remove them all with removeAllOverrides or remove a specific override with removeOverride
  3. The local override API is not designed to be a full mock. They are only a convenient way to override the value of the gate/config/etc.

Manual Exposures v4.28.0+​

danger

Manually logging exposures can be tricky and may lead to an imbalance in exposure events. For example, only triggering exposures for users in the Test group of an experiment will imbalance the experiment, making it useless.

Added in version 4.28.0, you can now query your gates/experiments without triggering an exposure as well as manually logging your exposures.

To check a gate without an exposure being logged, call the following.

const result = await Statsig.checkGateWithExposureLoggingDisabled('a_gate_name');

Later, if you would like to expose this gate, you can call the following.

Statsig.manuallyLogGateExposure('a_gate_name');

Stable ID​

Each client SDK has the notion of StableID, and identifier that is generated the first time the SDK is initialized and is stored locally for all future sessions. Unless storage is wiped (or app deleted), the StableID will not change. This allows us to run device level experiments and experiments when other user identifiable information is unavailable (Logged out users).

You can get the StableID for the current device with:

Statsig.getStableID();

If you have your own form of StableID and would prefer to use it instead of the Statsig generated ID, you can override it through StatsigOptions:

const opts: StatsigOptions = { overrideStableID: "my_stable_id" };
await Statsig.initialize("client-xyx", null, opts);

FAQ​

How do I run experiments for logged out users?​

See the guide on device level experiments

How can I mock the SDK/override gates in tests?​

The SDK has a few key features to make testing easier:

  1. localMode - a parameter in StatsigOptions which disables all network requests to Statsig servers. This makes the SDK operate only locally, so your tests don't need network access
  2. You can override the values returned from the various APIs. See Local Overrides for more info.

Taken together, localMode and override APIs will help you mock the exact values you want to test.

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.

The SDK has not been tested on IE. Note that Mcrosoft is retiring IE11 in June, 2022

Does the SDK use the browser local storage or cookies? If so, for what purposes?​

The SDK does not use any cookies.

It does use the local storage for feature targeting and experimentation purposes only. Values for feature gates, dynamic configs and experiments are cached in the local storage, which are used as a backup in the event that your website/app cannot reach the Statsig server to fetch the latest values. If any events were logged but could not be sent to Statsig server due to issues like network failure, we also save them in the local storage to be sent again when network restores.