APXOR React Native SDK Integration Guide

Getting started

Plugin NameLatest VersionRelease Date
apxor-android-sdk-core2.8.52022-09-19
apxor-android-sdk-rtm1.9.12022-09-19
wysiwyg1.2.62022-08-24
apxor-android-sdk-qe1.5.22022-09-24
surveys1.3.62022-06-29
apxor-android-sdk-push1.2.72022-01-19
jit-log1.0.02020-10-28
apxor-android-crash-reporter1.0.52019-05-01
Plugin NameLatest VersionRelease Date
ApxoriOSSDK-Core2762022-07-28
ApxoriOSSDK-WYSIWYG1162022-07-28
ApxoriOSSDK-CE1372022-07-28
ApxoriOSSDK-RTA1712022-07-28
ApxoriOSSDK-Survey1212022-07-12
ApxoriOSSDK-Push1032022-06-29
Plugin NameLatest VersionRelease Date
react-native-apxor-sdk1.3.32022-07-28
react-native-apxor-rtm-plugin1.2.52022-07-28

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.8.5@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.7@aar') {
        exclude group: 'com.google.firebase'
    }

    // Add these for Realtime Actions and Surveys
    implementation 'com.apxor.androidx:apxor-android-sdk-qe:1.5.2@aar'
    implementation 'com.apxor.androidx:apxor-android-sdk-rtm:1.9.1@aar'
    implementation 'com.apxor.androidx:surveys:1.3.6@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.2.6@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.7@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.7@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 Auto initialize SDK (Recommended), add the following inside your application plist file.

  • Open your application's Info.plist as source code. Open Plist as Source Code

  • Copy paste the below piece of code, to create an entry for ApxorSDK.

<key>Apxor</key>
<dict>
    <key>Core</key>
    <string>{YOUR_APP_ID}</string>
    <key>APXSurveyPlugin</key>
    <true/>
    <key>APXRTAPlugin</key>
    <true/>
    <key>APXPushPlugin</key>
    <true/>
    <key>APXWYSIWYGPlugin</key>
    <true/>
</dict>
  • To add the APXWYSIWYGPlugin, add the following to your application's .podspec file
  pod 'Apxor-WYSIWYG', '1.1.6'

Note

The APXWYSIWYGPlugin is only for debug builds, make sure to remove it for production builds.

iOS SDK Push Notifications

  • To add the APXPushPlugin, add the following to your application's .podspec file
  pod 'Apxor-Push', '1.0.37'
  • Check out the next steps for Push integration here

API Guide

Read API Guide here

Last updated on 9/28/2022
← Web SDKCordova SDK →