Disclaimer: This website requires Please enable JavaScript in your browser settings for the best experience.

The availability of features may depend on your plan type. Contact your Customer Success Manager if you have any questions.

Dev guideRecipesAPI Reference
Dev guideAPI ReferenceUser GuideLegal TermsGitHubDev CommunityOptimizely AcademySubmit a ticketLog In
Dev guide

Implement a user profile service for the JavaScript (Browser) SDK

How to set up a custom User Profile Service or how to use the default for the Optimizely Feature Experimentation JavaScript (Browser) SDK.

Use a User Profile Service to persist information about your users and ensure variation assignments are sticky. For example, if you are working on a backend website, you can create an implementation that reads and saves user profiles from a Redis or Memcached store.

In the JavaScript SDK, there is no default implementation. Implementing a User Profile Service is optional and is only necessary if you want to keep variation assignments sticky even when experiment conditions are changed while it is running (for example, audiences, attributes, variation pausing, and traffic distribution). Otherwise, the JavaScript SDK is stateless and rely on deterministic bucketing to return consistent assignments.

If the User Profile Service does not bucket a user as you expect, then check whether other flags are overriding the bucketing. For more information, see How bucketing works.

Implement a service

To implement a custom User Profile Service, refer to the following code samples. The service needs to expose two functions with the following signatures:

  • lookup – Takes a user ID string and returns a user profile matching the schema below.
  • save – Takes a user profile and persists it.

If you want to use the User Profile Service purely for tracking purposes and not sticky bucketing, you can implement only the save method (always return nil from lookup).

The interface of the User Profile Service looks like the following:

import { createInstance } from '@optimizely/optimizely-sdk';

// Sample user profile service implementation
const userProfileService = {
  lookup: userId => {
    // Perform user profile lookup
  },
  save: userProfileMap => {
    // Persist user profile
  },
};

const optimizely = createInstance({
  sdkKey: '<YOUR_SDK_KEY>',
  userProfileService,
});

An example client-side implementation of a User Profile Service using localStorage looks like the following:

import { createInstance } from '@optimizely/optimizely-sdk';

const userProfileService = {
  // Adapter that provides helpers to read and write from localStorage
  UPS_LS_PREFIX: 'optimizely-ups-data',
  localStorageAdapter: {
    read: function(key) {
      const data = JSON.parse(localStorage.getItem(key) || '{}');
      return data;
    },
    write: function(key, data) {
      localStorage.setItem(key, JSON.stringify(data));
    },
  },
  getUserKey: function (userId) {
    return `${this.UPS_LS_PREFIX}-${userId}`;
  },
  // Perform user profile lookup
  lookup: function(userId) {
    return this.localStorageAdapter.read(this.getUserKey(userId));
  },
  // Persist user profile
  save: function(userProfileMap) {
    const userKey = this.getUserKey(userProfileMap.user_id);
    this.localStorageAdapter.write(userKey, userProfileMap);
  },
};

// example usage
const optimizely = createInstance({
  sdkKey: '<YOUR_SDK_KEY>',
  userProfileService,
});

The code example below shows the JSON schema of the user profile object. In the example below, ^[a-zA-Z0-9]+$ is the experiment ID.

{
  "title": "UserProfile",
  "type": "object",
  "properties": {
    "user_id": {
      "type": "string"
    },
    "experiment_bucket_map": {
      "type": "object",
      "patternProperties": {
        "^[a-zA-Z0-9]+$": {
          "type": "object",
          "properties": {
            "variation_id": {
              "type": "string"
            }
          },
          "required": ["variation_id"]
        }
      }
    }
  },
  "required": ["user_id", "experiment_bucket_map"]
}

The SDK uses the User Profile Service you provide to override Optimizely Feature Experimentation's default bucketing behavior in cases when an experiment assignment has been saved.

The experiment_bucket_map overrides the default bucketing behavior and defines an alternate experiment variation for a given user. Each key in the experient_bucket_map object corresponds to an experiment override. The experiment ID is the key and the value is an object with a `variation_id property that specifies the desired variation. If there isn't an entry for an experiment, then the default bucketing behavior persists.

When implementing your own User Profile Service, we recommend loading the user profiles into the User Profile Service on initialization and avoiding performing expensive, blocking lookups on the lookup function to minimize the performance impact of incorporating the service.

When implementing in a multi-server or stateless environment, we suggest using this interface with a backend like Cassandra or Redis. You can decide how long you want to keep your sticky bucketing around by configuring these services.