Configure a notification listener using the React SDK

4 min

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.

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 React SDK and have created an optimizelyClient instance.

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 { NOTIFICATION_TYPES } from '@optimizely/react-sdk';

// Remove Notification Listener
optimizelyClient.notificationCenter.removeNotificationListener(notificationId);

// Remove All Notification Listeners
optimizelyClient.notificationCenter.clearAllNotificationListeners();

// Remove all Notification Listeners of a certain type
optimizelyClient.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 { NOTIFICATION_TYPES } from '@optimizely/react-sdk';
// import your third-party analytics integration here

///////////////////////////////////////////
// SET UP 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 = optimizelyClient.notificationCenter.addNotificationListener(NOTIFICATION_TYPES.DECISION, onDecision);


////////////////////////////////////////////
// SET UP LOG EVENT NOTIFICATION LISTENER //
////////////////////////////////////////////

const onLogEvent = (logEvent) => {
  // process the logEvent object here (send to analytics provider, audit/inspect data)
}

optimizelyClient.notificationCenter.addNotificationListener(NOTIFICATION_TYPES.LOG_EVENT, onLogEvent);


////////////////////////////////////////////////////
// SET UP OPTIMIZELY CONFIG NOTIFICATION LISTENER //
////////////////////////////////////////////////////

// listen to OPTIMIZELY_CONFIG_UPDATE to get updated data
// You will get notifications whenever the datafile is updated except for SDK initialization
const onConfigUpdateListener = () => {
  const config = optimizelyClient.getOptimizelyConfig()
}

optimizelyClient.notificationCenter.addNotificationListener(NOTIFICATION_TYPES.OPTIMIZELY_CONFIG_UPDATE, onConfigUpdateListener);


////////////////////////////////////////
// SET UP TRACK NOTIFICATION LISTENER //
////////////////////////////////////////

const onTrack = (event) => {
  // process the event here (send to analytics provider, audit/inspect data)
}

optimizelyClient.notificationCenter.addNotificationListener(NOTIFICATION_TYPES.TRACK, onTrack);