文档章节

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

极光推送
 极光推送
发布于 2017/10/19 10:48
字数 456
阅读 224
收藏 10

最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 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 篇) 知乎专栏:极光日报

© 著作权归作者所有

极光推送
粉丝 42
博文 240
码字总数 257306
作品 1
深圳
个人站长
私信 提问
react native 友盟统计 IOS 端集成

react native 友盟统计的Android端集成可参考 :https://www.jianshu.com/p/1c41d4b66312 希望大家少走些弯路吧。 下面介绍下IOS 端的集成: 步骤 ios端的sdk集成 ios 和rn 的交互类 工程的相...

JsLin_
2018/08/30
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
2018/07/12
0
0
继 Airbnb 之后,Udacity 也宣布弃用 React Native!

Udacity 移动端团队最近删除了 App 中使用 React Native 语言开发的相关功能。 我们收到大量有关我们用法或 React Native 的问题以及为什么我们停止投入资源和精力在 RN 上。 在这篇文章中,...

亦枫
2018/10/29
0
0
使用 React Native 一年后的感受

当我在面试Discord的时候,技术主管Stanislav跟我说: React Native代表着未来。等它一发布,我们就会用它从零构建iOS应用。 作为一名原生iOS开发者,基于先前使用PhoneGap的经验,我非常怀疑...

oschina
2016/06/22
68K
31
Facebook 是如何构建首个跨平台 React Native 应用的?

今年早些时候,我们发布了 React Native for iOS。React Native 将开发者在 web 上所使用的 React — 拥有声明式的自包含组件以及快速的开发周期 — 带到了移动平台, 同时保留了原生应用程序...

oschina
2015/09/18
5.5K
6

没有更多内容

加载失败,请刷新页面

加载更多

Git 分支管理规范

Git 仓库申请流程 开发主管向 Git 管理员提交 Git 仓库申请【邮件:发送给 Git 管理员,抄送给项目经理,申请表可向 Git 管理员获取】 Git 管理员审批开发主管的申请,审批以下具体信息: 审批...

物种起源-达尔文
22分钟前
6
0
浅谈iterator迭代器模式

一、前言 设计模式有很多,最典型的是GoF的23种设计模式,听起来很多,其实大部分我们都是见过的,按照常见度来分,最常用的差不多是六七个吧,因此,我们在学习的时候应该有轻重缓急之分,不...

青衣霓裳
22分钟前
4
0
Spring Boot2 系列教程(二)创建一个 Spring Boot 项目的三种方法

我最早是 2016 年底开始写 Spring Boot 相关的博客,当时使用的版本还是 1.4.x ,文章发表在 CSDN 上,阅读量最大的一篇有 43W+,如下图: 2017 年由于种种原因,就没有再继续更新 Spring B...

江南一点雨
24分钟前
5
0
熟练掌握这5个Excel技巧,只加薪不加班

月初月报的整理,周一周报的整理都离不开Excel,有的同事只要10分钟搞定,也有同事花费一上午时间整理报表,这样对比起来,时间差是很大的。那怎样快速对Excel表中的数据进行整理呢? 1.快速...

干货趣分享
28分钟前
5
0
总结:SpringCloud

一、Eureka Eureka 是 Netflix 开发的,一个基于 REST 服务的,服务注册与发现的组件 它主要包括两个组件:Eureka Server 和 Eureka Client Eureka Client:一个Java客户端,用于简化与 Eure...

浮躁的码农
37分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部