ReactNative SDK
该 SDK 适用于ReactNative 跨平台项目。

集成RN模块

1、安装SDK RN模块

通过npm集成SDK RN模块
1
npm install react-native-analysys
Copied!

2、链接SDK RN模块

React Native 0.60 及以上版本会 autolinking,不需要执行下边的 react-native link 命令。
1
react-native link react-native-analysys
Copied!

3、配置 package.json

在 React Native 项目里的 package.json 文件的 script 模块里增加如下配置
1
"scripts": {
2
"postinstall": "node node_modules/react-native-analysys/ansHook.js -run"
3
}
Copied!

4、执行 npm 命令

1
npm install
Copied!

集成Android端

1、集成sdk,版本要求4.5.7及以上,参考官方文档https://docs.analysys.cn/integration/sdk/android

集成React Native支持模块:

1
// 方舟sdk
2
implementation('cn.com.analysys:analysys-arkanalysys:4.5.7')
3
// React Native支持模块
4
implementation('cn.com.analysys:analysys-react-native:4.5.7')
Copied!

2、设置接口相关Module

1
public class MainApplication extends Application implements ReactApplication {
2
3
private final ReactNativeHost mReactNativeHost =
4
new ReactNativeHost(this) {
5
...
6
@Override
7
protected List<ReactPackage> getPackages() {
8
List<ReactPackage> packages = new PackageList(this).getPackages();
9
packages.add(new RNAnalysysAgentPackage());
10
return packages;
11
}
12
...
13
};
14
15
@Override
16
public ReactNativeHost getReactNativeHost() {
17
return mReactNativeHost;
18
}
19
}
Copied!

iOS端

集成方舟SDK

React Native 0.60 及以上版本可以通过 CocoaPods 的方式引用 RNAnalysysAgentModule 插件及 易观方舟SDK;React Native 0.60 以下版本需要使用手动方式添加。

方式一:CocoaPods 集成

  1. 1.
    npm install下载后的文件:项目目录/node_modules/react-native-analysys文件拷贝至ios工程下(一般为.xcodeproj同级目录),在该目录下创建Podfile文件,并配置RN插件,如下示例:
1
platform :ios, '8.0'
2
use_frameworks!
3
4
target 'YourApp' do
5
pod 'RNAnalysysAgentModule', :path => 'react-native-analysys/'
6
end
Copied!
  1. 1.
    关闭Xcode,在工程目录下执行pod installpod install --verbose --no-repo-update,完成后打开xxx.xcworkspace工程

方式二:手动引入

  1. 1.
    下载方舟SDK并导入iOS工程中
  2. 2.
    npm install下载后的RNAnalysysAgentModule插件(路径:项目目录/node_modules/react-native-analysys_test/sdk/ios)导入工程
  3. 3.
    勾选 Copy items if needed、Create groups- Add 完成添加类库
  4. 4.
    添加依赖库:选择工程 - Targets - “项目名称” - Build Phase - Link Binary With Libraries :libz.tbd、libicucore.tbd、libsqlite3.tbd

初始化SDK

在Xcode工程文件~AppDelegate.m 中导入头文件"#import <AnalysysAgent/AnalysysAgent.h>",配置 SDK 相关内容。
1
#import <AnalysysAgent/AnalysysAgent.h>
2
3
@implementation AppDelegate
4
5
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
6
{
7
// 设置key,77a52s552c892bn442v721为样例数据,请根据实际情况替换相应内容
8
// AnalysysAgent 配置信息
9
AnalysysConfig.appKey = @"77a52s552c892bn442v721";
10
// 设置渠道
11
AnalysysConfig.channel = @"App Store";
12
// 设置追踪新用户的首次属性
13
AnalysysConfig.autoProfile = YES;
14
// 设置上传数据使用AES加密,需添加加密模块
15
// AnalysysConfig.encryptType = AnalysysEncryptAES;
16
// 使用配置初始化SDK
17
[AnalysysAgent startWithConfig:AnalysysConfig];
18
19
#if DEBUG
20
[AnalysysAgent setDebugMode:AnalysysDebugButTrack];
21
#else
22
[AnalysysAgent setDebugMode:AnalysysDebugOff];
23
#endif
24
// 设置上报地址
25
[AnalysysAgent setUploadURL:@"https://url:port""];
26
27
...
28
return YES;
29
}
30
31
@end
Copied!

React Native 中 JS 使用

在 js 中获取 RNAnalysysAgentModule 模块
1
// 易观统计模块
2
import AnalysysAgent from "react-native-analysys";
Copied!

接口调用

在相关需要进行统计的部分进行埋点。以点击购买事件为例:
1
// 事件名称为:buy(购买) 事件附加属性为:ptype(产品分类): iPhone; model(型号): iPhone X
2
var properties = {
3
'ptype': 'iPhone',
4
'model': 'Apple iPhoneX'
5
}
6
AnalysysAgent.track('buy',properties)
Copied!
最近更新 10mo ago