React Native
Things to keep handy before starting your integration with Apxor
Please have the following handy before beginning the integration:
Application identifier generated on the Apxor dashboard for your app (Read more on how to fetch the application identifier from Apxor dashboard)
App Bundle Id : Every app has a unique application ID that looks like
com.example.myapp
. This id uniquely identifies the app on the device and also on the app store. (Know more about bundle ids here)The list of events to setup triggers and track goals, user properties that allows to personalize messages and to target better. (Read more on how you can setup here)
Note
If you are already using a separate analytics class where you are sending events to different platforms from a single place it is much faster to use our tracking guide to complete event logging to setup triggers and track goals.
In case you are logging events to third parties after each interaction, please use our Third party API guide to migrate all the events that you are sending to one of the supported third parties as listed in the guide.
Getting started
Check here the latest release notes.
Step 1: Getting Started
Step 2: Configuring View IDs for Views
Note:
This step is necessary to identify the app screens' UI elements/ views. Configuring View IDs will help anchor the Tooltips, Coachmarks, and Badges to the specific UI element.
This step will take 30 minutes to 1 hour, based on the number of screens and views you want to configure ids for.
If you already have view IDs for the views, this step can be skipped.
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:
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
Step 3: Add Apxor Repository
Add Maven URL in root/project level build.gradle
Path: <project>/build.graddle
:
Step 4: Add Apxor Android SDK to your App
Add the following into the build.gradle file in app-level
Path: <project>/<app-module>/build.gradle
:
Step 5: Add exoplayer in your app (optional)
Exoplayer enables to configure Picture In Picture videos from Apxor dashboard and typically increases the app size by ~1Mb, if you are already using exoplayer in your app this step is not needed else add the following dependency in the application build.gradle
file
Path: <project>/android/<app-module>/build.gradle
:
Step 6: Disable Dexing Artifact Transformation
Note
In the Android Gradle Plugin 3.5.0, we desugar & dex using Gradle artifact tranforms, which allow more parallelism and caching. This mechanism relies on libraries having the correct Maven information, because we use dependencies specified in POM files to set up the desugaring classpath. In cases we are unable to see all dependencies when desugaring a class it is required to disable parallel transformation to faciliate the process by adding the property as mentioned below.
Add the following properties gradle.properties
file
Path: <project>/android/<app-module>/gradle.properties
:
Step 7: Add the following in proguard-rules.pro
Note
If you use proguard to obfuscate the classes, you have to add the following to ignore obfuscation for Apxor SDK classes
Configure the below rules in your proguard-rules.pro
file
Path: <project>/<app-module>/gradle.properties
:
Note:
If you use androidx
libraries, add the following property in gradle.properties
file
Step 8: Initialize Apxor Android SDK
Add following
meta-data
tag inside yourapplication
tag in yourAndroidManifest.xml
file
Click here to Add New App and how to get the app id
Step 9: Plugins integration
Add plugin dependencies to your application
build.gradle
filePath: <project>/<app-module>/build.gradle
: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.
Step 10: Enable uninstall tracking for your users [Optional]
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
fileApxor 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
Apxor uses your firebase server key to send silent push notifications to track uninstalls in order to measure outcomes of your campaign. To enable this please do the following :
Path : app/build.gradle
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
.
Step 11: Ensuring ApxorSDK is initialised successfully
We have to verify for two things as follows :
SDK Initialisation
On running your android project lookout for the following log in logcat :
Plugin Initialisation
By default, only error logs are enabled. To see debug logs for plugin initialisation and to confirm tracking event triggers, user properties. Please run the below 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.
Step 12: Log data to set up triggers and measure goals
Now as we are done with basic integration, we can go ahead to setup event triggers, capture data for targeting and to personalize messaging.
Please follow the guide here to log user properties, events and event properties.
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
iOS SDK Push Notifications
To add the APXPushPlugin, add the following to your application's .podspec file
Additional Features API Guide
Click here for guides to log user properties, events and event properties.
Last updated