APXOR React Native SDK Integration Guide

Getting started

Plugin Name	Latest Version	Release Date
apxor-android-sdk-core	2.7.7	2021-07-30
apxor-android-sdk-push	1.2.5	2021-07-30
apxor-android-sdk-qe	1.4.3	2021-07-21
apxor-android-sdk-rtm	1.7.0	2021-07-21
surveys	1.3.1	2021-07-21
wysiwyg	1.1.9	2021-07-21
jit-log	1.0.0	2020-10-28
apxor-cf	1.0.0	2020-09-14
apxor-android-crash-reporter	1.0.5	2019-05-01

For React Native version 0.60.0 and higher

Run the following commands

$ yarn add react-native-apxor-sdk react-native-apxor-rtm-plugin

• react-native-apxor-sdk is to track events and navigations
• react-native-apxor-rtm-plugin helps to create and display Walkthrough messages

For React Native version 0.59.0 and lower

Run the following commands

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

$ react-native link react-native-apxor-sdk react-native-apxor-rtm-plugin

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

   • Add following imports statements at the top of the file

     import com.apxor.reactnativesdk.RNApxorSDKPackage;
     import com.apxor.reactnativesdk.RNApxorRTMPackage;
   

   @Override
   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
               new MainReactPackage(),
               ...
               new RNApxorSDKPackage(), <- ApxorSDK Package
               new RNApxorRTMPackage(), <- ApxorSDK RTM Plugin 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')
   include ':react-native-apxor-rtm-plugin'
   project(':react-native-apxor-rtm-plugin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-apxor-rtm-plugin/android')
   

Configuring View IDs for Views

React Native Apxor RTM plugin (react-native-apxor-rtm-plugin) will show Inline messages (also called as Tooltips) and CoachMark messages for a given View ID/Tag.

In React Native apps, you can mention View IDs for views by adding nativeID attribute to the Components. If any View that does not have nativeID attribute, Inline or Coachmark messages will not be shown.

For example, you want to show tooltip for a button. You can't directly give a unique id for Button. Instead, you need to wrap it up with a View tag like:

<View nativeID="loginButton">
    <Button onPress={this.handlePress}>Login</Button>
</View>

So, the same value for nativeID attribute can be configured in Apxor dashboard to identify the Button and display Inline or Coachmark message.

Android integration

1. Add Maven URL in root level build.gradle

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

2. Add Apxor Android SDK to your App

   // ...
   apply plugin: 'com.android.application'
   
   android {
       // ...
       defaultConfig {
           minSdkVersion 16 // Minimum Sdk version must be 16 and above
           // ...
       }
       // ...
   }
   
   dependencies {
       // ...
   
       // Event tracking and a must have dependency for other plugins
       implementation 'com.apxor.android:apxor-android-sdk-core:2.7.7@aar'
   
       // Getting a "Could not find" error? Make sure that you've added
       // Apxor's Maven repository to your root-level build.gradle file
   }
   

3. If you use proguard, add the following in your proguard-rules.pro file

   -keep class com.apxor.** { *; }
   -dontwarn com.apxor.**
   

4. If you use androidx libraries, add the following property in gradle.properties file

   android.enableJetifier = true
   

Initialize Apxor Android SDK

• Add following meta-data tag inside your application tag in your AndroidManifest.xml file

  <application>
      <!-- You must replace your app in android:value attribute -->
      <meta-data android:name="APXOR_APP_ID" android:value="APP_ID" />
  </application>
  

  To get your app ID, please contact us at contact@apxor.com

Plugins integration

1. Add plugin dependencies to your application build.gradle file

   dependendies {
   
       // Add this to track uninstalls and send push notifications from Apxor dashboard
       // 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-sdk-push:1.2.5@aar') {
           exclude group: 'com.google.firebase'
       }
   
       // Add these for Realtime Actions and Surveys
       implementation 'com.apxor.android:apxor-android-sdk-qe:1.4.3@aar'
       implementation 'com.apxor.android:apxor-android-sdk-rtm:1.7.0@aar'
       implementation 'com.apxor.android:surveys:1.3.1@aar'
   
       // Add this to track application crashes
       implementation 'com.apxor.android:apxor-android-crash-reporter:1.0.5@aar'
   
       // Helper plugin to create walkthroughs
       implementation 'com.apxor.android:wysiwyg:1.1.9@aar'
   
       // Add this to execute Client Functions
       implementation 'com.apxor.android:apxor-cf:1.0.0@aar'
   
       // Add this to log events without attributes at runtime
       implementation 'com.apxor.android:jit-log:1.0.0@aar'
   
       // Getting a "Could not find" error? Make sure that you've added
       // Apxor's Maven repository to your root-level build.gradle file
   }
   

2. Create plugins.json file in your assets folder (usual path is src/main/assets/plugins.json) and add required JSON configs in it.

   For every plugin dependency you add in dependencies section, there will be a corresponding entry in this file.

   • If an entry for plugin exists in this file and the corresponding dependency doesn't exist in the dependencies section of app/build.gradle file, the SDK silently throws a ClassNotFoundException error log in logcat
   • If the dependency exists in dependencies section of app/build.gradle file and the corresponding entry doesn't exist in this file, that plugin will not initialize at runtime.

   {
     "plugins": [
       {
         "name": "rtm",
         "class": "com.apxor.androidsdk.plugins.realtimeui.ApxorRealtimeUIPlugin"
       },
       {
         "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"
       },
       {
         "name": "cf",
         "class": "com.apxor.androidsdk.plugins.cf.ApxorCFPlugin"
       },
       {
         "name": "jitlog",
         "class": "com.apxor.androidsdk.plugins.jitlog.ApxorJITLogPlugin"
       }
     ]
   }
   

   Note

   • If you would like to track uninstalls, you must include apxor-android-sdk-push dependency in app/build.gradle file and corresponding JSON object in assets/plugins.json file
   • Apxor sends silent push notifications to track uninstalls. Please make sure you handle push notifications which will be sent with your SENDER_ID and ignore all notifications other than your SENDER_ID

3. Enable Apxor Push notifications [Optional]

   If you are not using FirebaseMessagingService, you can skip this step. Otherwise, add the following

   public class MyFirebaseMessagingService extends FirebaseMessagingService {
       @Override
       public void onMessageReceived(RemoteMessage remoteMessage) {
           if (remoteMessage.getFrom().equals(YOUR_FCM_SENDER_ID)) {
               // Push Notification receiver with your Sender Id
           } else {
               // Check if Push Notification received from Apxor
               if (ApxorPushAPI.isApxorNotification(remoteMessage)) {
                   ApxorPushAPI.handleNotification(remoteMessage, getApplicationContext());
               } else {
                   // Silent or Data push notification which you can send through Apxor dashboard
               }
           }
       }
    }
   

Ensuring ApxorSDK is initialised successfully

• Lookout for the following log in logcat,

  ApxorSDK(v2**) successfully initialized for: APP_ID
  

• By default, only error logs are enabled. To see debug logs, run adb shell setprop log.tag.Apxor VERBOSE command in terminal.

Note

Apxor uploads data only when the app is minimized to the background. If you are running from Android Studio (emulators or devices), do not stop the app, just press on the "home" button in order for data to be uploaded.

iOS integration

Coming Soon

API Guide

Read API Guide here