OptimizelyConfig for the React SDK
How to get access to project configuration data within the datafile using OptimizelyConfig for the Optimizely Feature Experimentation React 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 thedatafile. The following section extends the public APIs to define data models and access methods, which you can use to access project configuration data.
OptimizelyConfig API
A public configuration data model (OptimizelyConfig) is defined as a structured format of static Optimizely Project data.
GetOptimizelyConfig
OptimizelyConfigYou can accessOptimizelyConfig through theOptimizelyClient (top-level) using this public API call.
const optlyConfig = optimizelyClient.getOptimizelyConfig();getOptimizelyConfig returns anOptimizelyConfig instance, which includes the following:
- Environment key
- SDK key
- Datafile revision number
- Experiments mapped by key values
- All attributes
- All audiences
- All events
- Feature flags mapped by key values
📘
NoteWhen the system updates the datafile, you can add aOptimizelyConfigUpdate notification listener to get notified. After receiving the notification, call the method to get the updated
OptimizelyConfigdata.
Get datafile
To share the same datafile between multiple SDK instances, such as in a client and server scenario, pass a JSON string representation of the config (the datafile) between instances. To get the datafile, use the OptimizelyConfig object's getDatafile method. For more information, seeSharing the datafile with multiple SDK implementations.
Object model
The following sample shows the object model forOptimizelyConfig:
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 instead */ 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; experimentsIds: string[];};Examples
You can accessOptimizelyConfig from theOptimizelyClient (top-level) using the following code example:
import { enums } from '@optimizely/react-sdk';const config = optimizelyClient.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 flagsconst flags = [];const flagKeys = [];for (var 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 (var 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 (var 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 dataoptimizelyClient.notificationCenter.addNotificationListener( enums.NOTIFICATION_TYPES.OPTIMIZELY_CONFIG_UPDATE, function () { const newConfig = optimizelyClient.getOptimizelyConfig(); console.log(`[OptimizelyConfig] revision = ${newConfig.revision}`); });Updated 17 days ago