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.
Overview
Optimizely Feature Experimentation SDKs open a well-defined set of public APIs, hiding all implementation details. However, some clients may need access to project configuration data within the datafile.
In this document, we extend our public APIs to define data models and access methods, which clients can use to access project configuration data.
OptimizelyConfig API
A public configuration data model (OptimizelyConfig) is defined below as a structured format of static Optimizely Project data.
Get OptimizelyConfig
OptimizelyConfig can be accessed from OptimizelyClient (top-level) with this public API call:
const optlyConfig = optimizelyClient.getOptimizelyConfig();
getOptimizelyConfig returns an OptimizelyConfig instance, which includes
- 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 (the client can add a notification listener for
OPTIMIZELY_CONFIG_UPDATEto get notified), the client is expected to call the method to get the updated OptimizelyConfig data. See examples below.
Get datafile
To ensure that multiple SDK instances all instantiate from the same configuration (for example, in a client/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 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 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
OptimizelyConfig can be accessed from OptimizelyClient (top-level) like this:
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 flags
const 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 data
optimizelyClient.notificationCenter.addNotificationListener(
enums.NOTIFICATION_TYPES.OPTIMIZELY_CONFIG_UPDATE,
function () {
const newConfig = optimizelyClient.getOptimizelyConfig();
console.log(`[OptimizelyConfig] revision = ${newConfig.revision}`);
}
);
Updated over 1 year ago