React Native Plugin

You can also find the plugin on npm here:

https://www.npmjs.com/package/react-native-appsflyer

Set out below are the integration instructions for using AppsFlyer’s React Plugin.

This is the React Native plugin for AppsFlyer SDK.

This plugin is built for

  • iOS AppsFlyerSDK v4.7.3
  • Android AppsFlyerSDK v4.7.1

Installation Instructions

Follow these steps for the installation instructions for the AppsFlyer plugin:

First, download the library from npm: 

$ npm install react-native-appsflyer --save

iOS

1.  Add the appsFlyerFramework to podfile and run pod install.

Example:

use_frameworks!
target 'demo' do
  pod 'AppsFlyerFramework'
end


If you do not use CocoaPods, refer to their documentation here.

2.  Create bridge between your application and appsFlyerFramework

3.  In XCode >> project navigator, right click Libraries >> Add Files to [your project's name]

4.  Go to node_modules >> react-native-appsflyer and add RNAppsFlyer.xcodeproj

5.  Build your project

6.  The libRNAppsFlyer.a file is generated

enter image description here

7.  Run your project (Cmd+R) or through CLI run: react-native run-ios

Android

android/app/build.gradle

1.  Add the project to your dependencies

dependencies {
    ...
    compile project(':react-native-appsflyer')
}
android/settings.gradle

2.  Add the project

include ':react-native-appsflyer'
project(':react-native-appsflyer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-appsflyer/android')

Build your project and you get following dependency (see an Image):

enter image description here

MainApplication.java

Add:

  1. import com.appsflyer.reactnative.RNAppsFlyerPackage;

  2. In the getPackages() method register the module: new RNAppsFlyerPackage(MainApplication.this)

So getPackages() appear as follows:

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
          new RNAppsFlyerPackage(MainApplication.this),
          //.....
      );
    }

API Methods

Call module by adding:

import appsFlyer from 'react-native-appsflyer';
appsFlyer.initSdk(options, callback): void

Initialize 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, (error, result) => {
      if (error) {
        console.error(error);
      } else {
       //..
      }
    })
appsFlyer.trackEvent(eventName, eventValues, callback): 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 
 eventValue  Object  event details

Example:

 const eventName = "af_add_to_cart";
 const eventValues = {
      "af_content_id": "id123",
      "af_currency":"USD",
      "af_revenue": "2"
  };

 appsFlyer.trackEvent(eventName, eventValues, (error, result) => {
     if (error) {
         console.error(error);
     } else {
         //...
     }
 })

Track App Uninstalls

iOS

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

Android

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 
Callback Structure:
  • status: "success"or "failure" if SDK returned error on onInstallConversionData event handler
  • type:
    • "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 });
      }
    })
})

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-appsflyerexecute the following:

npm run setup
  • Run npm run demo.ios or npm run demo.ios will run for the appropriate platform.
  • Run npm run ios-pod to run Podfile under demo project

demo printscreen

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request
Powered by Zendesk