react-native-aws-mobile-analytics

A react-native module for using Amazon's AWS Mobile Analytics with the aws-sdk

Highly inspirated by the javascript version aws-sdk-mobile-analytics-js

Usage

Add react-native-aws-mobile-analytics

npm install --save react-native-aws-mobile-analytics

Add Permission for Network State to your AndroidManifest.xml

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Add aws-sdk

npm install --save aws-sdk

react-native-aws-mobile-analytics needs the react-native-device-info package as dependency for an unique client id. Make sure it is correct linked. You may have to call react-native link:

react-native link

Create file MobileAnalytics.js where you can do the configuration:

importAWSfrom"aws-sdk/dist/aws-sdk-react-native";importAMAfrom"react-native-aws-mobile-analytics";import{Platform,}from'react-native';AWS.config.region='us-east-1';AWS.config.credentials=newAWS.CognitoIdentityCredentials({region: 'us-east-1',IdentityPoolId: 'us-east-1:4c6d17ff-9eb1-4805-914d-8db8536ab130',});letappId_PROD="2e9axxxxxxx742c5a35axxxxxxxxx2f";letappId_DEV="xxxx44be23c4xxx9xxxxxxxxxxxxx3fb";letoptions={appId: __DEV__?appId_DEV:appId_PROD,platform : Platform.OS==='ios' ? 'iPhoneOS' : 'Android',//logger: console // comment in for debugging};constMobileAnalyticsClient=newAMA.Manager(options);exportdefaultMobileAnalyticsClient;

Before you could send the first event you have to call MobileAnalyticsClient.initialize(callback) and wait for the callback. You can handle that in your root component like following:

importReactfrom"react";importMobileAnalyticsClientfrom"./MobileAnalytics";importSomeComponentfrom"./components/SomeComponent";exportdefaultclassAppextendsReact.Component{constructor(){super();this.state={isMobileAnalyticsLoading: true,};MobileAnalyticsClient.initialize(()=>this.setState({isMobileAnalyticsLoading: false}));}render(){if(this.state.isMobileAnalyticsLoading){returnnull;}return(<SomeComponent/>);}};

Now you are able to send event in all your components:

importMobileAnalyticsClientfrom"../MobileAnalytics";exportdefaultclassSomeComponentextendsComponent{constructor(){super();// send a custom eventMobileAnalyticsClient.recordEvent('analyticsDemo',{'attribute_1': 'main','attribute_2': 'page'},{'metric_1': 1});}}

Checkout the full example:

react-native-aws-mobile-analytics-demo

Contributors

Anton Spöck

Powered by innFactory