在ReactNative中使用umeng统计以及埋点

前言

今天在学习reactnative使用友盟添加埋点时候发现视频有些方法过时了，在这里记录下最新方法。

1.申请友盟账号

首先去友盟官网申请个账号，并添加app获取Appkey

image.png

2.选择集成方式

在工程build.gradle配置脚本中buildscript和allprojects段中添加【友盟+】sdk 新maven仓库地址。如下图。

maven { url 'http://dl.bintray.com/umsdk/release' }

官方为https，下载失败了，于是改成了http

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    repositories {
        maven { url 'http://dl.bintray.com/umsdk/release' }
    }
}

allprojects {
    repositories {
        maven { url 'http://dl.bintray.com/umsdk/release' }
    }
}

创建Module

为了实现模块化开发，新建一个Module，名为trackshare，可以自己定义。

1.添加权限

在trackshare Module中找到AndroidManifest.xml文件，并添加权限：

2.添加依赖

在trackshare Module的build.gradle中添加依赖

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    api  'com.umeng.umsdk:analytics:8.0.0'
    api  'com.umeng.umsdk:common:2.0.0'
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

同时记得下载依赖，最后将trackshare添加到app Module的依赖中，这样就可以传到app中

image.png

初始化

在MainActivity.java中进行初始化以及重写onCrate()方法

import com.umeng.analytics.MobclickAgent;
 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //以及发送间隔
        MobclickAgent.setSessionContinueMillis(1000);
        //统计的场景，此方法已经被抛弃
       // MobclickAgent.setScenarioType(this,MobclickAgent.EScenarioType.E_DUM_NORMAL);
  }
public void onResume() {
      super.onResume();
      MobclickAgent.onResume(this);
  }
  public void onPause() {
      super.onPause();
      MobclickAgent.onPause(this);
  }

开发JS Bridge

1.添加AnalyticsModule.java

友盟在github仓库umeng/React_Native_Compent
中已经提供相应的js Bridge，我们只需要将## React_Native_Compent/android/app/src/main/java/com/umeng/soexample/invokenative/AnalyticsModule.java导入到自己项目中即可
在E:\react\Github_RN\android\trackshare\src\main\java\com\example\trackshare\org中新建AnalyticsModule类，将代码拷贝进来即可。因为依赖react-native，所以我们需要在trackshare Module中的build.gradle添加react-native依赖

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
    api  'com.umeng.umsdk:analytics:8.0.0'
    api  'com.umeng.umsdk:common:2.0.0'
    implementation "com.facebook.react:react-native:+"  // From node_modules
}

2.添加TrackShareReactPackage.java

在trackshare\src\main\java\com\example\trackshare\org创建TrackShareReactPackage.java

package com.example.trackshare.org;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.uimanager.ViewManager;

/**
 * Created by wangfei on 17/8/28.
 */

public class TrackShareReactPackage implements ReactPackage {

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

    /**
     * 如需要添加本地方法，只需在这里add
     *
     * @param reactContext
     * @return
     */
    @Override
    public List createNativeModules(
            ReactApplicationContext reactContext) {
        List modules = new ArrayList<>();
        modules.add(new AnalyticsModule(reactContext));
        return modules;
    }
}

3.调用TrackShareReactPackage

在MainApplication.java中调用TrackShareReactPackage

@Override
        protected List getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List packages = new PackageList(this).getPackages();
            packages.add(new TrackShareReactPackage());
          return packages;
        }

这样TrackShareReactPackage就可以供reactnative使用

4.添加TrackShare.java

在trackshare\src\main\java\com\example\trackshare\org添加TrackShare.java

package com.example.trackshare.org;

import android.annotation.TargetApi;
import android.content.Context;
import android.os.Build;
import android.provider.SyncStateContract;

import com.umeng.commonsdk.BuildConfig;
import com.umeng.commonsdk.UMConfigure;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
public class TrackShare {
    /**
     * 注意: 即使您已经在AndroidManifest.xml中配置过appkey和channel值，
     * 也需要在App代码中调用初始化接口（如需要使用AndroidManifest.xml中配置好的appkey和channel值，UMConfigure
     * .init调用中appkey和channel参数请置为null）。
     *
     * @param context
     */
    public static void init(Context context) {
        initRN("react-native", "1.0");
        //接口一共五个参数，其中第一个参数为Context，第二个参数为友盟Appkey，第三个参数为channel，第四个参数为应用类型（手机或平板），第五个参数为push的secret（如果没有使用push，可以为空）
        UMConfigure.init(context, "5e129a8fcb23d2b684000af9", "official", UMConfigure.DEVICE_TYPE_PHONE, null);
        UMConfigure.setLogEnabled(BuildConfig.DEBUG);
    }

    @TargetApi(Build.VERSION_CODES.KITKAT)
    private static void initRN(String v, String t) {
        Method method = null;
        try {
            Class config = Class.forName("com.umeng.commonsdk.UMConfigure");
            method = config.getDeclaredMethod("setWraperType", String.class, String.class);
            method.setAccessible(true);
            method.invoke(null, v, t);
        } catch (NoSuchMethodException | InvocationTargetException | IllegalAccessException | ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
}

以上方法用来初始化接口

reactnative添加埋点

创建AnalyticsUtil.js文件

const {NativeModules} = require('react-native');
module.exports = NativeModules.UMAnalyticsModule;

在需要埋点的项目中引用AnalyticsUtil.js并添加埋点

import AnalyticsUtil from '../util/AnalyticsUtil'

 renderRightButton(){
    const {theme}=this.props;
    return {
        AnalyticsUtil.onEvent("SearchButtonClick");
        NavigatorUtil.gotoPage({theme},'SearchPage')}}
    >
      
        
        
      
    
  }

效果

image.png

image.png

总结

对于android还是很懵逼的，不得不说搞reactnative还是很需要原生app同事的支持，接下来将利用umeng实现第三方登录以及分享等功能，觉得文章有用欢迎赞赏，谢谢！