react-native-apxor-sdk

react-native-apxor-sdk

Description

React Native wrapper for Apxor SDK. Please refer Plugins section to integrate other Apxor plugins.

Getting started

For React Native version 0.59.0 and lower

Run the following command

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

$ 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 the getPackages() method

  @Override
  protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              ...
              new RNApxorSDKPackage(), <- ApxorSDK 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')
  

For React Native version 0.60.0 and higher

Run the following command

$ yarn add 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/" }
  

• Insert the following lines inside the dependencies block in android/app/build.gradle:

    compile project(':react-native-apxor-sdk')
    implementation 'com.apxor.android:apxor-android-sdk-core:2.6.3@aar'
  

• Add the following meta-data tag inside application tag of AndroidManifest.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 build.gradle file

  // 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-crash-reporter:1.0.5@aar'
  
  // To track uninstalls
  implementation ('com.apxor.android:apxor-android-sdk-push:1.2.2@aar') {
      exclude group: 'com.google.firebase'
  }
  
  implementation 'com.apxor.android:apxor-android-sdk-qe:1.3.0@aar'
  implementation 'com.apxor.android:surveys:1.2.1@aar'
  implementation 'com.apxor.android:wysiwyg:1.0.8@aar'
  

• Create plugins.json file at android/app/src/main/assets/ folder

• Paste the following JSON in that file

  {
    "plugins": [
      {
        "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"
      }
    ]
  }
  

• If you have extended the FirebaseMessagingService in your application, please use below code in your extends FirebaseMessagingService class to receive Push notifications sent from 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
      }
  }
  

Usage

import RNApxorSDK from 'react-native-apxor-sdk';

UserId:

// Syntax
RNApxorSDK.setUserIdentifier("user_id");

// Example
RNApxorSDK.setUserIdentifier("<some_user_id>");

Events:

// Syntax
RNApxorSDK.logAppEvent(event_name, properties);

// Example
RNApxorSDK.logAppEvent("ADD_TO_CART", {
    "userId": "[e-mail]",
    "value": 1299,
    "item": "Sony Head Phone 1201" 
});

User Properties:

// Syntax
RNApxorSDK.setUserCustomInfo(properties);

// Example
RNApxorSDK.setUserCustomInfo({
    "property1": "value",
    "property2": "value2"
});

Track Navigation:

######If you are already using react-navigation, Apxor SDK automatically tracks screen navigation if you add below statement in your Root component:

const appNavigator = createStackNavigator({ /* your navigation config*/});

const App = createAppContainer(appNavigator);

// This will return a HOC which will take care of automatic screen tracking
const Root = RNApxorSDK.wrapApplication(App); 

// This will supplied to AppRegistry
export default Root; 

######Otherwise:

// Syntax
RNApxorSDK.logNavigationEvent(screen_name);

// Example
RNApxorSDK.logNavigationEvent("LoginScreen");