Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

Optimizely will be sunsetting Full Stack Experimentation on July 29, 2024. See the recommended Feature Experimentation migration timeline and documentation.

Dev GuideAPI Reference
Dev GuideAPI ReferenceUser GuideLegal TermsGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev Guide

Initialize SDK

This topic describes how to initialize the Optimizely JavaScript (Browser) SDK in your application.

Use the createInstance method to initialize the JavaScript SDK and instantiate an instance of the Optimizely client class that exposes API methods like Get Enabled Features. Each client corresponds to the datafile representing the state of a project for a certain environment.

Version

SDK v3.2.1

Description

The createInstance method accepts a configuration object to configure Optimizely.

Some parameters are optional because the SDK provides a default implementation, but you may want to override these for your production environments. For example, you may want override these to set up an error handler and logger to catch issues, an event dispatcher to manage network calls, and a User Profile Service to ensure sticky bucketing.

Parameters

The table below lists the required and optional properties of the config object:

ParameterTypeDescription
datafile
optional
stringThe JSON string representing the project. At least one of sdkKey or datafile must be provided.
sdkKey
optional
stringThe key associated with an environment in the project. At least one of sdkKey or datafile must be provided.
eventDispatcher
optional
objectAn event dispatcher to manage network calls. An object with a dispatchEvent method.
logger
optional
objectA logger implementation to log messages. An object with a log method.
errorHandler
optional
objectAn error handler object to handle errors. An object with a handleError method
userProfileService
optional
objectA user profile service. An object with lookup and save methods.
jsonSchemaValidator
optional
objectTo perform JSON schema validation on datafiles, import the validator from '@optimizely/optimizely-sdk/dist/optimizely.json_shema_validator.min.js', and pass it as this initialization option. Skipping JSON schema validation enhances performance during initialization.
datafileOptions
optional
objectObject with configuration for automatic datafile management. Can have autoUpdate (Boolean), urlTemplate (string), and updateInterval (number) properties.
access_token
optional
stringServer-side (only) Optimizely SDKs can use an access token (with sdkkey) to fetch the datafile from an authenticated endpoint. Find your datafile access token in the Optimizely app at Settings>Environments. Select your secure environment, and copy the _Datafile access token.

Returns

An instance of the Optimzely class.

Examples

In the JavaScript SDK, you can provide either sdkKey or datafile or both.

  • When initializing with just the SDK key, the datafile will be automatically downloaded
  • When initializing with just the datafile, the SDK will use the given datafile.
  • When initializing with both the SDK key and datafile, the SDK will use the given datafile to start, then download the latest version of the datafile in the background.

Instantiate using datafile

First, get a copy of the datafile from our server. Then, instantiate the client.

// minimal client
var optimizely = require('@optimizely/optimizely-sdk');

const rp = require("request-promise");

// Rplace <Your_SDK_Key> to get the datafile
const DATAFILE_URL =
  "https://cdn.optimizely.com/datafiles/<Your_SDK_Key>.json";
const datafile = await rp({ uri: DATAFILE_URL, json: true });
console.log("Datafile:", datafile);
const optimizelyClient = optimizely.createInstance({
  datafile
});
// Use optimizelyClient to run experiments
<!--step 1: add a <script> tag in your <head> tag: 
 this adds the datafile on the window variable window.optimizelyDatafile-->

<script src="https://cdn.optimizely.com/datafiles/<Your_SDK_KEY>.json/tag.js"></script>

<!--step 2. after the <body> tag, add a new <script> tag to instantiate an Optimizely client  from the datafile:-->

<script>
  var optimizelyClientInstance = window.optimizelySdk.createInstance({
    datafile: window.optimizelyDatafile
  });
</script>

If you do not pass in an SDK key, the Optimizely Client will not automatically sync newer versions of the datafile. Any time you retrieve an updated datafile, just re-instantiate the same client.

For simple applications, all you need to provide to instantiate a client is a datafile specifying the project configuration for a given environment. For most advanced implementations, you will want to customize the logger or error handler for your specific requirements.

Instantiate using SDK Key

To instantiate using SDK Key, obtain the SDK Key from your project's settings page, then pass sdkKey as a string property in the options object you pass to the createInstance method.

const optimizely = require('@optimizely/optimizely-sdk');
const optimizelyClient = optimizely.createInstance({
  sdkKey: '<Your_SDK_Key>', // Provide the sdkKey of your desired environment here
});

When you provide the sdkKey, the SDK instance asynchronously downloads the datafile associated with that sdkKey. When the download completes, the SDK instance updates itself to use the downloaded datafile. You can use the onReady promise method to wait for the datafile to be downloaded before using the instance.

