The React Native Library for AppsFlyer SDK
In order for us to provide optimal support, we would kindly ask you to submit any issues to [email protected]
When submitting an issue please specify your AppsFlyer sign-up (account) email, your app ID, production steps, logs, code snippets and any additional relevant information.
- Supported Platforms
- Installation
- API Methods
- initSdk
- trackAppLaunch (iOS only)
- setCustomerUserId
- setUserEmails
- trackEvent
- stopTracking
- setCollectIMEI(Android only)
- setCollectAndroidID(Android only)
- Track App Uninstalls
- iOS
- Android
- onInstallConversionData
- getAppsFlyerUID
- trackLocation (iOS only)
- sendDeepLinkData (Android only)
- iOS Deep Links - Universal Links and URL Schemes
- Demo
- iOS AppsFlyerSDK
- Android AppsFlyerSDK
$ npm install react-native-appsflyer --save
- Add the
appsFlyerFramework
topodfile
and runpod install
.
Example:
pod 'react-native-appsflyer',
:path => '../node_modules/react-native-appsflyer'
This assumes your Podfile
is located in ios
directory.
You must also have the React dependencies defined in the Podfile as described here.
- Run
pod install
(insideios
directory).
- Download the Static Lib of the AppsFlyer iOS SDK from here: https://support.appsflyer.com/hc/en-us/articles/207032066-AppsFlyer-SDK-Integration-iOS#2-quick-start
- Unzip and copy the contents of the Zip file into your project directory
- Run
react-native link react-native-appsflyer
from of the project root or copy RNAppsFlyer.h and RNAppsFlyer.m fromnode_modules
➜react-native-appsflyer
to your project directory
Run react-native link react-native-appsflyer
from of the project root or add manually:
Add the project to your dependencies
dependencies {
...
compile project(':react-native-appsflyer')
}
Add the project
include ':react-native-appsflyer'
project(':react-native-appsflyer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-appsflyer/android')
AppsFlyer SDK uses Google Install referrer.
Open the build.gradle
file for your application.
Make sure that the repositories section includes a maven section with the "https://maven.google.com" endpoint. For example:
allprojects {
repositories {
mavenLocal()
jcenter()
maven {
url "https://maven.google.com"
}
maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
Build project so you should get following dependency (see an Image):
Add:
-
import com.appsflyer.reactnative.RNAppsFlyerPackage;
-
In the
getPackages()
method register the module:new RNAppsFlyerPackage(MainApplication.this)
So getPackages()
should look like:
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
//...
new RNAppsFlyerPackage(MainApplication.this)
//...
);
}
Call module by adding:
import appsFlyer from 'react-native-appsflyer';
initializes the SDK.
parameter | type | description |
---|---|---|
options |
Object |
SDK configuration |
options
name | type | default | description |
---|---|---|---|
devKey |
string |
Appsflyer Dev key | |
appId |
string |
Apple Application ID (for iOS only) | |
isDebug |
boolean |
false |
debug mode (optional) |
Example:
const options = {
devKey: "<AF_DEV_KEY>",
isDebug: true
};
if (Platform.OS === 'ios') {
options.appId = "123456789";
}
appsFlyer.initSdk(options,
(result) => {
console.log(result);
},
(error) => {
console.error(error);
}
)
Necessary for tracking sessions and deep link callbacks in iOS on background-to-foreground transitions. Should be used with the relevant AppState logic.
Example:
state = {
appState: AppState.currentState
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
if(this.onInstallConversionDataCanceller){
this.onInstallConversionDataCanceller();
}
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
if (Platform.OS === 'ios') {
appsFlyer.trackAppLaunch();
}
}
if (this.state.appState.match(/active|foreground/) && nextAppState === 'background') {
if(this.onInstallConversionDataCanceller){
this.onInstallConversionDataCanceller();
}
}
this.setState({appState: nextAppState});
}
Setting your own Custom ID enables you to cross-reference your own unique ID with AppsFlyer’s user ID and the other devices’ IDs. This ID is available in AppsFlyer CSV reports along with postbacks APIs for cross-referencing with you internal IDs.
Note: The ID must be set during the first launch of the app at the SDK initialization. The best practice is to call this API during the deviceready
event, where possible.
parameter | type | description |
---|---|---|
customerUserId |
String |
Example:
const userId = "some_user_id";
appsFlyer.setCustomerUserId(userId,
(response) => {
//..
}
);
The stopTracking
API for opting out users as part of the GDPR compliance.
parameter | type | description |
---|---|---|
isStopTracking |
boolean |
opt-out of launch and track in-app-event |
Example:
appsFlyer.stopTracking(true,
(result) => {
console.log("stopTracking ...");
});
By default, IMEI and Android ID are not collected by the SDK if the OS version is higher than KitKat (4.4) and the device contains Google Play Services (on SDK versions 4.8.8 and below the specific app needed GPS).
parameter | type | description |
---|---|---|
isCollect |
boolean |
opt-out of collection of IMEI |
Example:
appsFlyer.setCollectIMEI(false,
(result) => {
console.log("setCollectIMEI ...");
});
By default, IMEI and Android ID are not collected by the SDK if the OS version is higher than KitKat (4.4) and the device contains Google Play Services (on SDK versions 4.8.8 and below the specific app needed GPS).
parameter | type | description |
---|---|---|
isCollect |
boolean |
opt-out of collection of Android ID |
Example:
appsFlyer.setCollectAndroidID(false,
(result) => {
console.log("setCollectAndroidID ... ");
});
- These in-app events help you track how loyal users discover your app, and attribute them to specific campaigns/media-sources. Please take the time define the event/s you want to measure to allow you to track ROI (Return on Investment) and LTV (Lifetime Value).
- The
trackEvent
method allows you to send in-app events to AppsFlyer analytics. This method allows you to add events dynamically by adding them directly to the application code.
parameter | type | description |
---|---|---|
eventName |
String |
custom event name, is presented in your dashboard. See the Event list HERE |
eventValues |
Object |
event details (optional) |
Example:
const eventName = "af_add_to_cart";
const eventValues = {
"af_content_id": "id123",
"af_currency":"USD",
"af_revenue": "2"
};
appsFlyer.trackEvent(eventName, eventValues,
(result) => {
console.log(result);
},
(error) => {
console.error(error);
}
)
AppsFlyer enables you to track app uninstalls. To handle notifications it requires to modify your AppDelegate.m
. Use didRegisterForRemoteNotificationsWithDeviceToken to register to the uninstall feature.
Example:
@import AppsFlyerLib;
...
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
// notify AppsFlyerTracker
[[AppsFlyerTracker sharedTracker] registerUninstall:deviceToken];
}
Read more about Uninstall register: Appsflyer SDK support site
appsFlyer.enableUninstallTracking(GCMProjectID): void
(Android only)
Set the GCM API key. AppsFlyer requires a Google Project Number and GCM API Key to enable uninstall tracking.
parameter | type | description |
---|---|---|
GCMProjectID |
String |
Example:
enableUninstallTracking(){
const gcmProjectNum = "987186475229";
appsFlyer.enableUninstallTracking(gcmProjectNum,
(success) => {
//...
})
}
Read more about Android Uninstall Tracking: Appsflyer SDK support site
Accessing AppsFlyer Attribution / Conversion Data from the SDK (Deferred Deeplinking). Read more: Android, iOS
parameter | type | description |
---|---|---|
callback |
function |
returns object |
status
:"success"
or"failure"
if SDK returned error ononInstallConversionData
event handlertype
:"onAppOpenAttribution"
- returns deep linking data (non-organic)"onInstallConversionDataLoaded"
- called on each launch"onAttributionFailure"
"onInstallConversionFailure"
data
: some metadata, for example:
{
"status": "success",
"type": "onInstallConversionDataLoaded",
"data": {
"af_status": "Organic",
"af_message": "organic install"
}
}
The code implementation fro the conversion listener must be made prior to the initialisation code of the SDK
Example:
this.onInstallConversionDataCanceller = appsFlyer.onInstallConversionData(
(data) => {
console.log(data);
}
);
appsFlyer.initSdk(...);
The appsFlyer.onInstallConversionData
returns function to unregister this event listener. Actually it calls NativeAppEventEmitter.remove()
Example:
state = {
appState: AppState.currentState
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
if(this.onInstallConversionDataCanceller){
this.onInstallConversionDataCanceller();
}
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
if (Platform.OS === 'ios') {
appsFlyer.trackAppLaunch();
}
}
if (this.state.appState.match(/active|foreground/) && nextAppState === 'background') {
if(this.onInstallConversionDataCanceller){
this.onInstallConversionDataCanceller();
}
}
this.setState({appState: nextAppState});
}
Get AppsFlyer’s proprietary Device ID. The AppsFlyer Device ID is the main ID used by AppsFlyer in Reports and APIs.
parameter | type | description |
---|---|---|
error |
String |
Error callback - called on getAppsFlyerUID failure |
appsFlyerUID |
string |
The AppsFlyer Device ID |
Example:
appsFlyer.getAppsFlyerUID((error, appsFlyerUID) => {
if (error) {
console.error(error);
} else {
console.log("on getAppsFlyerUID: " + appsFlyerUID);
}
});
Get AppsFlyer’s proprietary Device ID. The AppsFlyer Device ID is the main ID used by AppsFlyer in Reports and APIs.
parameter | type | description |
---|---|---|
error |
String |
Error callback - called on getAppsFlyerUID failure |
appsFlyerUID |
string |
The AppsFlyer Device ID |
Example:
const latitude = -18.406655;
const longitude = 46.406250;
appsFlyer.trackLocation(longitude, latitude, (error, coords) => {
if (error) {
console.error(error);
} else {
this.setState({ ...this.state, trackLocation: coords });
}
});
Report Deep Links for Re-Targeting Attribution (Android). This method should be called when an app is opened using a deep link.
Example:
componentDidMount() {
Linking.getInitialURL().then((url) => {
if (appsFlyer) {
appsFlyer.sendDeepLinkData(url); // Report Deep Link to AppsFlyer
// Additional Deep Link Logic Here ...
}
}).catch(err => console.error('An error occurred', err));
}
More about Deep Links in React-Native: React-Native Linking More about Deep Links in Android: Android Deep Linking , Adding Filters
AppsFlyer enables you to report one or more of the device’s associated email addresses. You must collect the email addresses and report it to AppsFlyer according to your required encryption method. More info you can find on AppsFlyer-SDK-Integration-Android and AppsFlyer-SDK-Integration-iOS
parameter | type | description |
---|---|---|
options |
Object |
setUserEmails configuration |
options
name | type | default | description |
---|---|---|---|
emailsCryptType |
int |
0 | NONE - 0 (default), SHA1 - 1 , MD5 - 2 |
emails |
array |
comma separated list of emails |
Example:
const options = {
"emailsCryptType": 2,
"emails": [
"[email protected]",
"[email protected]"
]
};
appsFlyer.setUserEmails(options,
(response) => {
this.setState({ ...this.state, setUserEmailsResponse: response });
},
(error) => {
console.error(error);
}
);
In order to track retargeting and use the onAppOpenAttribution callbacks in iOS, the developer needs to pass the User Activity / URL to our SDK, via the following methods in the AppDelegate.m file:
- (BOOL) application:(UIApplication *)application continueUserActivity:(NSUserActivity *)userActivity restorationHandler:(void (^)(NSArray *_Nullable))restorationHandler
{
[[AppsFlyerTracker sharedTracker] continueUserActivity:userActivity restorationHandler:restorationHandler];
return YES;
}
// Reports app open from deep link from apps which do not support Universal Links (Twitter) and for iOS8 and below
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString*)sourceApplication annotation:(id)annotation {
[[AppsFlyerTracker sharedTracker] handleOpenURL:url sourceApplication:sourceApplication withAnnotation:annotation];
return YES;
}
// Reports app open from URL Scheme deep link for iOS 10
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
options:(NSDictionary *) options {
[[AppsFlyerTracker sharedTracker] handleOpenUrl:url options:options];
return YES;
}
This plugin has a demo
project bundled with it. To give it a try , clone this repo and from root a.e. react-native-appsflyer
execute the following:
npm run setup
- Run
npm run demo.ios
ornpm run demo.android
will run for the appropriate platform. - Run
npm run ios-pod
to runPodfile
underdemo
project
Basic code implementation example of implementing the AppsFlyer React-Native plugin in the cross-platform App.js
file:
- Run
npm run demo2.ios
ornpm run demo2.android
will run for the appropriate platform. - Run
npm run ios-pod2
to runPodfile
underdemo2
project