文档章节

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

极光推送
 极光推送
发布于 2017/11/06 14:10
字数 746
阅读 24
收藏 0

关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能。

第一步 安装

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

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',  // 必填
     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);
  }

作者:KenChoi - 极光推送

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

知乎专栏:极光日报

© 著作权归作者所有

极光推送
粉丝 42
博文 240
码字总数 257306
作品 1
深圳
个人站长
私信 提问
继 Airbnb 之后,Udacity 也宣布弃用 React Native!

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

亦枫
2018/10/29
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
React Native 轻松集成分享功能(Android 篇)

关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能。 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台)...

极光推送
2017/11/01
67
0
React Native 混合开发(Android篇)

在React Native的应用场景中,有时候一个APP只有部分页面是由React Native实现的,比如:我们常用的携程App,它的首页下的很多模块都是由React Native实现的,这种开发模式被称为混合开发。 ...

SuShine
07/05
39
0
从Android到React Native开发(四、打包流程解析和发布为Maven库)

1、从Android到React Native开发(一、入门) 2、从Android到React Native开发(二、通信与模块实现) 3、从Android到React Native开发(三、自定义原生控件支持)  作为失踪人口,本篇是对...

恋猫月亮
2018/06/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ES6

ES6:不改变原理的基础上,让API变得更简单 一、let:代替var用于声明变量 1、var的缺点: (1)声明提前 (2)没有块级作用域 2、let的优点: (1)组织了申明提前 (2)让let所在的块({}),...

wytao1995
今天
3
0
kubernetes 环境搭建 —— minikube

创建集群 minikube start 搭建好 k8s 集群后,可以查看集群的状态以及部署应用。主要用到的是 k8s 的 api,这通常需借助于 kutectl 命令行工具 基本操作 kubectl versionkubectl cluster-i...

lemos
今天
9
0
关于js混淆与反混淆还原操作

使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密,或者混淆js来达到代码保护。 1、为什么...

开源oschina
今天
11
0
用盛金公式解三次方程(ansi c版)

/* cc cubic.c -lm gcc cubic.c -lm Shengjin's Formulas Univariate cubic equation aX ^ 3 + bX ^ 2 + cX + d = 0, (a, b, c, d < R, and a!= 0). Multiple root disc......

wangxuwei
今天
9
0
JBolt开发平台入门(16)- 弹出Dialog显示指定区域的html内容

在JBolt里,有个主从表Demo。 子表中除了普通的table显示,还有其它从表显示形式 比如下方案例:是针对一个升级管理子表中存放版本的changelog富文本信息。 需求是点击左上角的弹出查看按钮,...

山东-小木
今天
45
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部