前言
今天在学习reactnative使用友盟添加埋点时候发现视频有些方法过时了,在这里记录下最新方法。
1.申请友盟账号
首先去友盟官网申请个账号,并添加app获取Appkey
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中
初始化
在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')}}
>
}
效果
总结
对于android还是很懵逼的,不得不说搞reactnative还是很需要原生app同事的支持,接下来将利用umeng实现第三方登录以及分享等功能,觉得文章有用欢迎赞赏,谢谢!