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

The availability of features may depend on your plan type. Contact your Customer Success Manager if you have any questions.

Dev guideRecipesAPI ReferenceChangelog
Dev guideAPI ReferenceRecipesChangelogUser GuideGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev guide

OptimizelyConfig for the JavaScript SDK v6

How to get access to project configuration data within the datafile for the JavaScript (Browser) SDK using OptimizelyConfig.

❗️

Warning

This content covers the Feature Experimentation JavaScript (Browser) SDK v6 features currently in pre-production testing and is subject to change before release

For the latest released version, see JavaScript (Browser) SDK.

Optimizely Feature Experimentation SDKs open a well-defined set of public APIs, hiding implementation details. However, you may need access to project configuration data within the datafile. The following section extend the public APIs to define data models and access methods, which you can use to access project configuration data.

Minimum SDK version

v6.0.0+

OptimizelyConfig API

A public configuration data model (OptimizelyConfig) is defined as a structured format of static Optimizely Project data.

Get OptimizelyConfig

OptimizelyConfig can be accessed from the OptimizelyClient (top-level) with this public API call.

const config = optimizely.getOptimizelyConfig();

getOptimizelyConfig returns an OptimizelyConfig instance, which includes the following:

  • Environment key.
  • SDK key.
  • The datafile revision number.
  • All experiments mapped by their key values.
  • All attributes.
  • All audiences.
  • All events.
  • Feature flags mapped by their key values.

📘

Note

When the SDK datafile is updated (you can add a notification listener for OPTIMIZELY_CONFIG_UPDATE to get notified), you are expected to call the method to get the updated OptimizelyConfig data. See the following examples.

Get datafile

To share the same datafile between multiple SDK instances (for example, in a client and server scenario), you can pass a JSON string representation of the config (the datafile) between the instances. To get the datafile, use the OptimizelyConfig object's getDatafile method. For more information, see Sharing the datafile with multiple SDK implementations.

Object model

The following sample shows the object model for OptimizelyConfig:

export interface OptimizelyConfig {
  environmentKey: string;
  sdkKey: string;
  revision: string;

  /**
   * This experimentsMap is for experiments of legacy projects only.
   * For flag projects, experiment keys are not guaranteed to be unique
   * across multiple flags, so this map may not include all experiments
   * when keys conflict.
   */
  experimentsMap: OptimizelyExperimentsMap;

  featuresMap: OptimizelyFeaturesMap;
  attributes: OptimizelyAttribute[];
  audiences: OptimizelyAudience[];
  events: OptimizelyEvent[];
  getDatafile(): string;
}

export type OptimizelyExperimentsMap = {
  [experimentKey: string]: OptimizelyExperiment;
}

export interface OptimizelyExperiment {
  id: string;
  key: string;
  audiences: string;
  variationsMap: {
    [variationKey: string]: OptimizelyVariation;
  };
}

export interface OptimizelyVariation {
  id: string;
  key: string;
  featureEnabled?: boolean;
  variablesMap: OptimizelyVariablesMap;
}

export type OptimizelyVariablesMap = {
  [variableKey: string]: OptimizelyVariable;
}

export interface OptimizelyVariable {
  id: string;
  key: string;
  type: string;
  value: string;
}

export type OptimizelyFeaturesMap = {
  [featureKey: string]: OptimizelyFeature;
}

export interface OptimizelyFeature {
  id: string;
  key: string;
  experimentRules: OptimizelyExperiment[];
  deliveryRules: OptimizelyExperiment[];
  variablesMap: OptimizelyVariablesMap;

  /**
   * @deprecated Use experimentRules and deliveryRules
   */
  experimentsMap: OptimizelyExperimentsMap;
}

export type OptimizelyAttribute = {
  id: string;
  key: string;
};

export type OptimizelyAudience = {
  id: string;
  name: string;
  conditions: string;
};

export type OptimizelyEvent = {
  id: string;
  key: string;
  experimentIds: string[];
};

Examples

OptimizelyConfig can be accessed from OptimizelyClient (top-level) like the following code sample:

import { NOTIFICATION_TYPES } from '@optimizely/optimizely-sdk';

const config = optimizely.getOptimizelyConfig();

console.log(`[OptimizelyConfig] revision = ${config.revision}`);
console.log(`[OptimizelyConfig] sdkKey = ${config.sdkKey}`);
console.log(`[OptimizelyConfig] environmentKey = ${config.environmentKey}`);

console.log(`[OptimizelyConfig] attributes:`);
config.attributes.forEach((attribute) => {
  console.log(`[OptimizelyAttribute]   -- (id, key) = (${attribute.id}, ${attribute.key})`);
});

console.log(`[OptimizelyConfig] audiences:`);
config.audiences.forEach((audience) => {
  console.log(
    `[OptimizelyAudience]   -- (id, name, conditions) = = (${audience.id}, ${audience.name}, ${audience.conditions})`
  );
});

console.log(`[OptimizelyConfig] events:`);
config.events.forEach((event) => {
  console.log(
    `[OptimizelyEvent]   -- (id, key, experimentIds) = (${event.id}, ${event.key}, ${event.experimentsIds})`
  );
});

// all flags
const flags = [];
const flagKeys = [];
for (let key in config.featuresMap) {
  flags.push(config.featuresMap[key]);
  flagKeys.push(key);
}

flagKeys.forEach((flagKey) => {
  const flag = config.featuresMap[flagKey];

  const experimentRules = flag.experimentRules;
  const deliveryRules = flag.deliveryRules;

  // use experiment rules and delivery rules and other flag data here...

  experimentRules.forEach((experiment) => {
    console.log(`[OptimizelyExperiment]   - experiment rule-key = ${experiment.key}`);
    console.log(`[OptimizelyExperiment]   - experiment audiences = ${experiment.audiences}`);

    const variationsMap = experiment.variationsMap;
    const variationKeys = [];

    for (let key in variationsMap) {
      variationKeys.push(key);
    }

    variationKeys.forEach((varKey) => {
      const variation = variationsMap[varKey];
      console.log(
        `[OptimizelyVariation]       -- variation = { key: ${varKey}, id: ${variation.id}, featureEnabled: ${variation.featureEnabled} })`
      );

      const variablesMap = variationsMap[varKey].variablesMap;
      const variableKeys = [];

      for (let key in variablesMap) {
        variableKeys.push(key);
      }

      variableKeys.forEach((variableKey) => {
        const variable = variablesMap[variableKey];
        console.log(`[OptimizelyVariable]           --- variable: ${variableKey}, ${variable}`);
      });
    });
  });

  deliveryRules.forEach((delivery) => {
    console.log(`[OptimizelyExperiment]   - delivery rule-key = ${delivery.key}`);
    console.log(`[OptimizelyExperiment]   - delivery audiences = ${delivery.audiences}`);

    // use delivery rule data here...
  });
});

// listen to OPTIMIZELY_CONFIG_UPDATE to get updated data
optimizely.notificationCenter.addNotificationListener(
  NOTIFICATION_TYPES.OPTIMIZELY_CONFIG_UPDATE,
  () => {
    const newConfig = optimizely.getOptimizelyConfig();
    console.log(`[OptimizelyConfig] revision = ${newConfig.revision}`);
  }
);