react-native-apxor-sdk
v1.7.6
Published
React Native Apxor SDK
Downloads
7,436
Readme
Description
React Native wrapper for Apxor SDK. Please refer Plugins section to integrate other Apxor plugins.
🏁 Getting Started
A. For react-native
version 0.59.0
and lower
- Run the following commands:
npm i react-native-apxor-sdk
react-native link react-native-apxor-sdk
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 thegetPackages()
method
@Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), ... new RNApxorSDKPackage(), <- ApxorSDK package ... ); }
- Add
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')
B. For react-native
version 0.60.0
and higher
Run the following commands:
npm i react-native-apxor-sdk
🤖 Integrate Apxor React Native Android SDK
- Insert the following lines inside repositories block in
android/build.gradle
maven { url "http://repo.apxor.com/artifactory/list/libs-release-android/" }
maven { url "https://dl.bintray.com/apxor/apxor-android" }
- Insert the following lines inside the dependencies block in
android/app/build.gradle
:
implementation 'com.apxor.androidx:apxor-android-sdk-core:2.8.3@aar'
Add the following
meta-data
tag insideapplication
tag ofAndroidManifest.xml
file:<application ...> ... <meta-data android:name="APXOR_APP_ID" android:value=[REPLACE_YOUR_APXOR_APP_ID_HERE] /> ... </application>
🧩 Plugins (Optional)
Add following dependencies in the
build.gradle
file.// Add this to track uninstalls and send push notifications from Apxor dashboard // Note: We don't support firebase-messaging >= 22.0.0 yet 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.1@aar' implementation 'com.apxor.androidx:apxor-android-sdk-rtm:1.8.9@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.
NOTE
If you are using
firebase-messaging >= 22.0.0
, use"com.apxor.androidx:apxor-android-sdk-push-v2"
instead of"com.apxor.androidx:apxor-android-sdk-push"
implementation('com.apxor.androidx:apxor-android-sdk-push-v2:1.2.7@aar') { exclude group: 'com.google.firebase' }
Create
plugins.json
file in theandroid/app/src/main/assets/
directory.Paste the following JSON code in that file:
{ "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" } ] }
If you have extended the
FirebaseMessagingService
in your application, please use the below code in yourextends FirebaseMessagingService
class to receive Push notifications sent from the 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 } }
🍎 Integrate Apxor React Native iOS SDK
To Auto initialize the SDK (Recommended), add the following inside your
application
plist file.Open your application's
Info.plist
as source code.Copy and paste the following 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>APXWYSIWYGPlugin</key> <true/> </dict>
To add the APXWYSIWYGPlugin, add the following to your application's
.podspec
file:s.dependency 'Apxor-WYSIWYG', '1.0.84'
NOTE
The
APXWYSIWYGPlugin
is only for debug builds, make sure to remove it for production builds.
🚀 API & Usage
Imports
// Import the SDK as a module
import RNApxorSDK from 'react-native-apxor-sdk'
// Or, import required modules
import { ApxNavigationContainer, logAppEvent } from 'react-native-apxor-sdk'
Set Custom User IDs
- Refer to the Apxor Docs for more details.
// Syntax
RNApxorSDK.setUserIdentifier('user_id')
// Example
RNApxorSDK.setUserIdentifier('[email protected]')
Set Custom User and Session Properties
- Refer to the Apxor Docs for more details.
// Syntax
RNApxorSDK.setUserCustomInfo(properties)
RNApxorSDK.setSessionCustomInfo(properties)
// Example
RNApxorSDK.setUserCustomInfo({
city: 'Hyderabad',
age: 12,
})
Wrapper Components
ApxorView
A wrapper over React Native's
View
component to track the View changes in the app.// Syntax <ApxorView tag='<unique_constant_tag>' {...otherViewProps} > // Your code goes here </ApxorView>
Logging Events
- References :
// Syntax
RNApxorSDK.logAppEvent(event_name, properties)
// Example
RNApxorSDK.logAppEvent('ADD_TO_CART', {
userId: '[email protected]',
value: 1299,
item: 'Sony Head Phone 1201',
})
Tracking Navigation
- References :
A. Screen Navigation
1. If you are already using @react-navigation
for navigation in your app, Apxor SDK automatically tracks screen navigation if you follow the below mentioned steps:
import { useNavigationContainerRef } from '@react-navigation/native'
const navigationRef = useNavigationContainerRef()
return (
<NavigationContainer
ref={navigationRef}
onReady={() => {
const currentRoute = navigationRef?.current.getCurrentRoute()
if (currentRoute) {
RNApxorSDK.trackScreen(currentRoute.name)
}
}}
onStateChange={() => {
const currentRoute = navigationRef?.current.getCurrentRoute()
if (currentRoute) {
RNApxorSDK.trackScreen(currentRoute.name)
}
}}
>
// your screens and navigators
</NavigationContainer>
)
2. Otherwise
// Syntax
RNApxorSDK.logNavigationEvent(screen_name)
// Example
RNApxorSDK.logNavigationEvent('LoginScreen')
B. Tab Navigation
// Syntax
RNApxorSDK.trackScreen(tab_name)
// Example
RNApxorSDK.trackScreen('Home')