react native 百度统计 ios端集成

简介: react native 百度统计Android端的集成可参考:https://www.jianshu.com/p/cc354c6a81d5 希望能够让同学们少走些弯路。

react native 百度统计Android端的集成可参考:
https://www.jianshu.com/p/cc354c6a81d5 希望能够让同学们少走些弯路。

百度统计的集成还是蛮简单的,主要分下面一些步骤:

步骤

  • sdk的集成
  • 交互类
  • sdk的配置以及初始化
  • RN 端调用

1. sdk 的集成

官网下载地址:
https://mtj.baidu.com/web/sdk/index
我这里选择的是手动埋点的方式。
官网的 技术文档介绍:
https://mtj.baidu.com/static/userguide/book/ios/sdk/manual.html

官网介绍的已经很清楚,比友盟的集成清晰很多,大家按照文档操作就可以,很顺利就能完成集成。

2.交互类

git上有个开源的交互类 大家可进行参考修改
https://github.com/BaiduMobileAnalysis/baidumobstat-react-native/blob/master/ios/RCTBaiduMobStat/RCTBaiduMobStat/RCTBaiduMobStat.m

//
//  RCTBaiduMobStat.m
//  rent
//
//  Created by 姜森林 on 2018/8/24.
//  Copyright © 2018年 Facebook. All rights reserved.
//

#import "RCTBaiduMobStat.h"
#import <React/RCTLog.h>

@implementation RCTBaiduMobStat

RCT_EXPORT_MODULE(BaiduMTJ);

RCT_EXPORT_METHOD(onEvent:(NSString *)eventId eventLabel:(NSString *)eventLabel) {
  [[BaiduMobStat defaultStat] logEvent:eventId eventLabel: eventLabel];
}

RCT_EXPORT_METHOD(onEventDuration:(NSString *)eventId eventLabel:(NSString *)eventLabel durationTime:(nonnull NSNumber *)duration) {
  [[BaiduMobStat defaultStat] logEventWithDurationTime:eventId eventLabel: eventLabel durationTime:[duration unsignedLongValue]];
}


RCT_EXPORT_METHOD(onEventStart:(NSString *)eventId eventLabel:(NSString *)eventLabel) {
  [[BaiduMobStat defaultStat] eventStart:eventId eventLabel: eventLabel];
}


RCT_EXPORT_METHOD(onEventEnd:(NSString *)eventId eventLabel:(NSString *)eventLabel) {
  [[BaiduMobStat defaultStat] eventEnd:eventId eventLabel: eventLabel];
}


RCT_EXPORT_METHOD(onEventWithAttributes:(NSString *)eventId eventLabel:(NSString *)eventLabel attributes:(NSDictionary *)attributes) {
  [[BaiduMobStat defaultStat] logEvent:eventId eventLabel: eventLabel attributes:attributes];
}


RCT_EXPORT_METHOD(onEventDurationWithAttributes:(NSString *)eventId eventLabel:(NSString *)eventLabel durationTime:(nonnull NSNumber *)duration attributes:(NSDictionary *)attributes) {
  [[BaiduMobStat defaultStat] logEventWithDurationTime:eventId eventLabel: eventLabel durationTime:[duration unsignedLongValue] attributes:attributes];
}


RCT_EXPORT_METHOD(onEventEndWithAttributes:(NSString *)eventId eventLabel:(NSString *)eventLabel attributes:(NSDictionary *)attributes) {
  [[BaiduMobStat defaultStat] logEvent:eventId eventLabel: eventLabel attributes:attributes];
}


RCT_EXPORT_METHOD(onPageStart:(NSString *)name) {
  [[BaiduMobStat defaultStat] pageviewStartWithName:name];
}


RCT_EXPORT_METHOD(onPageEnd:(NSString *)name) {
  [[BaiduMobStat defaultStat] pageviewEndWithName:name];
}
@end

3.初始化工作

