Example usage

This topic gives a brief code example of how to use the Optimizely JavaScript (Browser) SDK to evaluate feature flags, activate A/B tests, or feature tests.

Suggest Edits

Once you have installed the JavaScript SDK, import the Optimizely library into your code, get your Optimizely project's datafile, and instantiate a client. Then, you can use the client to evaluate feature flags, activate an A/B test, or feature test.

This example demonstrates the basic usage of each of these concepts. This example shows how to:

Evaluate a feature with the key price_filter and check a configuration variable on it called min_price. The SDK evaluates your feature test and rollouts to determine whether the feature is enabled for a particular user, and which minimum price they should see if so.
Run an A/B test called app_redesign. This experiment has two variations, control and treatment. It uses the activate method to assign the user to a variation, returning its key. As a side effect, the activate function also sends an impression event to Optimizely to record that the current user has been exposed to the experiment.
Use event tracking to track an event called purchased. This conversion event measures the impact of an experiment. Using the track method, the purchase is automatically attributed back to the running A/B and feature tests we've activated, and the SDK sends a network request to Optimizely via the customizable event dispatcher so we can count it in your results page.

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(() => {
  // Evaluate a feature flag and a variable
  const enabled = optimizelyClient.isFeatureEnabled("price_filter", userId);
  const min_price = optimizelyClient.getFeatureVariableInteger(
    "price_filter",
    "min_price",
    userId
  );

  // Activate an A/B test
  const variation = optimizelyClient.activate("app_redesign", userId);
  if (variation === "control") {
    // Execute code for variation A
  } else if (variation === "treatment") {
    // Execute code for variation B
  } else {
    // Execute code for users who don't qualify for the experiment
  }
});

// Track an event
optimizelyClient.track("purchased", userId);

<html>

<head>
  <title>Hello world</title>
  <!-- Install Optimizely SDK -->
  <script src="https://unpkg.com/@optimizely/optimizely-sdk/dist/optimizely.browser.umd.min.js"></script>
  <!-- Add your datafile using your SDK key so you can later instantiate an  Optimizely client -->
  <script src="https://cdn.optimizely.com/datafiles/<Your_Sdk_Key>.json/tag.js"></script>
</head>

<body>
  <h1>Hello world</h1>
</body>

<script>
  // instantiate an Optimizely client from the datafile
  var optimizelyClient = window.optimizelySdk.createInstance({
    datafile: window.optimizelyDatafile
  });
  // Evaluate a feature flag and a variable
  var enabled = optimizelyClient.isFeatureEnabled('price_filter', userId);
  var min_price = optimizelyClient.getFeatureVariableInteger('price_filter', 'min_price', userId);
  // Activate an A/B test
  var variation = optimizelyClient.activate('app_redesign', userId);
  if (variation === 'control') {
    // Execute code for variation A
  } else if (variation === 'treatment') {
    // Execute code for variation B
  } else {
    // Execute code for users who don't qualify for the experiment
  }
  // Track an event
  optimizelyClient.track('purchased', userId);
</script>

</html>

Updated almost 3 years ago