react native 友盟统计 IOS 端集成

简介: react native 友盟统计的Android端集成可参考 :https://www.jianshu.com/p/1c41d4b66312 希望大家少走些弯路吧。

react native 友盟统计的Android端集成可参考 :https://www.jianshu.com/p/1c41d4b66312 希望大家少走些弯路吧。

下面介绍下IOS 端的集成:

步骤

  • ios端的sdk集成
  • ios 和rn 的交互类
  • 工程的相关配置 (初始化sdk)
  • rn 端调用

1.sdk 集成部分

官网sdk下载地址:
https://developer.umeng.com/sdk/reactnative?spm=a211g2.211692.0.0.28961183UCQLCq
把人家封装的交互类也下载下来:

img_9ac5089c12931770e39bed78d8ca914c.png
image.png

ios下载下来 解压后得到这些文件


img_500e7d1ca7ab8c62ae5c27dc7279733e.png
image.png

把这些 解压后的framework 导入到工程
UMAnalytics.framework
UMCommon.framework
UMCommonLog.framework
UMCommonLog.bundle


img_4dcc1eb60204973c217aae56dcd1200b.png
image.png

img_f7bf970cfaa0c685d3b368cedcec2d57.png
image.png

以此把上面的包导入即可,完成集成部分。

2. ios 和rn 的交互类

把官网下载下来解压后的react native 交互代码 拷贝到工程


img_877646e889e413fd184879b5adda6f7e.png
image.png

这四个OC文件


img_b84161e3c99ef8f49a63c6a9e0b97715.png
image.png

3. 工程的相关配置 sdk 的初始化

在AppDelegate.m 文件中
头文件导入 以及初始化 友盟统计

#import "RNUMConfigure.h"  //友盟统计配置文件引入
#import <UMAnalytics/MobClick.h>

 /**
   * 友盟统计启动代码 初始化
   */
  [UMConfigure setLogEnabled:YES];
  [RNUMConfigure initWithAppkey:@"你的appkey" channel:@"App Store"];
 [MobClick setScenarioType:E_UM_NORMAL];  //这个和事件埋点相关,要初始化
  /***********************************************/

img_e5ce869a64eb8e6d6227c8cf7ab7f7a0.png
image.png

我们在后台设置埋点事件:


img_2b517eddd8b987120a68af7aeb63b614.png

img_8a6f9e5a2382c6dff1be253496ceea6f.png
image.png

OK 原生部分已经完成

RN调用部分

Umtj.js

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

  return UMTJ.onEvent(eventId);
};
export const onEventWithLable = (eventId, label) => { 
  //用于统计自定义事件的发生次数

  return UMTJ.onEventWithLable(eventId, label);
};


调用的时候直接导入即可。
一个简单的例子:

import {
  onEvent,
  onEventWithLable,
  onPageStart,
  onPageEnd,
} from '../utils/natives/Umtj';

//比如这里是个点击事件

click=()=>{
 onEvent('regist');
 onEventWithLable('regist', '注册登录成功');
}

如果报错的话:

如果报 onEventWithLable 这个方法的错误,为了和Android端代码同步,可以把 iOS 中的UMAnalyticsModule.m方法中的 onEventWithLabel 改成 onEventWithLable

IOS 端集成完成
Android 端可参考:https://www.jianshu.com/p/1c41d4b66312

目录
相关文章
|
6月前
|
开发框架 Dart 前端开发
【Flutter前端技术开发专栏】Flutter与React Native的对比与选择
【4月更文挑战第30天】对比 Flutter(Dart,强类型,Google支持,快速热重载,高性能渲染)与 React Native(JavaScript,庞大生态,热重载,依赖原生渲染),文章讨论了开发语言、生态系统、性能、开发体验、学习曲线、社区支持及项目选择因素。两者各有优势,选择取决于项目需求、团队技能和长期维护考虑。参考文献包括官方文档和性能比较文章。
239 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应用构建。
53 3
|
2月前
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
150 0
|
4月前
|
前端开发 JavaScript Android开发
React Native跨平台开发实战
【7月更文挑战第21天】React Native为跨平台移动应用开发提供了一种高效且强大的解决方案。通过本文的学习,你应该能够掌握React Native的基本概念和实战步骤,并开始在你的项目中使用React Native进行开发。随着你对React Native的深入理解,你将能够利用其强大的功能来构建更加复杂和高效的移动应用。
|
5月前
|
人工智能 数据安全/隐私保护 iOS开发
苹果在WWDC24上宣布的所有内容:Apple Intelligence、集成ChatGPT的Siri、iOS 18
苹果在WWDC24上宣布的所有内容:Apple Intelligence、集成ChatGPT的Siri、iOS 18
|
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的官方组件弥补了社区资源不足。选择时需考虑开发效率、性能需求、团队技术栈和社区支持。
1873 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
|
5月前
|
机器学习/深度学习 定位技术 开发工具
必知的技术知识:ios个推推送集成
必知的技术知识:ios个推推送集成
89 0

热门文章

最新文章