#import "BaiduMobStat.h"  


  /**
   * 百度移动统计启动代码
   */
  [[BaiduMobStat defaultStat] startWithAppId:@"xxx"];
  [[BaiduMobStat defaultStat] setEnableDebugOn: YES];
  /***********************************************/

4.RN 端调用

import { NativeModules } from 'react-native';
const BaiduMTJ = NativeModules.BaiduMTJ;
export const onPageStart = pageName => {
  //用于统计单个自定义页面的起始和onPageEnd同时使用,不可单独使用
  return BaiduMTJ.onPageStart(pageName);
};
export const onPageEnd = pageName => {
  //用于统计单个Activity页面结束时间
  return BaiduMTJ.onPageEnd(pageName);
};
export const onEvent = (eventId, label) => {
  //用于统计自定义事件的发生次数
  // console.log(BaiduMTJ.onEvent(eventId, label));
  return BaiduMTJ.onEvent(eventId, label);
};


像这些统计百度啊 友盟啊 集成方式都差不多,遇到什么问题大家仔细看下错误提示 就能解决。
Android 可参考 :
https://www.jianshu.com/p/cc354c6a81d5

目录
相关文章
|
6月前
|
前端开发 数据可视化 JavaScript
基于React的简易数据可视化图表库集成与应用
基于React的简易数据可视化图表库集成与应用
103 1
|
6月前
|
前端开发 定位技术 API
react+typescript接入百度地图
react+typescript接入百度地图
147 0
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
238 0
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
51 3
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
3月前
|
数据可视化 小程序 API
百度统计--给博客园添加访问统计
百度统计--给博客园添加访问统计
16 0
|
5月前
|
前端开发 自动驾驶 程序员
鸿蒙? 车载?Flutter? React Native? 为什么我劝你三思,说点不一样的
本文探讨了在信息技术快速发展的背景下,开发者如何选择学习路径。作者提倡使用终局思维来规划职业发展,考虑技术的长远影响。终局思维注重长远目标、系统分析、反向规划和动态调整。以车载开发为例,预测未来智能汽车可能由语音助手主导,而非依赖平板界面。此外,作者建议不要过分投入打工状态,应思考创建自己的产品,如App,以实现技能补充和额外收入。选择对未来发展和自主性有益的技术,如Kotlin,比盲目追求热点更为重要。做减法和有标准的选择,能帮助减轻焦虑,实现更高效的成长。关注公众号“AntDream”获取更多相关内容。
130 1
|
6月前
|
开发框架 移动开发 前端开发
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
【5月更文挑战第14天】Uniapp和React Native是热门的跨平台移动开发框架。Uniapp以其一套代码多端运行、丰富的组件生态和较低的学习曲线受到青睐,适合快速开发简单应用。React Native基于React,拥有活跃社区和优秀性能,适合复杂应用。React Native在性能上略胜一筹,尤其在需要接近原生体验的场景。Uniapp的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1870 1
【Uniapp 专栏】Uniapp 与 React Native 的对比分析
|
5月前
|
开发框架 前端开发 JavaScript
移动应用开发中的跨平台策略:Flutter与React Native的比较
在移动应用领域,跨平台解决方案已成为开发者追求高效、成本效益和广泛覆盖的关键。本文深入探讨了两种领先的跨平台框架——Flutter和React Native,从技术架构、性能、社区生态及实际应用案例四个维度进行全面对比分析。通过这一比较,旨在为移动应用开发者提供选择合适框架的参考依据,帮助他们根据项目需求做出明智的决策。
|
5月前
|
前端开发 iOS开发 Android开发
React Native跨平台开发实战:从零到一
学习React Native跨平台开发,首先安装Node.js和React Native CLI,设置Android/iOS环境。使用CLI创建项目,如`npx react-native init MyProject`。运行应用:`npx react-native run-android`或`run-ios`。编写组件,如在App.js中创建Hello World。添加样式,安装第三方库如react-native-vector-icons,使用react-navigation进行路由和导航。
110 2