This React Native Library uses the AppsFlyer 4.6.0 library for both iOS and Android
- Supported Platforms
- Installation
- iOS
- Android
- API Methods
- initSdk
- setCustomerUserId
- setUserEmails
- trackEvent
- Track App Uninstalls
- onInstallConversionData
- getAppsFlyerUID
- trackLocation (ios only)
- Demo
- iOS AppsFlyerSDK v4.6.3
- Android AppsFlyerSDK v4.6.5
$ npm install react-native-appsflyer --save
- Add the
appsFlyerFramework
topodfile
and runpod install
.
Example:
use_frameworks!
target 'demo' do
pod 'AppsFlyerFramework'
end
Don't use CocoaPods? please see their DOCS .
-
Create bridge between your application and
appsFlyerFramework
: In XCode ➜ project navigator, right clickLibraries
➜Add Files to [your project's name]
Go tonode_modules
➜react-native-appsflyer
and addRNAppsFlyer.xcodeproj
Build your project, It will generatelibRNAppsFlyer.a
file: -
In your project build phase ➜ Link binary with libraries ➜ add
libRNAppsFlyer.a
. Run your project (Cmd+R
) or through CLI run:react-native run-ios
#####Breaking Changes for react-native >= 0.40.0:
In RNAppsFlyer.h
:
#import <React/RCTBridgeModule.h> //for react-native ver >= 0.40
//#import "RCTBridgeModule.h" for react-native ver < 0.40
In RNAppsFlyer.m
:
// for react-native ver >= 0.40
#import <React/RCTBridge.h>
#import <React/RCTEventDispatcher.h>
// for react-native ver < 0.40
//#import "RCTBridge.h"
//#import "RCTEventDispatcher.h"
- 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')
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:
let options = {
devKey: 'WdpTVAcYwmxsaQ4WeTspmh',
appId: "975313579",
isDebug: true
};
appsFlyer.initSdk(options,
(result) => {
console.log(result)
},
(error) => {
console.error(error);
}
)
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) => {
//..
})
##### appsFlyer.trackEvent(eventName, eventValues, errorC, successC): void
- 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, errorC, successC) => {
(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:
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
// notify AppsFlyerTracker
[[AppsFlyerTracker sharedTracker] registerUninstall:deviceToken];
}
Read more about Uninstall register: Appsflyer SDK support site
setGCMProjectID(GCMProjectID): void
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:
setGCMProjectID(){
const gcmProjectId = "987186475229";
appsFlyer.setGCMProjectID(gcmProjectId,
(gcmProjectID) => {
//...
},
(error) => {
console.error(error);
})
}
Read more about Android Uninstall Tracking: Appsflyer SDK support site
#####appsFlyer.onInstallConversionData(callback): function:unregister
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"
}
}
Example:
this.onInstallConversionDataCanceller = appsFlyer.onInstallConversionData(
(data) => {
console.log(data);
}
);
The appsFlyer.onInstallConversionData
returns function to unregister this event listener. Actually it calls NativeAppEventEmitter.remove()
Example:
componentWillUnmount() {
if(this.onInstallConversionDataCanceller){
this.onInstallConversionDataCanceller();
}
}
#####appsFlyer.getAppsFlyerUID(callback): void
Get AppsFlyer’s proprietary Device ID. The AppsFlyer Device ID is the main ID used by AppsFlyer in Reports and APIs.
Example:
appsFlyer.getAppsFlyerUID((error, appsFlyerUID) => {
if (error) {
console.error(error);
} else {
console.log("on getAppsFlyerUID: " + appsFlyerUID);
}
})
#####appsFlyer.trackLocation(longitude, latitude, callback(error, coords): void
(iOS only)
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 });
}
})
})
##### appsFlyer.setUserEmails(options, errorC, successC): void
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":[
"user1@gmail.com",
"user2@gmail.com"
]
};
appsFlyer.setUserEmails(options,
(response) => {
this.setState( { ...this.state, setUserEmailsResponse: response });
},
(error) => {
console.error(error);
})
##Demo
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