Track event for the React SDK

10 min

Tracks a conversion event for a user. In other words, tracks an action a user takes. Logs an error message if the specified event key does not match any existing events. See How Optimizely Experimentation counts conversions.

Version

SDK 3.2 and higher. See Minimum version support.

Description

Use the useTrackEvent hook to track events across multiple flag rules for a user. You should make only one track call per conversion (user action), even if many rules measure the conversion.

To use this hook, call useTrackEvent within a component wrapped by OptimizelyProvider. See OptimizelyProvider for the React SDK.

The attributes passed to useTrackEvent are only used for results segmentation on the Optimizely Experiment Results page.

Parameters

eventKey (required) – String – The key of the event to be tracked. This key must match the event key provided when the event was created in the Optimizely app or REST APIREST API.

eventTags (optional) – Map – A map of key-value pairs specifying the reserved tag keys names and their corresponding values for this particular event occurrence. eventTags are contextual metadata about conversion eventsconversion events. For example, revenue, load time, or total value. The following are available tag keys:

revenue – An integer value that is used to track the revenue metric for your experiments, aggregated across all conversion events. revenue is recorded in cents.

value – A floating point value that is used to track a custom value for your experiments. Use this to pass the value for numeric metrics.

$opt_event_properties – A map of default and custom event properties and their values.

See reserved event tags.

Returns

This method sends conversion data to Optimizely Feature Experimentation. It does not provide return values.

Examples

useTrackEvent hook

Enables tracking events within functional components. This hook offers the existing track event functionalities provided by the SDK.

// Assuming there is an OptimizelyProvider wrapping this component
import { useTrackEvent } from "@optimizely/react-sdk";

function SignupButton() {
  const [track, clientReady, didTimeout] = useTrackEvent();

  const handleClick = () => {
    if (clientReady) {
      // Define event properties
      const properties = {
        "category": "shoes",
        "color": "red"
      };

      // Define tags including event properties
      const tags = {
        "revenue": 10000,
        "value": 100.00, 
        "$opt_event_properties": properties
      };

      // Track event with tags
      track("signup-clicked", tags);
    }
  };

  return <button onClick={handleClick}>Signup</button>;
}

track

You can use the track method of react client directly.

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

const client = createInstance({
  sdkKey: SDK_KEY,
});

client.track("test_event", undefined, {
	custom_attr: "value"
})

trackEvent

You can also use the trackEvent method of a user context.

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

const client = createInstance({
  sdkKey: SDK_KEY,
});

const userContext = client.getUserContext()

userContext.trackEvent("test_event")

Side effects

Additional Feature Experimentation functionality may be triggered by using this method.

Conversions

Calling this method records a conversion and attributes it to the variations that the user has seen. See How Optimizely Experimentation counts conversionsHow Optimizely Experimentation counts conversions.

You can create metrics on this conversion event and add metrics to experiments even after the conversion is tracked. See Events: Tracking clicks, pageviews, and other visitor actionsEvents: Tracking clicks, pageviews, and other visitor actions.

This method does not track events if the event key is invalid.

Changing the traffic allocation of running experiments affects how conversions are recorded and variations attributed to users. See Why you should not change a running experimentWhy you should not change a running experiment.

Notification listeners

Accessing this method triggers a call to the track notification listener.

This method does not call the TRACK notification listener if the event key is invalid.

Source files

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