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

目录
相关文章
|
2月前
|
前端开发 数据可视化 JavaScript
基于React的简易数据可视化图表库集成与应用
基于React的简易数据可视化图表库集成与应用
25 1
|
2月前
|
前端开发 定位技术 API
react+typescript接入百度地图
react+typescript接入百度地图
49 0
|
3月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
3月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
4月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
4月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
52 0
|
11天前
|
开发框架 前端开发 JavaScript
【专栏】Flutter vs React Native:跨平台移动应用开发的比较
【4月更文挑战第27天】本文对比分析了Flutter和React Native两大跨平台移动开发框架。Flutter,由Google推出,以其接近原生的性能、快速启动和流畅滚动受青睐,适合高性能和高度定制的项目。React Native,Facebook维护,依赖JavaScript,虽性能受限,但热重载优势和丰富第三方库使其适合快速迭代的项目。两者都在拓展多平台应用,Flutter在桌面和Web,React Native在Windows。选择框架需考虑项目需求、团队技能和性能效率平衡。
|
3月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
3月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
4月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。