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

目录
相关文章
|
22天前
|
前端开发 数据可视化 JavaScript
基于React的简易数据可视化图表库集成与应用
基于React的简易数据可视化图表库集成与应用
19 1
|
3月前
|
机器学习/深度学习 PyTorch TensorFlow
iOS设备功能和框架: 什么是 Core ML?如何在应用中集成机器学习模型?
iOS设备功能和框架: 什么是 Core ML?如何在应用中集成机器学习模型?
27 0
|
3月前
|
前端开发 安全 Linux
React Native 打包 App 发布 iOS 及加固混淆过程
本文将介绍如何使用 React Native 打包并发布 iOS 应用到 App Store,并介绍了如何进行应用的加固和混淆过程。
|
6月前
|
前端开发 iOS开发 开发者
React native ios上架
React native ios上架
|
7月前
|
小程序 JavaScript API
支付宝小程序集成mqtt兼容IOS和安卓
支付宝小程序集成mqtt兼容IOS和安卓
135 0
|
7月前
|
Web App开发 编解码 移动开发
React 框架下如何集成 H.265 流媒体视频播放器 EasyPlayer.js?
H5 无插件流媒体播放器 EasyPlayer 属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持 H.264 与 H.265 编码格式,性能稳定、播放流畅,能支持 WebSocket-FLV、HTTP-FLV,HLS(m3u8)、WebRTC 等格式的视频流。在功能上,EasyPlayer 支持直播、点播、录像、快照截图、MP4 播放、多屏播放、倍数播放、全屏播放等特性,并且已实现网页端实时录像、在 iOS 上实现低延时直播等功能,具备较高的可用性和稳定性
104 0
|
7月前
|
iOS开发 开发者 Perl
使用mPaaS iOS通过Pod集成"mPaaS_TinyApp"时遇到了错误
使用mPaaS iOS通过Pod集成"mPaaS_TinyApp"时遇到了错误
86 2
|
8月前
|
API 开发工具 iOS开发
一点就通,社交源码IOS客户端开发集成SDK
所谓SDK,全称是SoftwaredevelopmentKit,翻译成软件开发工具包。SDK用助开发某种软件,今天给大家简单讲解下如何在社交源码IOS客户端上开发集成 SDK。
|
8月前
|
API 开发工具 iOS开发
一点就通,社交源码IOS客户端开发集成SDK
所谓SDK,全称是SoftwaredevelopmentKit,翻译成软件开发工具包。SDK用助开发某种软件,今天给大家简单讲解下如何在社交源码IOS客户端上开发集成 SDK。
|
8月前
|
存储 JSON 前端开发
React+node 图片剪裁上传,集成本地存储和阿里云OSS
最近一直在调研图片上传阿里云oss功能,上篇文章主要讲述了阿里云oss大文件分片、断点续传。这篇文章是在原有基础上,前端加了图片剪裁、后端加了本地存储功能。
201 0
React+node 图片剪裁上传,集成本地存储和阿里云OSS