JavaScript Local Evaluation
Getting Started
The following will outline how to get up and running with Statsig for JS Local Evaluation.Client SDK with Local Evaluation
The statsig-js-local-eval
sdk is really the first of its kind - its a client SDK that behaves more like our server SDKs. Rather than require a user up front, you can check gates/configs/experiments for any set of user properties, because the SDK downloads the definition of your project.
The are a number of tradeoffs to consider when using this client SDK vs the statsig-js
client sdk:
Pros | Cons |
---|---|
No need for a network request when changing user properties - just check the gate/config/experiment locally | Entire project definition is available client side - the names and configurations of all experiments and feature flags accessible by your client key are exposed. |
Can bring your own cdn or synchronously initialize with a preloaded project definition | Payload size is strictly larger than what is required for the statsig-js sdk |
Lower latency to download configs cached at the edge, rather than evaluated for a given user (which cannot be cached as much) | Evaluation performance is slightly slower - rather than looking up the value, the sdk must actually evaluate targeting conditions and an allocation decision |
Does not support ID list segments with > 1000 IDs, nor automatic IP/UA based checks (Browser Version/Name, OS Version/Name, IP, Country) |
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 JS with Local Evaluation SDK via npm, yarn or jsdelivr:
- Script
- NPM
- Yarn
Statsig is available from jsdelivr, an open source CDN.
To access the current primary JavaScript bundle, use:
https://cdn.jsdelivr.net/npm/statsig-js-local-eval/build/statsig-prod-web-sdk.min.js
To access specific files/versions:
http://cdn.jsdelivr.net/npm/statsig-js-local-eval@{version}/{file}
<script src="https://cdn.jsdelivr.net/npm/statsig-js-local-eval/build/statsig-prod-web-sdk.min.js"></script>
npm install statsig-js-local-eval
yarn add statsig-js-local-eval
Initialize the SDK
Initialize the SDK using a Client SDK key from the "API Keys" tab on the Statsig console. When creating the key, or using an existing key, you will need to add the "Allow Download Config Specs" scope. Client keys, by default, are not able to download the project definition to do local evaluation. You must opt in to allow your client key to access your full project definition on our cdn.
To add the scope to an existing key, under Project Settings >> API Keys >> Client API Keys, select Actions >> Edit Scopes, and "Allow Download Config Specs", then Save.
When creating a new client key, select "Allow Download Config Specs"
info
Do NOT embed your Server Secret Key in client side applications.
- Async Initialization
- Synchronous Initialization
import Statsig from "statsig-js-local-eval";
// initialize returns a promise which always resolves
await Statsig.initializeAsync(
"client-sdk-key",
{ environment: { tier: "staging" } } // optional, pass options here if needed
);
<script src="https://api.statsigcdn.com/v1/download_config_specs/client-key.js" />
NOTE: you may need to allow https://api.statsigcdn.com/ in your Content-Security-Policy
import Statsig from "statsig-js-local-eval";
// initialize returns a promise which always resolves
Statsig.initialize(
"client-sdk-key",
{
initializeValues: window.statsigConfigSpecs // set via the script above, or bring your own CDN for specs
}
);
Working with the SDK
Checking a Gate
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 are always CLOSED or OFF (think return false;
) by default.
if (Statsig.checkGate({userID: "123"}, "new_homepage_design")) {
// Gate is on, show new home page
} else {
// Gate is off, show old home page
}
// Check with different properties without a network request to update sdk state
Statsig.checkGate(
{
email: "docs@statsig.com",
customIDs: {deviceID: "abc"}
},
"new_homepage_design",
)
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-local-eval";
const config: DynamicConfig = Statsig.getConfig({userID: "456"}, "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-local-eval";
// Values via getLayer
const layer: Layer = Statsig.getLayer({email: "test@statsig.com", customIDs: {pageID: "123"}}, "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(
{email: "test@statsig.com", customIDs: {businessID: "abc"}},
"new_user_promo_title"
);
const priceExperiment: DynamicConfig = Statsig.getExperiment(
{email: "test@statsig.com"},
"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({userID: "123"}, "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.
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!
Statsig Options
statsig.initializeAsync()
and 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:
User properties
- 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.
- 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.
- The SDK will automatically add an entry in
customIDs
in the user object for the currentstableID
Endpoint Overrides
- configSpecAPI - default https://api.statsig.com/v1/
- The endpoint to download the config spec definition for your project. You should likely not override this unless you are hosting your config spec on your own cdn. Defaults to
https://api.statsigcdn.com/v1/download_config_specs/<client_key>.json
, used for async initialization
- The endpoint to download the config spec definition for your project. You should likely not override this unless you are hosting your config spec on your own cdn. Defaults to
- eventLoggingApi?
string
, default'https://events.statsigapi.net/v1/rgstr/
- The SDK will hit different endpoints for downloading config definitions to evaluate gates and for
rgstr|log_event
to log event data.eventLoggingApi
controls the event logging endpoint.
- The SDK will hit different endpoints for downloading config definitions to evaluate gates and for
Event Logging Parameters
- 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
- How frequently to flush logs to statsig (milliseconds)
- loggingBufferMaxSize: number, default 10), min 2, max 500
- Maximum number of events to buffer before flushing events to statsig
Initialization
- initializeValues? Record<string, any> | null, default null
- Provide the
download_config_specs
values directly to the Javascript SDK to synchronously initialize the client - You may wish to fetch this from the default
js
snippet we provide on our cdn. See "Synchronous Initialization" for more details - Only used when calling
statsig.initialize()
- Provide the
- initTimeoutMs? number, default
3000
- For asynchronous initialization, the time to wait for the project definition to be downloaded before falling back to cached or default values
- Only used when calling
statsig.initializeAsync()
Networking and Local Storage
- 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"
)
- 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.
- ignoreWindowUndefined?
boolean
, defaultfalse
- By default, the SDK will not issue network requests when the global
window
is undefined. If you are trying to execute in a server environment for SSR, you may wish to override this. A better approach would be to bootstrap the sdk from the server rather than issuing a network request, but this can be used to unblock testing
- By default, the SDK will not issue network requests when the global
- disableLocalStorage?
boolean
, defaultfalse
- 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 isshutdown
- Completely disable the use of local storage for the lifecycle of this
- disableNetworkKeepalive: boolean, default false. sdk
- Entirely disables the keepalive flag from being appended to network requests issued by the SDK
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:
- TypeScript
- JavaScript
Statsig.shutdown();
Statsig.shutdown();
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);
Using Persistent Evaluations
If you want to ensure that a user's variant stays consistent while an experiment is running, regardless of changes to allocation or targeting, you can implement the UserPersistentStorageInterface
and set it in StatsigOptions
when you initialize the SDK.
Synchronous Persistent Evaluations
The UserPersistentStorageInterface
exposes two methods for synchronous persistent storage, which will be called by default when evaluating an experiment.
export interface UserPersistentStorageInterface {
load(key: string): string
save(key: string, data: string): void
...
}
The key
string is a combination of ID and ID Type: e.g. "123:userID" or "abc:stableID" which the SDK will construct and call get
and set
on by default
You can use this interface to persist evaluations synchronously to local storage. If you need an async interface, read on.
Asynchronous Persistent Evaluations
The UserPersistentStorageInterface
exposes two methods for asyncronous persistent evaluations. Because the getExperiment
call is synchronous, you must load the value first, and pass it in as userPersistedValues
export interface UserPersistentStorageInterface {
loadAsync(key: string): Promise<string>
save(key: string, data: string): void
...
}
For your convenience, we've created a top level method to load the value for a given user and ID Type:
const userPersistedValues = await statsig.loadUserPersistedValuesAsync(
user: StatsigUser,
idType: string, // userID, stableID, customIDxyz, etc
);
Putting it all together, assuming you have implemented the UserPersistentStorageInterface
and set it on StatsigOptions
, your callsite will look like this:
const user = { userID: "123" };
const userValues = await statsig.loadUserPersistedValuesAsync(user, 'userID');
const experiment = statsig.getExperiment({userID: "123"}, 'the_allocated_experiment', { userPersistedValues: userValues });
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:
localMode
- a parameter inStatsigOptions
which disables all network requests to Statsig servers. This makes the SDK operate only locally, so your tests don't need network access
We recommend mocking results for your gates and experiments for programmatic testing, via jest or your test framework of choice.
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.