React Native library that automatically tracks events on components. Sometimes one does not yet know what events the client will want to track, so it is a good option to track in quantity so that later the analyst has a large amount of data to analyze user behavior.
- Track all touch events on the components tree
- Track component events easily
Run the example app with Expo to see it in action.
The source code for the examples are under the /example folder.
npm install react-native-components-trackingor
yarn add react-native-components-trackingWe will use Firebase Analytics in the examples made in this documentation. But it will be analogous for other analytics providers given the events have a similar signature:
Firebase
importanalyticsfrom'@react-native-firebase/analytics';// To log a custom event with parametersanalytics().logEvent('event_name',{parameter_name: 'parameter_value'});Amplitude
importanalyticsfrom'@react-native-firebase/analytics';// To log a custom event with parametersanalytics().logEvent('event_name',{parameter_name: 'parameter_value'});Mixpanel
importMixpanelfrom'react-native-mixpanel';// To log a custom event with parametersMixpanel.trackWithProperties('event_name',{parameter_name: 'parameter_value',});Segment
importanalyticsfrom'@segment/analytics-react-native';// To log a custom event with parametersanalytics.track('event_name',{parameter_name: 'parameter_value'});importanalyticsfrom'@react-native-firebase/analytics';importReactfrom'react';import{Text,TouchableOpacity,TouchableOpacityProps}from'react-native';import{ComponentTracking}from'react-native-components-tracking';importanalyticsfrom'@react-native-firebase/analytics';import{styles}from'./styles';interfaceExtraProps{title: string;dark?: boolean;disabled?: boolean;allowFontScaling?: boolean;trackingIdKey: string;}exporttypeLayoutProps=TouchableOpacityProps&ExtraProps;exportconstButton: React.FC<LayoutProps>=(props)=>{const{
title,
onPress,
disabled =false,
style ={},
allowFontScaling =true,
trackingIdKey,}=props;consttrackEvent=(event: string,params?: any)=>{analytics().logEvent(event,params);};return(<ComponentTrackingtrackingOptions={[{triggerFunctionKey: 'onPress',event: 'BUTTON_CLICK',idKey: trackingIdKey,params: {parameter_name: 'parameter_value',},},]}trackEvent={trackEvent}><TouchableOpacity{...props}style={[styles.buttonContainer,styles.shadow,style]}onPress={onPress}disabled={disabled}><TextallowFontScaling={allowFontScaling}>{title}</Text></TouchableOpacity></ComponentTracking>);};Above, we defined a generic Button component which receives a trackingIdKey which will be used to customize the tracking event for each Button.
Then we will use the button like any other component and it will track the BUTTON_CLICK_${trackingIdKey} event when it is pressed.
Aditionally, we track some params when the onPress is triggered.
Also, we can make it a bit more generic and receive not only the trackingIdKey but also the base event name and the triggerFunctionKey:
exportconstButton: React.FC<LayoutProps>=(props)=>{const{
title,
onPress,
disabled =false,
style ={},
allowFontScaling =true,
trackingIdKey,
baseEvent,
triggerFunctionKey,}=props;consttrackEvent=(event: string)=>{analytics().logEvent(event);};return(<ComponentTrackingtrackingOptions={[{
triggerFunctionKey,event: baseEvent,idKey: trackingIdKey,},]}trackEvent={trackEvent}><TouchableOpacity{...props}style={[styles.buttonContainer,styles.shadow,style]}onPress={onPress}disabled={disabled}><TextallowFontScaling={allowFontScaling}>{title}</Text></TouchableOpacity></ComponentTracking>);};We show a basic example with a button but it works with any component we want to wrap. For example, if we want to track the event onEndEditing of text input we can do something like this:
- Create a generic text input component.
exportconstCustomTextInput: React.FC<LayoutProps>=(props)=>{const{
onEndEditing,
onChangeText,
style ={},
placeholder,
trackingIdKey,
baseEvent,
triggerFunctionKey,}=props;consttrackEvent=(event: string,params?: any)=>{analytics().logEvent(event,params);};return(<ComponentTrackingtrackingOptions={[{
triggerFunctionKey,event: baseEvent,idKey: trackingIdKey,},]}trackEvent={trackEvent}><TextInputstyle={style}onChangeText={onChangeText}onEndEditing={onEndEditing}value={text}placeholder={placeholder}/></ComponentTracking>);};- Use it sending the triggerFunctionKey and baseEvent
<CustomTextInputtriggerFunctionKey={'onEndEditing'}baseEvent={'ON_END_EDITTING'}trackingIdKey={'DUMMY_TEXT_INPUT'}onChangeText={()=>{console.warn('Your onChangeText function')}}onEndEditing={()=>{console.warn('Your onEndEditing function')}}>In the examples above, we showed components with a single triggerFunctionKey to call, but ComponentTracking allows us to send a series of tracking options in case you want to automatically track more than one event.
Another cool feature we included on this library is the possibility to track automatically all the touch events made into the application.
To use this feature you should:
- Wrap your app on the
TouchEventBoundarycomponent - Specify
component-tracking-labelon each component you want to track touches
import*asReactfrom'react';import{useState}from'react';import{TouchableOpacity,Text,StyleSheet,SafeAreaView,ScrollView,}from'react-native';import{TouchEventBoundary}from'react-native-components-tracking';importanalyticsfrom'@react-native-firebase/analytics';exportdefaultfunctionApp(){//TouchableOpacityconstbaseOnPress=()=>{console.warn('button was pressed');};consttrackEvent=(event: string)=>{console.warn('an event tracked with event boundary',event);analytics().logEvent(event);};return(<TouchEventBoundarytrackEvent={trackEvent}><SafeAreaViewstyle={styles.safeAreaViewContainer}><ScrollViewcontentContainerStyle={styles.container}><TouchableOpacityonPress={baseOnPress}style={styles.button}component-tracking-label={'dummy_button'}><Text>Dummybutton</Text></TouchableOpacity><Textstyle={styles.baseText}component-tracking-label={'dummy_text'}>Anexampletexttobeautomaticallytrackedonpress</Text></ScrollView></SafeAreaView></TouchEventBoundary>);}conststyles=StyleSheet.create({safeAreaViewContainer: {flex: 1},container: {flex: 1,alignItems: 'center',justifyContent: 'space-between',},button: {alignItems: 'center',backgroundColor: '#FFD260',padding: 10,},baseText: {fontFamily: 'Cochin',},});category
The category assigned to the breadcrumb that is logged by the touch event.
type
The type assigned to the breadcrumb that is logged by the touch event.
maxComponentTreeSize
default: 20. The max number/depth of components to display when logging a touch's component tree.
ignoreNames
Array<string | RegExp>, Accepts strings and regular expressions. Component names to ignore when logging the touch event. This prevents useless logs such as: "Touch event within element: View", where you still can't tell which specific View it occurred in.
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Marco Fiorito | Matias Salles | Graziano Pascale |
Made with create-react-native-library