Skip to content

jsdario/react-native-appsflyer

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

54 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-native-appsflyer

This React Native Library uses the AppsFlyer 4.6.0 library for both iOS and Android

npm version

Table of content

  • iOS AppsFlyerSDK v4.6.3
  • Android AppsFlyerSDK v4.6.5

$ npm install react-native-appsflyer --save

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

Example:

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

Don't use CocoaPods? please see their DOCS .

  1. Create bridge between your application and appsFlyerFramework: In XCode ➜ project navigator, right click LibrariesAdd Files to [your project's name] Go to node_modulesreact-native-appsflyer and add RNAppsFlyer.xcodeproj Build your project, It will generate libRNAppsFlyer.a file:

    enter image description here

  2. In your project build phaseLink 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"
android/app/build.gradle
  1. Add the project to your dependencies
dependencies {
    ...
    compile project(':react-native-appsflyer')
}
android/settings.gradle
  1. 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):

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() 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
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 });
      }
    })
})

##### 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 or npm run demo.android will run for the appropriate platform.
  • Run npm run ios-pod to run Podfile under demo project

demo printscreen

About

AppsFlyer plugin for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Java 35.3%
  • Objective-C 34.9%
  • JavaScript 27.4%
  • Python 2.3%
  • Ruby 0.1%