您的位置:首页 > Web前端 > React

React Native 轻松集成统计功能(iOS 篇)

2017-10-19 00:00 441 查看
最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本

第一步 安装:

在你的项目路径下执行命令:

npm install janalytics-react-native --save
npm install jcore-react-native --save
react-native link

第二步 配置:

ReactNative iOS 端配置步骤在插件中自动完成,无需额外的配置。

第三步 使用

接下来在 JS 文件中只要导入 JAnalyticsModule 就可以调用它的接口了:

import JAnalyticsModule from 'janalytics-react-native';
JAnalyticsModule.setup({appKey: "you appKey get from jiguang website"})  // iOS 端需要先调用该方法

调用 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',  // 必填
extra: Object,  // 附加键值对,格式 {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',
extra: Object,  // 附加键值对,格式 {String: String}
id: String
}

calculateEvent = {
type: 'calculate',
extra: Object,  // 附加键值对,格式 {String: String}
id: String,
value: double
}

使用示例:

onLoginPress = () => {
var LoginEvent = {
type: 'login',
extra: {
userId: "user1"
},
method: "login",
success: true
};
JAnalyticsModule.postEvent(LoginEvent);
}


作者:HuminiOS - 极光推送
原文:React Native 轻松集成统计功能(iOS 篇)
知乎专栏:极光日报
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  React Native iOS