Configure the JavaScript SDK event dispatcher v6

❗️

Warning

This content covers the Feature Experimentation JavaScript (Browser) SDK v6 features currently in pre-production testing and is subject to change before release

For the latest released version, see JavaScript (Browser) SDK.

Minimum SDK version

v6.0.0+

Event Dispatcher

JS SDK has a built-in event dispatcher for handling decision event or conversion event. The built-in event dispatcher should be sufficient enough for most of the cases, but you can override it based on the specifics of your environment.

An event dispatcher is required to conform to the following interface:

export interface EventDispatcher {
  dispatchEvent(event: LogEvent): Promise<EventDispatcherResponse>
}

Here's an example of a custom event dispatcher that logs the event before passing it to the default dispatcher.
Keep in mind, you’re not required to use the default dispatcher—you can send events to Optimizely using your own implementation. This could involve using an HTTP client of your choice or even selectively dropping events before dispatching them.

🚧

Important

If you are using a custom event dispatcher, do not modify the event payload returned from Optimizely Feature Experimentation. Modifying this payload alters your results on the Experiment Results page.

import {
  eventDispatcher,
  EventDispatcher,
  EventDispatcherResponse,
  LogEvent,
} from "@optimizely/optimizely-sdk";

export class CustomEventDispatcher implements EventDispatcher {
  private baseDispatcher: EventDispatcher;

  constructor() {
    this.baseDispatcher = eventDispatcher;
  }

  async dispatchEvent(event: LogEvent): Promise<EventDispatcherResponse> {
    // Custom behavior: Log the event
    console.log("[CustomEventDispatcher] Dispatching event:", {
      url: event.url,
      method: event.httpVerb,
      payload: event.params,
    });

    // Forward the event to the default dispatcher
    return this.baseDispatcher.dispatchEvent(event);
  }
}

Closing Event Dispatcher

You can optionally provide a custom closing event dispatcher in addition to the regular event dispatcher. The event processor invokes the closing dispatcher to handle any remaining events before shutdown.

If only a custom event dispatcher is provided (and not a closing one), that same dispatcher will be used for closing as well.

In the browser environment, if neither dispatcher is provided, a default closing dispatcher is used. This default implementation leverages the navigator.sendBeacon API to help ensure that events are sent reliably, even if the user navigates away or closes the page before the request completes.