易观方舟react-native-analysys模块,基于智能分析平台的SDK进行封装 Android & iOS SDK 常用 API ,使用此模块,可以在 React Native 开发的 App 中完成埋点的统计上报。
SDK Releases包下载: Github地址(推荐):https://github.com/analysys/ans-ReactNative-sdk Gitee地址:https://gitee.com/Analysys/ans-ReactNative-sdk Releases中含有更新说明请您阅读,接口使用请参考本文档。
npm install react-native-analysys
react-native link react-native-analysys
注意:React Native 0.60 及以上版本会 autolinking,不需要执行下边的 react-native link 命令。
dependencies{//默认使用最新版本SDK,如需要使用特别版本请指定版本号implementation('cn.com.analysys:analysys-arkanalysys:latest.release')')}
public class AnalysysApplication extends Application {@Overridepublic void onCreate() {super.onCreate();// 设置 打开 debug 模式,上线时请屏蔽AnalysysAgent.setDebugMode(this, 2);// 对SDK开始初始化AnalysysConfig config = new AnalysysConfig();// 设置key,77a52s552c892bn442v721为样例数据,请根据实际情况替换相应内容config.setAppKey("77a52s552c892bn442v721");// 设置渠道config.setChannel("豌豆荚");// 设置控件点击自动上报总开关config.setAutoTrackClick(true);// 调用SDK初始接口AnalysysAgent.init(this, config);// 设置上传地址,http://example.com:port为您上报地址AnalysysAgent.setUploadURL(mContext,"http://example.com:port");}}
public class AnalysysApplication extends Application implements ReactApplication {...@Overrideprotected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new RNAnalysysAgentPackage());}...}
React Native 0.60 及以上版本可以通过 CocoaPods 的方式引用 RNAnalysysAgentModule 插件及 易观方舟SDK;React Native 0.60 以下版本需要使用手动方式添加。
将npm install
下载后的文件:项目目录/node_modules/react-native-analysys文件拷贝至ios工程下(一般为.xcodeproj同级目录),在该目录下创建Podfile文件,并配置RN插件,如下示例:
platform :ios, '8.0'use_frameworks!target 'YourApp' dopod 'RNAnalysysAgentModule', :path => 'react-native-analysys/'end
关闭Xcode,在工程目录下执行pod install
或pod install --verbose --no-repo-update
,完成后打开xxx.xcworkspace工程
下载方舟SDK并导入iOS工程中
将npm install
下载后的RNAnalysysAgentModule
插件(路径:项目目录/node_modules/react-native-analysys_test/sdk/ios)导入工程
勾选 Copy items if needed、Create groups- Add 完成添加类库
添加依赖库:选择工程 - Targets - “项目名称” - Build Phase - Link Binary With Libraries :libz.tbd、libicucore.tbd、libsqlite3.tbd
在Xcode工程文件~AppDelegate.m
中导入头文件"#import <AnalysysAgent/AnalysysAgent.h>"
,配置 SDK 相关内容。
#import <AnalysysAgent/AnalysysAgent.h>@implementation AppDelegate- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{// 设置key,77a52s552c892bn442v721为样例数据,请根据实际情况替换相应内容// AnalysysAgent 配置信息AnalysysConfig.appKey = @"77a52s552c892bn442v721";// 设置渠道AnalysysConfig.channel = @"App Store";// 设置追踪新用户的首次属性AnalysysConfig.autoProfile = YES;// 设置上传数据使用AES加密,需添加加密模块// AnalysysConfig.encryptType = AnalysysEncryptAES;// 使用配置初始化SDK[AnalysysAgent startWithConfig:AnalysysConfig];#if DEBUG[AnalysysAgent setDebugMode:AnalysysDebugButTrack];#else[AnalysysAgent setDebugMode:AnalysysDebugOff];#endif// 设置上报地址[AnalysysAgent setUploadURL:@"https://url:port""];...return YES;}@end
在 js 中获取 RNAnalysysAgentModule
模块
// 易观统计模块import { NativeModules } from "react-native";const RNAnalysysAgentModule = NativeModules.RNAnalysysAgentModule;
在相关需要进行统计的部分进行埋点。以点击购买事件为例:
// 事件名称为:buy(购买) 事件附加属性为:ptype(产品分类): iPhone; model(型号): iPhone Xvar properties = {'ptype': 'iPhone','model': 'Apple iPhoneX'}RNAnalysysAgentModule.track('buy',properties)