关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能。
第一步 安装
在你的项目路径下执行命令:
npm install janalytics-react-native --save
npm install jcore-react-native --save
react-native link
执行完上述命令后,使用 Android Studio 打开你的项目。
第二步 配置:
2.1 配置 settings.gradle
执行完 link 命令后,如果 link 失败,则需要手动打开 settings.gradle 文件,完成以下配置:
your project/settings.gradle
include ':app','janalytics-react-native','jcore-react-native'
project(':janalytics-react-native').projectDir = new File(rootProject.projectDir,'../node_modules/janalytics-react-native/android')
project(':jcore-react-native').projectDir = new File(rootProject.projectDir,'../node_modules/jcore-react-native/android')
2.2 配置 build.gradle
your project/android/app/build.gradle
android {
...
defaultConfig {
applicationId "your application id"
...
manifestPlaceholders = [
JPUSH_APPKEY: "your app key",//在此替换你的APPKey
JPUSH_CHANNEL: "developer-default",//应用渠道号,默认即可
]
}
}
...
dependencies {
compile project(':janalytics-react-native')
compile project(':jcore-react-native')
}
2.3 配置 AndroidManifest.xml
your project/AndroidManifest.xml
<manifest>
<application>
...
<Meta-data android:name="JPUSH_CHANNEL" android:value="${APP_CHANNEL}"/>
<Meta-data android:name="JPUSH_APPKEY" android:value="${JPUSH_APPKEY}"/>
...
</application>
</manifest>
...
到此为止配置已经完成了,现在 sync 一下项目即可看到 janalytics 和 jcore 两个库出现在自己的项目下。
第三步 使用
3.1 加入 JAnalyticsPackage:
your project/app/MainApplication.java
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),new JAnalyticsPackage(SHUTDOWN_TOAST,SHUTDOWN_LOG)
);
}
上面的两个参数是 bool 类型的,第一个参数设置为 true 表示关闭 toast 提示,第二个设置为 true 表示关闭日志打印。建议在 debug 版本中打开。
同样在 MainApplication,调用 init 方法:
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this,false);
// 在 Init 之前调用,设置为 true,则会打印 debug 级别日志,否则只会打印 warning 级别以上的日志
JAnalyticsInterface.setDebugMode(true);
JAnalyticsInterface.init(this);
}
3.2 import JAnalyticsModule
接下来在 JS 文件中只要引入 JAnalyticsModule 就可以调用它的接口了:
your component.js
...
import JAnalyticsModule from 'janalytics-react-native';
调用 API
startLogPageView(params)
componentDidMount() {
var param = {
pageName: "main"
};
JAnalyticsModule.startLogPageView(param);
}
stopLogPageView(params)
componentWillUnmount() {
var param = {
pageName: "main"
};
JAnalyticsModule.stopLogPageView(param);
}
postEvent(event)
上报统计事件,目前事件分为:CountEvent(计数事件)、CalculateEvent(计算事件)、RegisterEvent(注册事件)、LoginEvent(登录事件)、BrowseEvent(浏览事件)、PurchaseEvent(购买事件)。各事件格式如下:
loginEvent = {
type: 'login',// 必填
extra: Object,// 附加键值对,格式 {String: String}
method: String, // 填自己的登录方法
success: Boolean
}
registerEvent = {
type: 'register',// 附加键值对,格式 {String: String}
method: String, // 填自己的登录方法
success: Boolean
}
purchaseEvent = {
type: 'purchase',// 必填
extra: Object,// 附加键值对,格式 {String: String}
goodsType: String,goodsId: String,goodsName: String,success: Boolen,price: float,currency: String,// CNY,USD
count: int
}
browseEvent = {
type: 'browse',id: String,extra: Object,// 附加键值对,格式 {String: String}
name: String,contentType: String,duration: float
}
countEvent = {
type: 'count',// 附加键值对,格式 {String: String}
id: String
}
calculateEvent = {
type: 'calculate',// 附加键值对,格式 {String: String}
id: String,value: double
}
使用示例:
onLoginPress = () => {
var LoginEvent = {
type: 'login',extra: {
userId: "user1"
},method: "login",success: true
};
JAnalyticsModule.postEvent(LoginEvent);
}
作者:KenChoi - 极光推送
原文:React Native 轻松集成统计功能(Android 篇)
知乎专栏:极光日报