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.gradledependencies是否包含如下内容:

      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();