Experiment JavaScript SDK

Official documentation for Amplitude Experiment's Client-side JavaScript SDK implementation.

Install¶

Install the Experiment JavaScript Client SDK.

npm install --save @amplitude/experiment-js-client

yarn add @amplitude/experiment-js-client

<script src="https://unpkg.com/@amplitude/experiment-js-client@1.5.6/dist/experiment.umd.js"></script>
<script>
    // TODO: Replace DEPLOYMENT_KEY with your own deployment, use
    // initializeWithAmplitudeAnalytics() to set up an integration
    // with the Amplitude analytics SDK.
    window.experiment = Experiment.Experiment.initialize('DEPLOYMENT_KEY');
</script>

// (1) Initialize the experiment client
const experiment = Experiment.initialize('<DEPLOYMENT_KEY>');

// (2) Fetch variants for a user
const user = {
    user_id: 'user@company.com',
    device_id: 'abcdefg',
    user_properties: {
        'premium': true,
    },
};
await experiment.fetch(user);

// (3) Lookup a flag's variant
const variant = experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

Core functions¶

The following functions make up the core of the Experiment client-side SDK.

Initialize¶

The SDK client should be initialized in your application on startup. The deployment key argument passed into the apiKey parameter must live within the same project that you are sending analytics events to.

initialize(apiKey: string, config?: ExperimentConfig): ExperimentClient

The initializer returns a singleton instance, so subsequent initializations for the same instance name will always return the initial instance. To create multiple instances, use the instanceName configuration.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>');

Integrations¶

If you use either Amplitude or Segment Analytics SDKs to track events into Amplitude, you'll want to set up an integration on initialization. Integrations automatically implement provider interfaces to enable a more streamlined developer experience by making it easier to manage user identity and track exposures events.

amplitude.getInstance().init('<API_KEY>');
const experiment = Experiment.initializeWithAmplitudeAnalytics('<DEPLOYMENT_KEY>');

class SegmentExposureTrackingProvider implements ExposureTrackingProvider {
    private analytics: Analytics;
    constructor(analytics: Analytics) {
        this.analytics = analytics;
    }
    track(exposure: Exposure) {
        this.analytics.track('$exposure', exposure);
    }
}

analytics.ready(() => {
    const experiment =  Experiment.initialize('<DEPLOYMENT_KEY>', {
        exposureTrackingProvider: new SegmentExposureTrackingProvider(analytics),
    });
});

const userId = analytics.user().id()
const deviceId = analytics.user().analyticsId()
await experiment.fetch({
    user_id: userId,
    device_id: deviceId,
});

Configuration¶

The SDK client can be configured once on initialization.

Fetch¶

Fetches variants for a user and store the results in the client for fast access. This function remote evaluates the user for flags associated with the deployment used to initialize the SDK client.

fetch(user?: ExperimentUser, options?: FetchOptions): Promise<Client>

await fetch({groups: {'org name': ['Amplitude']}});

Amplitude Experiment recommends calling fetch() during application start up so that the user gets the most up-to-date variants for the application session. Furthermore, you'll need to wait for the fetch request to return a result before rendering the user experience to avoid the interface "flickering".

const user = {
    user_id: 'user@company.com',
    device_id: 'abcdefg',
    user_properties: {
        'premium': true,
    },
};
await experiment.fetch(user);

If you're using an integration or a custom user provider then you can fetch without inputting the user.

await experiment.fetch();

Variant¶

Access a variant for a flag or experiment from the SDK client's local store.

variant(key: string, fallback?: string | Variant): Variant

When determining which variant a user has been bucketed into, you'll want to compare the variant value to a well-known string.

const variant = experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    // Flag is on
} else {
    // Flag is off
}

const variant = experiment.variant('<FLAG_KEY>');
if (variant.value === 'on') {
    const payload = variant.payload;
}

A null variant value means that the user hasn't been bucketed into a variant. You may use the built in fallback parameter to provide a variant to return if the store doesn't contain a variant for the given flag key.

const variant = experiment.variant('<FLAG_KEY>', { value: 'control' });
if (variant === 'control') {
    // Control
} else if (variant === 'treatment') {
    // Treatment
}

All¶

Access all variants stored by the SDK client.

all(): Variants

Clear¶

Clear all variants in the cache and storage.

clear(): void

You can call clear after user logout to clear the variants in cache and storage.

experiment.clear();

Exposure¶

Manually track an exposure event for the current variant of the given flag key through configured integration or custom exposure tracking provider. Generally used in conjunction with setting the automaticExposureTracking configuration optional to false.

exposure(key: string): void

const variant = experiment.variant('<FLAG_KEY>');

// Do other things...

experiment.exposure('<FLAG_KEY>');
if (variant === 'control') {
    // Control
} else if (variant === 'treatment') {
    // Treatment
}

Providers¶

Provider implementations enable a more streamlined developer experience by making it easier to manage user identity and track exposures events.

User provider¶

The user provider is used by the SDK client to access the most up-to-date user information only when it's needed (for example, when fetch() is called). This provider is optional, but helps if you have a user information store already set up in your application. This way, you don't need to manage two separate user info stores in parallel, which may result in a divergent user state if the application user store is updated and experiment isn't (or via versa).

interface ExperimentUserProvider {
  getUser(): ExperimentUser;
}

To use your custom user provider, set the userProvider configuration option with an instance of your custom implementation on SDK initialization.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    userProvider: new CustomUserProvider(),
});

Exposure tracking provider¶

Implementing an exposure tracking provider is highly recommended. Exposure tracking increases the accuracy and reliability of experiment results and improves visibility into which flags and experiments a user is exposed to.

export interface ExposureTrackingProvider {
  track(exposure: Exposure): void;
}

The implementation of track() should track an event of type $exposure (a.k.a name) with two event properties, flag_key and variant, corresponding to the two fields on the Exposure object argument. Finally, the event tracked must eventually end up in Amplitude Analytics for the same project that the [deployment] used to initialize the SDK client lives within, and for the same user that variants were fetched for.

To use your custom user provider, set the exposureTrackingProvider configuration option with an instance of your custom implementation on SDK initialization.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    exposureTrackingProvider: new CustomExposureTrackingProvider(),
});

Bootstrapping¶

You may want to bootstrap the experiment client with an initial set of flags and variants when variants are obtained from an external source (for example, not from calling fetch() on the SDK client). Use cases include local evaluation, server-side rendering, or integration testing on specific variants.

To bootstrap the client, set the flags and variants in the initialVariants configuration object, then set the source to Source.InitialVariants so that the SDK client prefers the bootstrapped variants over any previously fetched & stored variants for the same flags.

const experiment = Experiment.initialize('<DEPLOYMENT_KEY>', {
    initialVariants: { /* Flags and variants */ },
    source: Source.InitialVariants,
});

Still have questions? Ask them in the Community.