react native 友盟統(tǒng)計的Android端集成可參考 ：http://www.itdecent.cn/p/1c41d4b66312 希望大家少走些彎路吧。
下面介紹下IOS 端的集成：
步驟
- ios端的sdk集成
- ios 和rn 的交互類
- 工程的相關(guān)配置 （初始化sdk）
- rn 端調(diào)用
1.sdk 集成部分
官網(wǎng)sdk下載地址：
https://developer.umeng.com/sdk/reactnative?spm=a211g2.211692.0.0.28961183UCQLCq
把人家封裝的交互類也下載下來：
image.png
ios下載下來 解壓后得到這些文件
image.png
把這些 解壓后的framework 導(dǎo)入到工程
UMAnalytics.framework
UMCommon.framework
UMCommonLog.framework
UMCommonLog.bundle
image.png
image.png
以此把上面的包導(dǎo)入即可，完成集成部分。
2. ios 和rn 的交互類
把官網(wǎng)下載下來解壓后的react native 交互代碼 拷貝到工程
image.png
這四個OC文件
image.png
3. 工程的相關(guān)配置 sdk 的初始化
在AppDelegate.m 文件中
頭文件導(dǎo)入 以及初始化 友盟統(tǒng)計
#import "RNUMConfigure.h" //友盟統(tǒng)計配置文件引入
#import <UMAnalytics/MobClick.h>
/**
* 友盟統(tǒng)計啟動代碼 初始化
*/
[UMConfigure setLogEnabled:YES];
[RNUMConfigure initWithAppkey:@"你的appkey" channel:@"App Store"];
[MobClick setScenarioType:E_UM_NORMAL]; //這個和事件埋點相關(guān)，要初始化
/***********************************************/
image.png
我們在后臺設(shè)置埋點事件:
image.png
OK 原生部分已經(jīng)完成
RN調(diào)用部分
Umtj.js
import { NativeModules } from 'react-native';
const UMTJ = NativeModules.UMAnalyticsModule;
export const onPageStart = pageName => {
//用于統(tǒng)計單個自定義頁面的起始和onPageEnd同時使用，不可單獨使用
return UMTJ.onPageStart(pageName);
};
export const onPageEnd = pageName => {
//用于統(tǒng)計單個Activity頁面結(jié)束時間
return UMTJ.onPageEnd(pageName);
};
export const onEvent = eventId => {
//用于統(tǒng)計自定義事件的發(fā)生次數(shù)
return UMTJ.onEvent(eventId);
};
export const onEventWithLable = (eventId, label) => {
//用于統(tǒng)計自定義事件的發(fā)生次數(shù)
return UMTJ.onEventWithLable(eventId, label);
};
調(diào)用的時候直接導(dǎo)入即可。
一個簡單的例子：
import {
onEvent,
onEventWithLable,
onPageStart,
onPageEnd,
} from '../utils/natives/Umtj';
//比如這里是個點擊事件
click=()=>{
onEvent('regist');
onEventWithLable('regist', '注冊登錄成功');
}
如果報錯的話：
如果報 onEventWithLable 這個方法的錯誤，為了和Android端代碼同步，可以把 iOS 中的UMAnalyticsModule.m方法中的 onEventWithLabel 改成 onEventWithLable
IOS 端集成完成
Android 端可參考：http://www.itdecent.cn/p/1c41d4b66312
