react-native-apxor-sdk

react-native-apxor-sdk

Description

React Native wrapper for Apxor SDK. Please refer Plugins section to integrate other Apxor plugins.

Getting started

For React Native version 0.59.0 and lower

Run the following command

$ npm install react-native-apxor-sdk --save

$ react-native link react-native-apxor-sdk

1. Open up android/app/src/main/java/[...]/MainActivity.java

   • Add import com.apxor.reactnativesdk.RNApxorSDKPackage; to the imports at the top of the file
   • Add new RNApxorSDKPackage() to the list returned by the getPackages() method

   @Override
   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               ...
               new RNApxorSDKPackage(), <- ApxorSDK package
               ...
       );
   }
   

2. Append the following lines to android/settings.gradle:

   include ':react-native-apxor-sdk'
   project(':react-native-apxor-sdk').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-apxor-sdk/android')
   

For React Native version 0.60.0 and higher

Run the following command

$ yarn add react-native-apxor-sdk

Integrate Apxor React Native Android SDK

1. Insert the following lines inside repositories block in android/build.gradle

     maven { url "http://repo.apxor.com/artifactory/list/libs-release-android/" }
   

2. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':react-native-apxor-sdk')
     implementation 'com.apxor.android:apxor-android-sdk-core:2.6.3@aar'
   

3. Add the following meta-data tag inside application tag of AndroidManifest.xml file:

   <application ...>
       ...
       <meta-data android:name="APXOR_APP_ID" android:value="REPLACE_YOUR_APXOR_APP_ID_HERE" />
       ...
   </application>
   

Plugins (Optional)

1. Add following dependencies in build.gradle file

   // firebase-messaging version >= 11.4.0 needed for push plugin
   implementation 'com.google.firebase:firebase-messaging:20.1.0'
   
   implementation 'com.apxor.android:apxor-android-crash-reporter:1.0.5@aar'
   
   // To track uninstalls
   implementation ('com.apxor.android:apxor-android-sdk-push:1.2.2@aar') {
       exclude group: 'com.google.firebase'
   }
   
   implementation 'com.apxor.android:apxor-android-sdk-qe:1.3.0@aar'
   implementation 'com.apxor.android:surveys:1.2.1@aar'
   implementation 'com.apxor.android:wysiwyg:1.0.8@aar'
   

2. Create plugins.json file at android/app/src/main/assets/ folder

3. Paste the following JSON in that file

   {
     "plugins": [
       {
         "name": "crash",
         "class": "com.apxor.androidsdk.plugins.crash.CrashReporterPlugin"
       },
       {
         "name": "push",
         "class": "com.apxor.androidsdk.plugins.push.PushPlugin"
       },
       {
         "name": "surveys",
         "class": "com.apxor.androidsdk.plugins.survey.SurveyPlugin"
       },
       {
         "name": "wysiwyg",
         "class": "com.apxor.androidsdk.plugins.wysiwyg.WYSIWYGPlugin"
       }
     ]
   }
   

4. If you have extended the FirebaseMessagingService in your application, please use below code in your extends FirebaseMessagingService class to receive Push notifications sent from Apxor dashboard

   if (remoteMessage.getFrom().equals(YOUR_FCM_SENDER_ID)) {
       // Your logic goes here
   } else {
       if (ApxorPushAPI.isApxorNotification(remoteMessage)) {
           ApxorPushAPI.handleNotification(remoteMessage, getApplicationContext());
       } else {
           // Silent or Data push notification which you can send through Apxor dashboard
       }
   }
   

Usage

import RNApxorSDK from 'react-native-apxor-sdk';

UserId:

// Syntax
RNApxorSDK.setUserIdentifier("user_id");

// Example
RNApxorSDK.setUserIdentifier("<some_user_id>");

Events:

// Syntax
RNApxorSDK.logAppEvent(event_name, properties);

// Example
RNApxorSDK.logAppEvent("ADD_TO_CART", {
    "userId": "[e-mail]",
    "value": 1299,
    "item": "Sony Head Phone 1201" 
});

User Properties:

// Syntax
RNApxorSDK.setUserCustomInfo(properties);

// Example
RNApxorSDK.setUserCustomInfo({
    "property1": "value",
    "property2": "value2"
});

Track Navigation:

######If you are already using react-navigation, Apxor SDK automatically tracks screen navigation if you add below statement in your Root component:

const appNavigator = createStackNavigator({ /* your navigation config*/});

const App = createAppContainer(appNavigator);

// This will return a HOC which will take care of automatic screen tracking
const Root = RNApxorSDK.wrapApplication(App); 

// This will supplied to AppRegistry
export default Root; 

######Otherwise:

// Syntax
RNApxorSDK.logNavigationEvent(screen_name);

// Example
RNApxorSDK.logNavigationEvent("LoginScreen");