Real-Time Audiences for Feature Experimentation segment qualification methods for the React SDK

11 min

Prerequisites

You must enable and configure Real-Time Audiences for Feature ExperimentationReal-Time Audiences for Feature Experimentation before fetching qualified audience segments and checking if the user is qualified for the given audience segment.

fetchQualifiedSegments

Minimum SDK version

3.0.0 and higher

Description

You can use the fetchQualifiedSegments method to retrieve the external audience mapping for a specific user from Optimizely Data Platform (ODP). The Optimizely Feature Experimentation React SDK provides an asynchronous version of the fetchQualifiedSegments method.

fetchQualfiedSegments is a method of the ReactSDKClient object.

Parameters

The following table describes the parameters for the fetchQualifiedSegments method:

Parameter	Type	Description
`options` (optional)	OptimizelySegmentOption[]	A set of options for fetching qualified segments from ODP.

Returns

This method returns a Promise<bool>, which resolves with true if segments are fetched, and false otherwise.

You can read and write directly to the qualified segments array. This lets you bypass the remote fetching process from ODP or use your own fetching service. This can be helpful when testing or debugging.

Example fetchQualifiedSegments

The following is an example of calling the fetchQualifiedSegments method and accessing the returned completion object:

import { createInstance } from "@optimizely/react-sdk";

const optimizelyClient = createInstance({
  sdkKey: 'YOUR_SDK_KEY'
});

export default function App() {
  optimizelyClient.onReady().then(() => {
    optimizelyClient.fetchQualifiedSegments();
  });
 
  return (
    <YourComponents />
  );
}

The following diagram shows the network calls between your application, the React SDK, and the ODP server when calling fetchQualifiedSegments:

Your application calls the fetchQualifiedSegments method.

The Feature Experimentation React SDK makes a GraphQL call to ODP to fetch segments the user ID qualifes for.

ODP responds with the qualified audience segments.

The React SDK automatically caches the fetched segments mapping the user ID to the qualified segments.

The fetchQualifiedSegments method returns a boolean if the qualified segments array was updated.

Call the useDecision hookuseDecision hook to get the flag decision result for a flag key.

After the segments are fetched, they are cached. This means that if you request the segments again (when new user contexts are created), the audience segment information can be retrieved from the cache instead of being fetched again from the remote ODP server.

The cache is used for the fetchQualifiedSegments call. This method is called on the user context (the user context is fixed, including the real-time audiences the user qualifies for).

The cache only applies when calling the fetchQualifiedSegments call. If you set the cache timeout to 0, the cache is disabled. Optimizely uses the least recently used (LRU) algorithm, so the oldest record is bumped out when the maximum size is reached. If there is a cache miss upon the method call, Optimizely makes a network request.

If you would like to bypass caching, you can add the following options to your options array:

OptimizelySegmentOption.IGNORE_CACHE – Bypass segments cache for lookup and save.

OptimizelySegmentOption.RESET_CACHE – Reset all segments cache.

isQualifiedFor

Minimum SDK version

3.0.0 and higher

Description

Check if the user is qualified for the given audience segment.

Parameters

The following table describes the parameters for the isQualifiedFor method:

Parameter	Type	Description
segment	string	The ODP audience segment name to check if the user is qualified for.

Returns

true if the user is qualified otherwise, false.

Examples

The following is an example of whether the user is qualified for an ODP segment:

import { createInstance } from "@optimizely/react-sdk";

const optimizelyClient = createInstance({
  sdkKey: 'YOUR_SDK_KEY'
});

export default function App() {
  optimizelyClient.onReady().then(() => {
    optimizelyClient.fetchQualifiedSegments();
    const isQualifiedForSegment1 =  optimizelyClient.getUserContext()?.isQualifiedFor("segment1");
    console.log(isQualifiedForSegment1); // true
  });
 
  return (
    <YourComponents />
  );
}

Source files

The language and platform source files containing the implementation for React are available on Github.