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 navigationsreact-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
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 ... ); }
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
Add Maven URL in root level
build.gradle
allprojects { repositories { // ... maven { url "https://repo.apxor.com/artifactory/list/libs-release-android/" } // ... } }
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 }
If you use proguard, add the following in your
proguard-rules.pro
file-keep class com.apxor.** { *; } -dontwarn com.apxor.**
If you use
androidx
libraries, add the following property ingradle.properties
fileandroid.enableJetifier = true
Initialize Apxor Android SDK
Add following
meta-data
tag inside yourapplication
tag in yourAndroidManifest.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
Add plugin dependencies to your application
build.gradle
filedependendies { // 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 }
Create
plugins.json
file in your assets folder (usual path issrc/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 ofapp/build.gradle
file, the SDK silently throws aClassNotFoundException
error log inlogcat
- If the dependency exists in
dependencies
section ofapp/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 inapp/build.gradle
file and corresponding JSON object inassets/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
- If an entry for plugin exists in this file and the corresponding dependency doesn't exist in the
Enable Apxor Push notifications [Optional]
If you are using
firebase-messaging
version< 22.0.0
, follow below stepsAdd 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' } }
If you are not using
FirebaseMessagingService
, you can skip this step. Otherwise, add the followingpublic 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 } } } }
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 stepsAdd 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' } }
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 yourapp/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