React Native 轻松集成统计功能（Android 篇）

cyrils 发布于2019-06-25 11:31 / 625人阅读

摘要：关于推送的集成请参考这篇文章，本篇文章将引导你集成统计功能，只需要简单的三个步骤就可以集成统计功能。第三步使用加入上面的两个参数是类型的，第一个参数设置为表示关闭提示，第二个设置为表示关闭日志打印。建议在版本中打开。

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

第一步安装
在你的项目路径下执行命令：

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

到此为止配置已经完成了，现在 sync 一下项目即可看到 janalytics 和 jcore 两个库出现在自己的项目下。

第三步使用
3.1 加入 JAnalyticsPackage：

your project/app/MainApplication.java

...
@Override
protected List getPackages() {
        return Arrays.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);
  }

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13855.html

React Native 轻松集成分享功能（Android 篇）

摘要：微信分享回调必须在包名路径下，否则回调不成功添加需要在你的下新建一个的包名，然后创建。添加在你的目录下添加，并且将新浪微博，，微信的和替换成自己的。关于推送的集成请参考这篇文章，关于统计的集成请参考这篇文章，本篇文章将引导你集成分享功能。在集成插件之前，需要在各大开放平台上成功注册应用，并通过审核（支持 3 个可选的主流平台）。支持的平台如下：微信开放平台 QQ 开放平台微博...

Richard_Gao 2019-06-25 11:32 评论0 收藏0
jpush-react-native 插件的集成与使用 Android 篇

摘要：接下来我们以插件为例来看看在中如何使用原生的第三方库。是极光推送提供的版本插件，可以让我们快速集成推送功能。作者极光为极光团队账号，欢迎关注原文插件的集成与使用篇知乎专栏极光日报前言当前 React Native 虽说版本更新比较快，各种组件也提供的很全面了，但是在某些情况下，混合开发的方式才会快速缩短开发周期，原因无非就是原生平台的底蕴无疑更深，拥有众多且类型丰富的第三方支持库。...

dcr309duan 2019-06-25 11:14 评论0 收藏0
在 ReactNative 的 App 中，集成 Bugly 你会遇到的一些坑

摘要：对于崩溃的收集，我主要关心两个部分是需要统计到正确的崩溃栈。统计到的崩溃栈要是易于阅读的。最方便的是，你直接点击崩溃栈的代码，会自动打开对应的文件。但是正是因为会在模式下，住我们的崩溃栈，从而会导致无法搜集到对应的崩溃也就无法进行上报。 showImg(https://segmentfault.com/img/remote/1460000011982644?w=900&h=500); ...

ermaoL 2019-06-25 11:42 评论0 收藏0
计划在2021年进行响应式开发？但不确定应该选择哪种技术来快速且低成本的开发应用程序？一文给你解决问

摘要：与此同时，因新冠疫情的影响使得用户对移动应用程序的需求激增。调查报告显示年移动应用程序已经产生了亿美元的收入，预计到年将产生亿美元的收入。引言计划在2021年进...

Codeing_ls 2021-09-08 09:36 评论0 收藏0
Android混合开发

摘要：另外已经开始报名，定于月日在上海举行，早鸟票已售罄，想去的抓紧时间报名。和相互调用当前的开发中，会使用大量的甚至出现了混合开发模式，使用开发，页面开发效率高和移植便利性为主。前端周刊第 52 期：JS Conf 2017 开始报名、苹果腾讯开战、React Native 周边哈哈，互联网圈本周的大事件是微信公众号关闭 iOS 平台打赏入口，讨论这件事情的文章很多，前端周刊就没有收录...

张巨伟 2019-06-25 11:47 评论0 收藏0