APXOR React Native SDK Integration Guide

Getting started

Plugin Name	Latest Version	Release Date
apxor-android-sdk-rtm	2.1.8	2023-07-04
apxor-android-sdk-qe	1.5.8	2023-07-04
apxor-android-sdk-core	2.9.3	2023-07-04
surveys	1.3.9	2023-07-04
wysiwyg	1.3.8	2023-07-04
apxor-android-sdk-push	1.2.9	2023-07-04
jit-log	1.0.0	2020-10-28
apxor-android-crash-reporter	1.0.5	2019-05-01

Plugin Name	Latest Version	Release Date
ApxoriOSSDK-Core	297	2023-07-14
ApxoriOSSDK-WYSIWYG	125	2022-12-29
ApxoriOSSDK-CE	149	2023-07-08
ApxoriOSSDK-RTA	186	2023-05-29
ApxoriOSSDK-Survey	135	2023-07-12
ApxoriOSSDK-Push	107	2022-12-29

Plugin Name	Latest Version	Release Date
react-native-apxor-sdk	1.6.12	2023-07-07
react-native-apxor-rtm-plugin	1.4.6	2023-05-03

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.androidx:apxor-android-sdk-core:2.9.3@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.androidx:apxor-android-sdk-push:1.2.9@aar') {
           exclude group: 'com.google.firebase'
       }
   
       // Add these for Realtime Actions and Surveys
       implementation 'com.apxor.androidx:apxor-android-sdk-qe:1.5.8@aar'
       implementation 'com.apxor.androidx:apxor-android-sdk-rtm:2.1.8@aar'
       implementation 'com.apxor.androidx:surveys:1.3.9@aar'
   
       // Add this to track application crashes
       implementation 'com.apxor.androidx:apxor-android-crash-reporter:1.0.5@aar'
   
       // Helper plugin to create walkthroughs
       implementation 'com.apxor.androidx:wysiwyg:1.3.8@aar'
   
       // Add this to log events without attributes at runtime
       implementation 'com.apxor.androidx: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": "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 using firebase-messaging version < 22.0.0, follow below steps

   1. Add the following dependency in your app/build.gradle

      dependencies {
        // Add this to track uninstalls and send push notifications from Apxor dashboard
        implementation('com.apxor.androidx:apxor-android-sdk-push:1.2.9@aar') {
          exclude group: 'com.google.firebase'
        }
      }
      

   2. 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) {
              // Creating Notification Channel
              ApxorPushAPI.createNotificationChannel(this.getApplicationContext(), "Apxor", "Apxor", "Apxor");
              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
                  }
              }
          }
      }
      

   3. Add the following in plugins.json file

      {
        "plugins": [
          {
            "name": "push",
            "class": "com.apxor.androidsdk.plugins.push.PushPlugin"
          }
        ]
      }
      

   If you are using firebase-messaging version >= 22.0.0, follow below steps

   1. Add the following dependency in your app/build.gradle

      dependencies {
        // Add this to track uninstalls and send push notifications from Apxor dashboard
        implementation('com.apxor.androidx:apxor-android-sdk-push-v2:1.2.9@aar') {
          exclude group: 'com.google.firebase'
        }
      }
      

   2. Add the following in plugins.json file

      {
        "plugins": [
          {
            "name": "push",
            "class": "com.apxor.androidsdk.plugins.push.v2.PushPlugin"
          }
        ]
      }
      

Integrating Apxor Push with @react-native-firebase

Note: You must include com.apxor.androidx:apxor-android-sdk-push-v2 dependency in your app/build.gradle file

Add the following block wherever you have AppRegistry.registerComponent(appName, () => App);. Ideally, it's located in your src/index.js or src/index.tsx.

import messaging from "@react-native-firebase/messaging";
import RNApxorSDK from "react-native-apxor-sdk";

messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  if (!RNApxorSDK.handlePushNotification(remoteMessage)) {
    // To ignore silent push notifications
    if (!remoteMessage.data && !remoteMessage.notification) {
      return;
    }
    console.log("You need to handle this push notification");
  }
});

AppRegistry.registerComponent(appName, () => App);

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

Integrate Apxor React Native iOS SDK

• To proceed with iOS integration click here

• Also, to add the APXWYSIWYGPlugin, add the following to your application's .podspec file

  pod 'Apxor-WYSIWYG', '1.2.51'

iOS SDK Push Notifications

• To add the APXPushPlugin, add the following to your application's .podspec file

  pod 'Apxor-Push', '1.0.73'

• Check out the next steps for Push integration here

API Guide

Read API Guide here