React Native SDK
优质
小牛编辑
136浏览
2023-12-01
诸葛io移动统计支持React Native插件,以下为集成方法。
1. 环境准备
1.1. iOS环境
iOS 8.0+
代码支持iOS8.0的系统
pod 1.0+
iOS系统的集成依赖于cocoaPod工具
1.2. Android环境
Android SDK 16+
代码支持Android 16+
1.3. React Native环境
- react-native 0.50+
- react-native-cli 2.0+
项目本身基于以上版本的React Native开发。目前不确定是否支持低版本的React Native。若集成不成功,请联系我们。
2. 集成方法
打开终端,在React Native项目目录下执行:
$ yarn add react-native-plugin-zhugeio
或
$ npm install react-native-plugin-zhugeio --save
$ react-native link
2.1. iOS集成
若React Native项目的iOS文件夹下,没有Podfile文件,需要初始化Pod:
$ pod init
以上命令将在iOS目录下创建Podfile文件。
编辑Podfile文件
platform :ios, '8.0' target 'yourApp' do pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' pod 'React', path: '../node_modules/react-native',:subspecs => ['DevSupport'] pod 'react-native-plugin-zhugeio', path: '../node_modules/react-native-plugin-zhugeio' end
执行
pod install
- 在
ios/youProjectName/AppDelegate.m
文件中,找到application didFinishLaunchingWithOptions
方法,在其中加入如下代码:
#import <ZhugeioAnalytics/Zhuge.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
[[Zhuge sharedInstance] startWithAppKey:@"Your App Key" launchOptions:launchOptions];
}
- 若是私有部署的用户,需要更改数据上传地址,请将上述代码更改为:
#import <ZhugeioAnalytics/Zhuge.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//设置上传地址,一般用户无需更改
[[Zhuge sharedInstance] setUploadURL:@"https://www.zhugeio.com" andBackupUrl:nil];
[[Zhuge sharedInstance] startWithAppKey:@"Your App Key" launchOptions:launchOptions];
}
2.2. Android集成
检查
android/setting.gradle
配置是否包含如下内容:include ':react-native-plugin-zhugeio' project(':react-native-plugin-zhugeio').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-plugin-zhugeio/android')
检查
android/app/build.gradle
dependencies是否包含如下内容:implementation project(':react-native-plugin-zhugeio')
找到
android/youApp/src/main/java.../MainApplication.java
文件,添加如下代码:import com.zhuge.analysis.stat.ZhugeSDK;// <--导入SDK import com.zhuge.reactnativezhuge.RNZhugeioPackage;//<--导入react-native接口 public class MainApplication extends Application implements ReactApplication { @Override public void onCreate(){ Super.onCreate(); ... //ZhugeSDK初始化 ZhugeSDK.getInstance().init(this,"yourAppKey","youAppChannel"); ... } // 如果不能自动连接 RNZhugeioPackage @Override protected List<ReactPackage> getPackages() { @SuppressWarnings("UnnecessaryLocalVariable") List<ReactPackage> packages = new PackageList(this).getPackages(); // Packages that cannot be autolinked yet can be added manually here, for example: // packages.add(new MyReactNativePackage()); packages.add(new RNZhugeioPackage()); return packages; } }
若是私有部署的用户,需要更改数据上传地址,请将上述
onCreate()
里的代码更改为:@Override public void onCreate(){ Super.onCreate(); ... //设置上传地址,普通用户请勿更改。必须在调用init之前设置 ZhugeSDK.getInstance().setUploadURL("https://www.zhugeio.com",null) //ZhugeSDK初始化 ZhugeSDK.getInstance().init(this,"yourAppKey","youAppChannel"); ... }
2.3. 使用说明
导入Zhugeio
import Zhugeio from 'react-native-plugin-zhugeio'
track 追踪事件
Zhugeio.track('事件名称',{'属性1':'值1','属性2':'值2'});
自定义时长事件
使用
startTrack()
开始一个事件的统计Zhugeio.startTrack('事件名称');
使用相同的事件名称结束事件统计
Zhugeio.endTrack('事件名称',{'属性1':'值1'});
startTrack()
与endTrack()
需成对出现,单独使用没有效果。识别用户
使用
identify()
识别用户Zhugeio.identify('用户ID',{'用户属性':'用户值'})
收入数据采集
使用trackRevenue函数,自动记录收入事件及事件属性
zhuge.trackRevenue({ 'price': 229, 'productID':'小米NFC手环', 'productQuantity':2, 'revenueType':'手环' });
实时调试
Zhugeio.openDebug();
日志输出
该方法仅对Android平台可用,iOS平台请参阅 iOS集成文档
Zhugeio.openLog();