React Native SDK

APIs

Tracking a Component means wrapping it in the correct Location Context and, if interactive, capturing its events.

There are two ways of doing so:

TrackedComponents

High level Components designed to match the native ones. These components are the least effort to instrument; simply swap the originals with their Tracked Component counterparts.

// React Native Button
<Button
onPress={onPressHandler}
title="Learn More"
/>

// TrackedButton equivalent: a <Button> wrapped in PressableContext tracking PressEvent on press
<TrackedButton
onPress={onPressHandler}
title="Learn More"
/>

Location Wrappers

Wrap their children in a Location Context. Tracked Components internally use Location Wrappers automatically.

Location Wrappers don't track interactions, instead they are usually used to either enrich Locations or to instrument custom or generic components in combination with Event Trackers.

// The same interaction appears multiple times on the same screen 
<View>
<Button onPress={handlePress}>Contact us</Button>
...
<Button onPress={handlePress}>Contact us</Button>
...
<Button onPress={handlePress}>Contact us</Button>
</View>

// ContentContextWrapper can be used to enrich and deduplicate the location of these interactions
<View>
<ContentContextWrapper id={'top'}>
<Button onPress={handlePress}>Contact us</Button>
</ContentContextWrapper>
...
<ContentContextWrapper id={'body'}>
<Button onPress={handlePress}>Contact us</Button>
</ContentContextWrapper>
...
<ContentContextWrapper id={'bottom'}>
<Button onPress={handlePress}>Contact us</Button>
</ContentContextWrapper>
</View>

Event Trackers

There are two ways of tracking events. Which one to use depends on how the target Component has been wrapped and whether we have access to its internals or not.

Hooks

Event tracking hooks can be invoked to generate a tracking callback that's already configured with the correct TrackingContext.

Functions

Event tracking functions are the lowest level APIs to track Events, and they require developers to specify the correct Tracking Context. This can be retrieved from LocationWrappers / TrackedContexts render-props, or by invoking the useTrackingContext hook.

info

Check out the Custom Components how to for more information and a practical example of how that works.

How-to Guides

To immediately jump into instrumenting your application, follow the step-by-step How-to Guides:

API Reference

Plugins

Core Concepts