const optimizely = require('@optimizely/optimizely-sdk');
const optimizelyClient = optimizely.createInstance({
  sdkKey: '<Your_SDK_Key>', // Provide the sdkKey of your desired environment here
});
optimizelyClient.onReady().then(() => {
  // optimizelyClientInstance is ready to use, with datafile downloaded from the
  // Optimizely CDN
});

For simple applications, all you need to provide to instantiate a client is a datafile specifying the project configuration for a given environment. For most advanced implementations, you will want to customize the logger or error handler for your specific requirements.

Notes

Customize datafile management behavior

To customize datafile management behavior, provide a datafileOptions object property inside the options object passed to createInstance. The table lists the supported customizable options.

OptionTypeDescription
autoUpdatebooleanWhen true, and sdkKey was provided in createInstance options, automatic updates are enabled on this instance. The default value is false.
updateIntervalnumberWhen automatic updates are enabled, this controls the update interval. The unit is milliseconds. The minimum allowed value is 1000 (1 second). The default value is 300000 milliseconds (5 minutes).
urlTemplatestringA format string used to build the URL from which the SDK will request datafiles. Instances of %s will be replaced with the sdkKey. When not provided, the SDK will request datafiles from the Optimizely CDN.

The following example shows how to customize datafile management behavior:

const optimizely = require('@optimizely/optimizely-sdk');

const optimizelyClientInstance = optimizely.createInstance({
  sdkKey: '<Your_SDK_Key>',
  datafileOptions: {
    autoUpdate: true,
    updateInterval: 600000, // 10 minutes in milliseconds
    urlTemplate: 'http://localhost:5000/datafiles/%s.json',
  },
});

onReady details

Use the onReady method to wait until the download is complete and the SDK is ready to use.

The onReady method returns a Promise representing the initialization process.
onReady accepts an optional timeout argument (defined in milliseconds) that controls the maximum duration that the returned Promise will remain in the pending state. If timeout is not provided, it defaults to 30 seconds.

const optimizely = require('@optimizely/optimizely-sdk');
let optimizelyClient = optimizely.createInstance({
  sdkKey: '<Your_SDK_Key>',
});
optimizelyClient.onReady().then(() => {
  // optimizelyClient is ready to use, with datafile downloaded from the Optimizely CDN
});

// Provide a timeout in milliseconds - promise will resolve if the datafile still is not available after the timeout
instance.onReady({ timeout: 5000 }).then(result => {
  // Returned Promise is fulfilled with a result object
  console.log(result.success); // true if the instance fetched a datafile and is now ready to use
  console.log(result.reason); // If success is false, reason contains an error message
})

The Promise returned from the onReady method is fulfilled with a result object containing a boolean success property.

When the success property is true, the instance is ready to use with a valid datafile. When the success property is false, there is also a reason string property describing the failure. Failure can be caused by expiration of the timeout, network error, unsuccessful HTTP response, datafile validation error, or the instance's close method being called.

Set a fallback datafile

If you provide an sdkKey and a static fallback datafile for initialization, the SDK uses the fallback datafile immediately if it is valid while simultaneously downloading the datafile associated with the sdkKey. After the download completes, if the downloaded datafile is valid and has a more recent revision than the fallback datafile, the SDK updates the instance to use the downloaded datafile.

const optimizely = require('@optimizely/optimizely-sdk');
const datafile = '{"version": "4", "rollouts": [], "typedAudiences": [], "anonymizeIP": false, "projectId": "12345", "variables": [], "featureFlags": [], "experiments": [], "audiences": [], "groups": [], "attributes": [], "botFiltering": false, "accountId": "12345", "events": [], "revision": "1"}'; 
const optimizelyClient = optimizely.createInstance({
  sdkKey: '<Your_SDK_Key>',
  datafile,
});
// optimizelyClient can be used immediately with the given datafile, but
// will download the latest datafile and update itself

Use authenticated datafile in secure environment

You can fetch the Optimizely datafile from an authenticated endpoint using a server-side (only) Optimizely SDK. To use an authenticated datafile, download your Optimizely environment's access token from the Optimizely app at Settings>Environments. Select your secure environment, and copy the Datafile access token. The example below shows how to initialize the Optimizely client using an access token and sdk_key, enabling the client to fetch the authenticated datafile and complete initialization.

const optimizely = require('@optimizely/optimizely-sdk');

// fetch the datafile from an authenticated endpoint
const optimizelyClientInstance = optimizely.createInstance({
  sdkKey: '<YOUR_SDK_KEY>',
  datafileOptions: {
    datafileAccessToken: '<YOUR_DATAFILE_ACCESS_TOKEN>',
  },
});

Source files

The source code files containing the implementation for the JavaScript SDK are at index.ts. You can see the Optimizely class definition at this source.