reactNative接入Umeng統計(android)

由於android接入友盟統計其實就是調用原生的api,完全可以按原生的方式來接入統計

在原生android文件夾下配置

1.在build.gradle中依賴所需要的jar包

compile 'com.umeng.analytics:analytics:latest.integration'

2.添加友盟統計所需要的權限

 <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />
    <uses-permission android:name="android.permission.CAMERA" />

    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

3.添加Umeng,appkey 和統計標識,如(騰訊)

 <meta-data
            android:name="UMENG_APPKEY"
            android:value="umengAppkey" />
        <meta-data
            android:name="UMENG_CHANNEL"

            android:value="tencent" />

4.在MainActivity中添加下面代碼

  @Override
    public void onResume() {
        super.onResume();
        MobclickAgent.onResume(this);
    }
    @Override
    protected void onPause() {
        super.onPause();
        MobclickAgent.onPause(this);
    }


到此Umeng統計所需要的環境已經搭建完成,接下來就是接入統計啦

1.自定義繼承ReactPackage,名字隨便取

public class DplusReactPackage implements ReactPackage {

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    /**
     * 如需要添加本地方法,只需在這裏add
     *
     * @param reactContext
     * @return
     */
    @Override
    public List<NativeModule> createNativeModules(
        ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new UMAnalyticsModule(reactContext));
        return modules;
    }

}

2.在Myapplication中將自定義的包在 getPackages()方法中添加進去

 @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
            new DplusReactPackage()

      );

3.自定義需要統計的方法:(可以自己自定義需要統計的方法用 @ReactMethod註解)

public class UMAnalyticsModule extends ReactContextBaseJavaModule {
    private ReactApplicationContext context;
    public UMAnalyticsModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }
    @Override
    public String getName() {
        return "UMAnalyticsModule";
    }

    /********************************U-App統計*********************************/
    @ReactMethod
    public void onPageBegin(String mPageName) {
        MobclickAgent.onPageStart(mPageName);
    }

    @ReactMethod
    public void onPageEnd(String mPageName) {
        MobclickAgent.onPageEnd(mPageName);
    }

    @ReactMethod
    public void onEvent(String eventId) {
        MobclickAgent.onEvent(context, eventId);
    }

    @ReactMethod
    public void onProfileSignIn(String loginId) {
        MobclickAgent.onProfileSignIn(loginId);
    }

    @ReactMethod
    public void onEventWithLable(String eventId, String eventLabel) {
        MobclickAgent.onEvent(context, eventId, eventLabel);
    }

}

以上配置均屬於原生代碼配置,建議用androidStudio配置好,編譯,如果通過原生代碼就搭建好了

下面開始接入到ReactNative代碼中,我們只需要定義一個基類,至於基類的搭建,上一篇文章中已經有寫過啦,這裏就不在寫了,

一般是在有頁面的基類中裏面的生命週期方法中調用你需要統計的數據,調用原生中註解的方法,當然ios中也是同樣如此只需要將原生中的註解回調方法名設置一樣即可,

example:

   var UmengAnalytics=NativeModules.UMAnalyticsModule
componentDidMount() { UmengAnalytics.onPageBegin("StringTag") ;}

 componentWillUnmount() {UmengAnalytics.onPageEnd("StringTag") ;}

統計頁面開始,頁面結束,登錄調用

UmengAnalytics.onProfileSignIn(userId + "");

等等,你還可以在註解方法中自定義需要統計的數據,

到此文章就結束了。。。。。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章