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

前端之家收集整理的这篇文章主要介绍了React Native 轻松集成统计功能(iOS 篇)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本

第一步 安装:

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

  1. npm install janalytics-react-native --save
  2. npm install jcore-react-native --save
  3. react-native link

第二步 配置:

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

第三步 使用

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

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

调用 API

startLogPageView(params)

这个方法表示开始记录页面统计,在生命周期中调用

  1. componentDidMount() {
  2. var param = {
  3. pageName: "main"
  4. };
  5. JAnalyticsModule.startLogPageView(param);
  6. }

stopLogPageView(params)

这个方法表示结束记录页面统计,在生命周期中调用

  1. componentWillUnmount() {
  2. var param = {
  3. pageName: "main"
  4. };
  5. JAnalyticsModule.stopLogPageView(param);
  6. }

postEvent(event)

上报统计事件,目前事件分为:CountEvent(计数事件)、CalculateEvent(计算事件)、RegisterEvent(注册事件)、LoginEvent(登录事件)、BrowseEvent(浏览事件)、PurchaseEvent(购买事件)。各事件格式如下:

  1. loginEvent = {
  2. type: 'login',// 必填
  3. extra: Object,// 附加键值对,格式 {String: String}
  4. method: String // 填自己的登录方法
  5. success: Boolean
  6. }
  7.  
  8. registerEvent = {
  9. type: 'register',// 附加键值对,格式 {String: String}
  10. method: String // 填自己的登录方法
  11. success: Boolean
  12. }
  13.  
  14. purchaseEvent = {
  15. type: 'purchase',// 必填
  16. extra: Object,// 附加键值对,格式 {String: String}
  17. goodsType: String,goodsId: String,goodsName: String,success: Boolen,price: float,currency: String,// CNY,USD
  18. count: int
  19. }
  20.  
  21. browseEvent = {
  22. type: 'browse',id: String,extra: Object,// 附加键值对,格式 {String: String}
  23. name: String,contentType: String,duration: float
  24. }
  25.  
  26. countEvent = {
  27. type: 'count',// 附加键值对,格式 {String: String}
  28. id: String
  29. }
  30.  
  31. calculateEvent = {
  32. type: 'calculate',// 附加键值对,格式 {String: String}
  33. id: String,value: double
  34. }

使用示例:

  1. onLoginPress = () => {
  2. var LoginEvent = {
  3. type: 'login',extra: {
  4. userId: "user1"
  5. },method: "login",success: true
  6. };
  7. JAnalyticsModule.postEvent(LoginEvent);
  8. }

作者:HuminiOS - 极光推送

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

知乎专栏:极光日报

猜你在找的React相关文章