Configure a notification listener using the JavaScript SDK v6
How to configure and remove notification listeners for the Optimizely Feature Experimentation JavaScript (Browser) SDK.
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.
Notification listeners trigger a callback function that you define when certain actions are triggered in the SDK.
The most common use case is to send a stream of all feature flag decisions to an analytics provider or to an internal data warehouse to join it with other data that you have about your users.
Minimum SDK version
v6.0.0+
Notification listener types
For information about notification listener types and use cases, see Notification listeners.
Note
The following code examples assume you have already initialized the JavaScript (Browser) SDK and have created an
optimizelyClientinstance.
Add and remove all notification listeners
The following example code shows how to add a listener, remove a listener, remove all listeners of a specific type (such as all decision listeners), and remove all listeners.
import {
createInstance,
createPollingProjectConfigManager,
NOTIFICATION_TYPES,
} from "@optimizely/optimizely-sdk";
const SDK_KEY = "YOUR_SDK_KEY";
const pollingConfigManager = createPollingProjectConfigManager({
sdkKey: SDK_KEY,
});
const optimizely = createInstance({
projectConfigManager: pollingConfigManager,
});
// Add Notification Listener
const notificationId = optimizely.notificationCenter.addNotificationListener(
NOTIFICATION_TYPES.DECISION,
({ type, userId, attributes, decisionInfo }) => {
console.log(type, userId, attributes, decisionInfo);
}
);
// Remove Notification Listener
optimizely.notificationCenter.removeNotificationListener(notificationId);
// Remove All Notification Listeners
optimizely.notificationCenter.clearAllNotificationListeners();
// Remove all Notification Listeners of a certain type
optimizely.notificationCenter.clearNotificationListeners(
NOTIFICATION_TYPES.DECISION
);
Configure each type of notification listener
The following example code shows how to configure each type of notification listener.
import {
createInstance,
createPollingProjectConfigManager,
NOTIFICATION_TYPES,
} from "@optimizely/optimizely-sdk";
const SDK_KEY = "YOUR_SDK_KEY";
const pollingConfigManager = createPollingProjectConfigManager({
sdkKey: SDK_KEY,
});
const optimizely = createInstance({
projectConfigManager: pollingConfigManager,
});
/////////////////////////////////////////////
// COFIGURE DECISION NOTIFICATION LISTENER //
/////////////////////////////////////////////
const onDecision = ({ type, userId, attributes, decisionInfo }) => {
// Add a DECISION Notification Listener for type FLAG
if (type === "flag") {
// Access information about feature, for example, key and enabled status
console.log(decisionInfo["flagKey"]);
console.log(decisionInfo["enabled"]);
console.log(decisionInfo["decisionEventDispatched"]);
// Send data to analytics provider here
}
};
const notificationId = optimizely.notificationCenter.addNotificationListener(
NOTIFICATION_TYPES.DECISION,
onDecision
);
///////////////////////////////////////////////
// CONFIGURE LOG EVENT NOTIFICATION LISTENER //
///////////////////////////////////////////////
const onLogEvent = (logEvent) => {
// process the logEvent object here (send to analytics provider, audit/inspect data)
};
optimizely.notificationCenter.addNotificationListener(
NOTIFICATION_TYPES.LOG_EVENT,
onLogEvent
);
///////////////////////////////////////////////////////
// CONFIGURE OPTIMIZELY CONFIG NOTIFICATION LISTENER //
///////////////////////////////////////////////////////
// listen to OPTIMIZELY_CONFIG_UPDATE to get updated data
// You get notifications whenever the datafile is updated except for SDK initialization
const onConfigUpdateListener = () => {
const config = optimizely.getOptimizelyConfig();
};
optimizely.notificationCenter.addNotificationListener(
NOTIFICATION_TYPES.OPTIMIZELY_CONFIG_UPDATE,
onConfigUpdateListener
);
///////////////////////////////////////////
// CONFIGURE TRACK NOTIFICATION LISTENER //
///////////////////////////////////////////
const onTrack = (event) => {
// process the event here (send to analytics provider, audit or inspect data)
};
optimizely.notificationCenter.addNotificationListener(
NOTIFICATION_TYPES.TRACK,
onTrack
);
Updated about 21 hours ago