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

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