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

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 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')

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 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 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 the android/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 your extends 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('[e-mail]')

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 :
  • App and Aggregate Events
  • Client Events

// Syntax
RNApxorSDK.logAppEvent(event_name, properties)

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

Tracking Navigation

• References :
  • Track Navigation
  • React Navigation

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')