React Native with custom navigation

Last updated:

Mobile apps created with the React Native framework can use the Pendo mobile SDK to:

  • Collect and analyze usage through Track Events. 
  • Create and publish single and multi-step lightbox guides that are activated when users launch your app or with a Track Event.

Pendo supports codeless tracking of React Native applications for supported navigation libraries. See which versions support codeless analytics, which provide retroactive analytics and support the use of all guide types, apart from tooltips, and all guide activation methods. You can use Track Events to report on any event in your app. A change of a user's status, an exception condition such as 'Server not available,' any important business transaction or any action performed by your user, and any Futton click or Page view that you want to collect analytics on.

Prerequisites

Your subscription must be enabled for mobile. Go to Subscription Settings > Applications and select Add App to show mobile app options.

Get started

Available insights

React Native apps using Track Events support the following:

  • Track Event analytics (under the specific 'Track Events' page: view users and accounts analytics, usage totals and over-time usage)
  • Paths & funnels (via track events)
  • Data Explorer, Trends (via track events)
  • Retention analytics (via track events)
  • Visitor and account analytics
  • Time on application (based on your track events)
  • Any dashboard widget that does not relate to page views/button clicks
  • Use track event analytics in any segment you create, for guides or analytics purposes

Track Pages and Features

track: use this API to trace Page views and Feature clicks and any other significant event in your app. Attach the following call to the screen/Feature activity:

 PendoSDK.track("EVENT_NAME",{'KEY1':'VALUE1','KEY2':'VALUE2',...})}}

For example, use this to track a Feature "submit" click on "order_form" Page:

<ListItem 
...
onPress={() => {PendoSDK.track(data.name,{'page':'order_form','feature':'submit'})}}
>

Track visitors and accounts

startSession:  Use this API to start a session with a visitor or account.
PendoSDK.startSession(visitorId, accountId, visitorData, accountData);
setVisitorData:  Use this API to update the visitor's data mid-session. Mainly used when the visitor updates details.
PendoSDK.setVisitorData({"KEY1":"VALUE1","KEY2":"VALUE2",...})
setAccountData: Use this API to update Account data mid-session. Mainly used when you want to update the accounts data.
PendoSDK.setAccountData({"KEY1":"VALUE1","KEY2":"VALUE2",...})

Track Event naming conventions

You can rename Track Events within the Pendo UI. If Track Event names are changed in code, they appear in Pendo as a new and different event. For more information about naming Track Events, see Configure Track Events.

Use React Native with guides

React Native supports the following guide types and guide activation methods:

  • Guide Type. React Native applications can use mobile guides and polls. Tooltips are currently not available for React Native applications using custom routers.
  • Guide Activation. You can show guides in your React Native app upon:
    1. Application launch
    2. Track Event
    3. Track Event + Specific Track Event Property Value
  1.  

Add track events to your app at places where you may want to trigger guides.

 

Was this article helpful?
1 out of 1 found this helpful