Track Event for the React SDK v4+
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.
Minimum SDK version
v4.0.0+
For versions 3.x and earlier, see React SDK prior to v4.
Description
Use the useOptimizelyUserContext hook to track conversion events across multiple flag rules for a user. You should make only one trackEvent call per conversion (user action), even if many rules measure the conversion.
In v4, the useTrackEvent hook has been removed. Instead, call trackEvent on the user context object returned by useOptimizelyUserContext.
The attributes passed when creating the user context (via the user prop on OptimizelyProvider) are 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.
Example
import { useOptimizelyUserContext } from '@optimizely/react-sdk';
function CheckoutButton() {
const { userContext, isLoading, error } = useOptimizelyUserContext();
const handlePurchase = () => {
if (userContext) {
const properties = {
category: 'shoes',
color: 'red',
};
const tags = {
$opt_event_properties: properties,
revenue: 10000,
value: 100.00,
};
userContext.trackEvent('my_purchase_event_key', tags);
}
};
if (isLoading) return <Loading />;
if (error) return <ErrorDisplay error={error} />;
return <button onClick={handlePurchase}>Complete Purchase</button>;
}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 the React SDK are available on GitHub.