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:
- Native-like custom Components can be swapped with TrackedComponents
- Complex Components can be manually instrumented with LocationWrappers and Event Tracking Hooks or Functions
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.
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: