Pass in audience attributes

In React SDK, you can provide user id and user attributes together as part of the user prop, which is passed to the OptimizelyProvider component. You can pass strings, numbers, Booleans, and null as user attribute values. If you want to target audiences based on the version of your application that they are using, you can also pass in a string formatted as a semantic version, then define a version audience condition in the Optimizely app. The examples below show how to pass in attributes.

import React from 'react';
import {
  createInstance,
  OptimizelyProvider,
} from '@optimizely/react-sdk'

const optimizely = createInstance({
  sdkKey: '<Your_SDK_Key>', // TODO: Update to your SDK Key
})

// You can pass strings, numbers, Booleans, and null as user attribute values.
// The example below shows how to pass in attributes.
const user = {
  id: ‘myuser123’,
  attributes: {
    device: 'iPhone',
    lifetime: 24738388,
    is_logged_in: true,
    app_version: '4.3.0-beta',
  },
};

function App() {
  return (
    <OptimizelyProvider
      optimizely={optimizely}
      user={user}
    >
    {/* … your application components here … */}
    </OptimizelyProvider>
  </App>
}

🚧

Important

During audience evaluation, note that if you do not pass a valid attribute value for a given audience condition—for example, if you pass a string when the audience condition requires a Boolean, or if you simply forget to pass a value—then that condition will be skipped. The SDK logs will include warnings when this occurs.