Labeling User Actions

To label events for React Native, you can use the Freshpaint Events Library page. When Creating a new event, select React Native as the library for the event:

To specify an event, you use a CSS selector, but instead of tags, you use the names of the React Components. As an example, let's say you have the following component:

function MyComponent() {
  return (
    <Button title="Press Here" />
  );
};

You can then use the following "CSS Selector" to define an event for touches on the button:

MyComponent Button

You can also use CSS attribute selector to filter on the component properties. For example, you could define the same event by using:

Button[title="Press Here"]

Out of the box, Freshpaint collects a whitelist of properties from your events. See the page on what data the React Native collects for a complete overview of all the data collected.

Verifying the Event Definition

To verify the event definition you can use the Freshpaint Live View. Previously all the actions in the Live View were unlabeled. Now that you've created an event definition, when that action is performed on your site, it will show up bolded in the Live View. For example, after defining an event on the above button, now when someone clicks it, you'll see the name of the event:

Sending Data to Destinations

Now that you've labelled a user action, you can now send that event into any destination that supports React Native events. To send that event to a destination, go to the event in the Events Library page and scroll down to the Event Destinations panel:

After flipping the toggle for a destination, Freshpaint will start sending the event to the destination. For Amplitude, if you go to the user lookup, you'll now see the event you just created coming in: