React Native 轻松集成统计功能(Android 篇)
2017-08-04 11:29
281 查看
关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能。
执行完上述命令后,使用 Android Studio 打开你的项目。
your project/settings.gradle
到此为止配置已经完成了,现在 sync 一下项目即可看到 janalytics 和 jcore 两个库出现在自己的项目下。
上面的两个参数是 bool 类型的,第一个参数设置为 true 表示关闭 toast 提示,第二个设置为 true 表示关闭日志打印。建议在 debug 版本中打开。
同样在 MainApplication,调用 init 方法:
your component.js
使用示例:
作者:KenChoi
链接:http://www.jianshu.com/p/ddae248498aa
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
第一步 安装
在你的项目路径下执行命令: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.gradleandroid { ... 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
链接:http://www.jianshu.com/p/ddae248498aa
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- React Native 轻松集成统计功能(Android 篇)
- React Native 轻松集成统计功能(Android 篇)
- React Native 轻松集成分享功能(Android 篇)
- React Native 轻松集成统计功能(Android 篇)
- React Native 轻松集成统计功能(iOS 篇)
- React Native 轻松集成统计功能(iOS 篇)
- 教你轻松在React Native中集成统计的功能
- React Native 轻松集成分享功能(iOS 篇)
- 教你轻松在React Native中集成统计的功能
- React Native 轻松集成分享功能(iOS 篇)
- React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)
- React Native 轻松集成分享功能(Android 篇)
- React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)
- React Native 轻松集成分享功能(Android 篇)
- React Native 轻松集成分享功能(Android 篇)
- React Native 集成分享第三方登录功能分享第三方登录模块开发(Android)
- React Native 轻松集成分享功能(iOS 篇)
- React Native 轻松集成统计功能(iOS 篇)
- [置顶] Unity中集成ShareSDK(3.X)的功能-Android平台
- 如何在Android App中集成支付宝和微信支付功能