教你轻松在React Native中集成统计的功能
有时我们需要知道一款产品上线后的受欢迎程度,推广效果、有多少人安装、使用率,平均在线时长、活跃用户、启动次数、版本分布等数据,这个时候我们不得不用到统计分析。如果条件允许我们可以自己实现统计分析的功能,但如果要做的很专业很详细那么则需要一个庞大的工作量。在这里我们也可以采用第三方统计umneng。
在这篇文章中我会向大家分享,在React Native中集成umeng统计的方法及流程。因为umeng官网有非常详细的集成文档集成文档,在这里我会介绍在React Native的Android和iOS中如何集成统计功能,但不会长篇大论。
如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看
第一步:集成准备
首先我们需要到umeng官网申请一个开发者账号。然后创建一个应用并获取appkey。
集成SDK
获取到appkey之后呢,我们接下来就来集成集成SDK。
Android
友盟支持AndroidStudio的Gradle配置,所以我们用AndroidStudio打开React Native项目根目录下的android目录如图:
然后在/android/app/build.gradle
中添加:
dependencies {
compile 'com.umeng.analytics:analytics:latest.integration'
}
如果无法正常集成请添加如下代码 :
allprojects {
repositories {
mavenCentral()
}
}
然后重新build应用,Gradle就会将上述配置的sdk自动下载到本地。
如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看
iOS
友盟支持通过Cocoapods来添加统计sdk的依赖,如果你的Mac还没有安装Cocoapods,则可以通过CocoaPods安装和使用教程来安装。 Cocoapods 安装完成后,在你的项目根目录创建一个 podfile
文件,添加如下内容:
pod 'UMengAnalytics'//标准SDK,含IDFA
pod 'UMengAnalytics-NO-IDFA'//无IDFA版SDK(请根据需要选择其中一个)
如:
platform :ios, '7.0'
target 'GitHubPopular' do
pod 'UMengAnalytics'
end
然后在terminal下运行命令如下:
pod install
心得:如果过程缓慢可以在
install
命令后添加--verbose --no-repo-update
参数。
命令执行完成后即可完成统计SDK的下载安装。
然后,我们打开项目项目根目录下的ios文件夹,会看到一个xxx.xcworkspace的文件:
用XCode打开该文件就会看到我们刚才集成的SDK了:
如果我们一个项目中有多个PROJECT,那么则需要用xcworkspace是来管理我们的项目,我们通过pod安装了统计sdk后,项目中会多出来一个名为Pods的PROJECT,所以后我们需要通过xcworkspace来打开我们的ios项目了。
第二步:集成配置
sdk下载完成之后呢,接下来我们就可以进行一些集成配置。
Android
配置AndroidManifest.xml
manifest的配置主要包括添加权限,以下权限缺一不可,填写Appkey和填写渠道id三部分,代码示例如下:
<manifest……>
<uses-sdk android:minSdkVersion="8"></uses-sdk>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<application ……>
……
<activity ……/>
<meta-data android:value="YOUR_APP_KEY" android:name="UMENG_APPKEY"/>
<meta-data android:value="Channel ID" android:name="UMENG_CHANNEL"/>
</application>
</manifest>
上述代码中的YOUR_APP_KEY为
appkey
需要替换为您在友盟后台申请的应用Appkey,Channel ID为推广渠道名称,这个可以根据需要进行自定义,如:GooglePlay
最基本使用
上述配置完成之后,我们就可以使用统计sdk了。我们只需在MainActivity.java中添加如下代码即可完成session的统计
。
public void onResume() {
super.onResume();
MobclickAgent.onResume(this);
}
public void onPause() {
super.onPause();
MobclickAgent.onPause(this);
}
如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看
iOS
配置AppDelegate.m
在AppDelegate.m中导入头文件#import "UMMobClick/MobClick.h"
AppDelegate.m 的配置主要包括填写Appkey,设置发送策略和填写渠道id三部分,代码示例如下:
#import "UMMobClick/MobClick.h"
...
- (BOOL])application:(UIApplication] *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
UMConfigInstance.appKey = @"xxxxxxxxxxxxxx...";
UMConfigInstance.ChannelId = @"App Store";
UMConfigInstance.eSType = E_UM_GAME; //仅适用于游戏场景,应用统计不用设置
…
[MobClick startWithConfigure:UMConfigInstance];//配置以上参数后调用此方法初始化SDK!
}
appKey为开发者在友盟后台申请的应用Appkey,ChannelId的值为应用的渠道标识。默认为 @”App Store”。
到这里集成配置已经完成了。
如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看
第三步:高级功能
在上文中我们已经完成了统计sdk的集成、配置以及最基本的使用(如果大家想通过视频学习如何在React Native中集成统计功能,可以点这里查看),到现在为止统计sdk已经能为我们完成大部分的统计功能了,比如:新增用户、活跃用户、启动次数、版本分布、渠道分析、留存分析、错误分析、用户属性等。
如果我们要进行更高级的功能,比如:计数统计与计算统计等,因为React Native应用的大部分业务逻辑的代码都是在js部分完成的,所以我们需要将计数统计与计算统计
的相关功能封装成React Native原生模块,然后暴露给js模块,供js模块进调用,关于如何封装React Native原生模块,我在视频教程中有很详细的讲解。
以上便是在React Native中集成umeng统计的方法及流程,这样以来我们就可以在umeng后台管理中查看这些统计数据了:
告诉大家一个好消息,为大家精心准备的React Native视频教程发布了,大家现可以看视频学React Native了。
如果大家在React Native中集成umeng统计的过程中有更好的心得或遇到问题可以在本文的下方进行留言,我看到了后会及时回复的哦。 另外也可以关注我的新浪微博
,或者关注我的Github
来获取更多有关React Native开发的技术干货
。
推荐学习:视频教程《React Native开发跨平台GitHub App》
- 基于加密货币和区块链,AR游戏也有新玩法
- 一次数据库的整理的sql语句
- 谷歌想让人工智能具有人的意识?
- 数据库范式
- [原创]CI持续集成系统环境---部署Jenkins完整记录
- setInterval与clearInterval使用示例
- jenkins配置记录(1)--添加用户权限
- jenkins忘记管理员登陆密码的补救措施
- openstack虚拟机迁移的操作记录
- 从MapX到MapXtreme2004[11]-坐标概论
- 动态控件的新思路
- 独家分享 腾讯大神教你如何学习一门新的编程语言-以Python 为例
- 连续打印问题的解决
- 分布式监控系统Zabbix--完整安装记录-批量添加主机和自动发现端口
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 基于SSH框架的人力资源管理系统设计与实现
- Flutter/Dart中的异步
- UTM坐标的遥感图,Python终于把它扶正啦(手动狗头)
- Flutter框架分析(一)-- 总览和Window
- R海拾遗-sci配色
- Flutter框架分析(二)-- 初始化
- Flutter框架分析(三)-- Widget,Element和RenderObject
- 傅里叶变换的图像应用--学好了用处大~
- Flutter框架分析(四)-- Flutter框架的运行
- R海拾遗-流程图prismadiagramR
- R海拾遗-单项重复测量方差分析
- R海拾遗-双因素重复测量方差分析
- 小白秒变大神--windows窗口+装B神器大全 两部曲
- R海拾遗-三因素重复
- 推荐一种简单的在Flutter中分离View与Model的方法