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

目录
相关文章
|
运维 监控 安全
Cisco ISR 4000 Series IOS XE 17.18.1a ED 发布 - 思科 4000 系列集成服务路由器 IOS XE 系统软件
Cisco ISR 4000 Series IOS XE 17.18.1a ED - 思科 4000 系列集成服务路由器 IOS XE 系统软件
38 0
|
5月前
|
JSON 前端开发 算法
掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
掌握Multi-Agent实践(三):ReAct Agent集成Bing和Google搜索功能,采用推理与执行交替策略,增强处理复杂任务能力
324 23
|
11月前
|
数据采集 前端开发 开发工具
Demo发布- ClkLog客户端集成-React Native
ClkLog是一款支持开源和商业付费的用户行为分析软件系统,通过采集客户端行为日志数据,在开源的OLAP数据库上进行模型分析。常见的客户端有Web JS、IOS、Andriod 、小程序等,以及react-native 、uni-app等。Clklog方案选用了\神策提供的开源SDK来进行数据采集。
201 48
|
11月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表,涵盖基础概念、安装步骤、代码示例及常见问题解决方法,帮助开发者轻松实现数据可视化。
314 11
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
392 3
|
Dart 前端开发 JavaScript
探索移动应用开发中的跨平台解决方案:Flutter与React Native的比较
在移动应用开发领域,选择合适的跨平台解决方案是关键。本文将深入分析Flutter和React Native这两大主流框架,从性能、开发效率、社区支持等方面进行比较,帮助开发者做出明智的选择。
277 27
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
495 0
|
人工智能 数据安全/隐私保护 iOS开发
苹果在WWDC24上宣布的所有内容:Apple Intelligence、集成ChatGPT的Siri、iOS 18
苹果在WWDC24上宣布的所有内容:Apple Intelligence、集成ChatGPT的Siri、iOS 18
|
iOS开发 Perl
IOS集成flutter_boost 3.0常见问题
IOS集成flutter_boost 3.0常见问题
230 0

热门文章

最新文章