fbpx Skip to content

Aquent | DEV6

React Native Mobile App with Amazon Mobile Analytics

Written by: Shu Zhang

1. What is Amazon Mobile Analytics?

Amazon Mobile Analytics is a service for collecting, visualizing, understanding, and extracting app usage data at scale. This service captures standard device data and custom events. It can compile collected data and generate reports which display as diagrams in AWS Console. Reports can be exported to Amazon Redshift and S3 for further analysis.

Standard events are predefined, such as Daily or Monthly Active Users and New Users, Session Count and Stick Factor. You can track how many users are using your app daily and monthly. How often your app is used in one day, how often users open your app during the day etc. You can define custom events which track specific user actions in the app. For example, a custom event can be triggered when a user taps on a button. There are specialized events called monetization events, which are used to report on monetization activities, such as in-app purchases.

2. Features and Terms

Before you write code to add custom events, there are some terms that need to be understood.

Attributes provide context for the submitted event. For example, a mobile app submits an event which tracks the screen a user navigates to. In this case, attributes provide screens a user might navigate to, such as the home screen and profile screen.

Metrics give measurable context to the event. For example, if the app allows a user to make a phone call, it can submit an event with a metric that tracks how long the call lasted.

To record an event, the app will pass attributes or metrics a developer wants to capture as parameters to the manager object.

Session is a period of time during which the app is active on the device. Session begins when app is launched or brought to the foreground. It ends when app is terminated or goes to the background.

3. AWS SDK and React Native Mobile Analytics SDK

Mobile Analytics web service uses a RESTful API which invokes HTTP PUT requests.

Instead of implementing http requests by yourself, you can use APIs provided by the Mobile SDK.

When an app starts, it creates an AMA.Manager object, which starts a session. To manage a running session, the app must additionally create the session object, which gives the app access to session management.

Amazon Mobile Analytics

4. Sample Code

First of all, to implement AWS mobile analytics in your mobile app, these two packages: ‘aws-sdk’ and ‘react-native-aws-mobile-analytics’ need to be added to your project. You just need to follow installation and configuration instructions on their GitHub repositories. There’s also a demo project from ‘react-native-aws-mobile-analytics’.

And then you can create a separate file for configuration and create a manager object. In the options object, you can pass a Logger object to Client.Options object for debugging purpose.

let options = {
 
    appId: ‘My App Id’,
 
    appTitle:  ‘My App’,
 
    platform : Platform.OS === 'ios' ? 'iPhoneOS' : 'Android',
 
    platformVersion : DeviceInfo.getSystemVersion(),
 
    logger: <em>console</em>, //Comment in for debugging logs
 
    autoSubmitEvents: true, 
 
   //Automatically submit events recorded with recordEvent Default true
 
    sessionLength: 1000 * 60 * 60, 
 
   //length of session in Milliseconds Default 10min
 
    make : DeviceInfo.getBrand(), //e.g Samsung
 
    model: DeviceInfo.getModel(), //e.g Galaxy S9
 
    appVersionName : VersionDetails.getAppVersion(), // e.g 1.0.0
 
    autoSubmitInterval: 1000 * 60 //1 min
 
};
 
 
const MobileAnalyticsClient = new AMA.Manager(options); 
 
//Sets the session expiration callback to submit events 
 
MobileAnalyticsClient.options.expirationCallback = ()=>{ 
 
    MobileAnalyticsClient.submitEvents(); 
 
    console.log("Expiration Callback Triggered"); 
 
}

There are several functions that will be used. When the app starts, the app needs to call startSession(). And use recordEvent() to record a custom event and call submitEvents() when the app is ready to submit data to the cloud. And before the app closes, it can call stopSession() to stop this analytics session.

mobileAnalyticsClient.recordEvent(name, attribute, metrics);
 
mobileAnalyticsClient.submitEvents();
 
mobileAnalyticsClient.stopSession();
 
mobileAnalyticsClient.startSession();

In this example, there’s an anchor element with three attributes: ‘id’, ‘eventName’ and ‘attributeName’. When a user taps this button to create a new chat session, the app will call a recordEvent() function passing with these props values, and follow by submitEvent().

<A
 
        key={'btnNewChat'}
 
        onPress={() => { this.createChat(); }}
 
        eventName={'Chat'}
 
        attributeName={'Conversation List'}
 
        id={'Add Chat'}
 
      >
 
      </A>

After data gets submitted to AWS Mobile Analytics (migrated to AWS Pinpoint), you can find the event data by searching with the event name ‘Chat’ and attribute name ‘Conversation List’ with attribute value equals to ‘Add Chat’.

Here is what it looks like in the browser:

Analytics Screen

5. Conclusion

That’s all there is to it. You can find the links to the official Amazon Mobile Analytics user guide and the libraries used in the demo in the references section.

One thing to watch out for is Amazon has announced migration from AWS Mobile Analytics to AWS Pinpoint. It is suggested that if you’re new to Mobile Analytics, you should use AWS Pinpoint instead. If you’re already using Mobile Analytics, you should consider migrating your app as soon as possible.

References:

Want to learn more React Native?

Check out our React Native training course

View Course Details