Initialization

To integrate VWO Feature Management and Experimentation into your React application, you must wrap your application code with VWOProvider. This provider initializes the VWO FME React SDK and returns a React component that serves as the core interface for feature management, A/B testing, and personalization. By using this client instance, you can seamlessly conduct experiments and manage features within your application.

Usage

import { VWOProvider } from 'vwo-fme-react-sdk';

const vwoConfig = {
  sdkKey: '32-alpha-numeric-sdk-key',  // Your VWO SDK Key
  accountId: '123456',  // Your VWO Account ID
};

const userContext = {
  id: 'unique_user_id',  // Required: Unique identifier for the user
  customVariables: {     // Optional
    age: 25,
    location: 'US',
  }
};

// Here passing userContext is optional. You can also pass this in useGetFlag hook.
const App = () => (
  <VWOProvider config={vwoConfig} userContext={userContext}>
    <YourComponent />
  </VWOProvider>
);

export default App;

An object named options is created to store the SDK configuration details.

The VWOProvider component is used to initialize the VWO client using the provided configuration. It wraps your React application and provides the VWO client instance to all components inside it. The client instance allows you to interact with the VWO platform, including running experiments, tracking events, and enabling/disabling feature flags.

Usage (Passing VWO Client Directly)

import { init,  VWOProvider } from 'vwo-fme-react-sdk';

// Initialize VWO client
const vwoClient = init({
  sdkKey: 'your-sdk-key',
  accountId: 'your-account-id'
});

const userContext = {
  id: 'unique_user_id',  // Required: Unique identifier for the user
  customVariables: {     // Optional
    age: 25,
    location: 'US',
  }
};

const App = () => (
  <VWOProvider client={vwoClient} userContext={userContext}>
    <YourComponent />
  </VWOProvider>
);

export default App;

VWO Provider Config Parameter Definitions

Poll Interval (Keeping VWO client up-to-date)

When you initialize the vwoClient using VWOProvider, it pulls the latest configurations you've done in the VWO application.
If/when you make any changes to the feature flags or rules within VWO after the vwoClient has been initialized in your server, there needs to be some way to update your vwoClient with the latest settings from VWO. This can be done via polling.

The poll interval is an optional parameter that allows the SDK to automatically fetch and update settings from the VWO server at specified intervals. Setting this parameter ensures your application always uses the latest configuration.

// Init options with pollInterval
const options = {
  accountId: '123456',
  sdkKey: '32-alpha-numeric-sdk-key',
  pollInterval: 60000,
};

Logger

VWO by default logs all ERROR level messages to your console. To gain more control over VWO's logging behavior, you can use the logger parameter in the init configuration.

// Init options with logger
const options = {
  accountId: '123456',
  sdkKey: '32-alpha-numeric-sdk-key',
  logger: {
    level: 'DEBUG',
  }
};

Please click here for more advanced logger options.

Storage

By default, the SDK operates in stateless mode, evaluating flags on each useGetFlag hook. To improve performance and consistency, you can use a custom storage mechanism to cache decisions, ensuring stable user experiences and reducing application load.

// Init options with storage
const options = {
  accountId: '123456',
  sdkKey: '32-alpha-numeric-sdk-key',
  storage: StorageConnector
};

Please click here to learn more about storage implementation.

Integrations

VWO FME SDKs provide seamless integration with third-party tools like analytics platforms, monitoring services, customer data platforms (CDPs), and messaging systems. This is achieved through a simple yet powerful callback mechanism that receives VWO-specific properties and can forward them to any third-party tool of your choice.

// Callback function to pass in init options
const options = {
  accountId: '123456',
  sdkKey: '32-alpha-numeric-sdk-key',
  integrations: {
    callback (properties) {
      console.log('Integrations callback', properties); // list of keys
    }
  }
};

Please click here to learn more about Integrations,.