菜单

集成文档（React Native）

集成神策分析 SDK RN 模块

对于 React Native 开发的应用，可以使用 npm 或 yarn 方式集成神策分析 SDK RN 模块。

安装神策分析 SDK RN 模块

npm

npm install sensorsdata-analytics-react-native

yarn

yarn add sensorsdata-analytics-react-native

链接神策分析 SDK RN 模块

注意：React Native 0.60 及以上版本会 autolinking，不需要执行下边的 react-native link 命令。

react-native link sensorsdata-analytics-react-native

执行命令

在项目路径下执行 node 命令

node node_modules/sensorsdata-analytics-react-native/SensorsDataRNHook.js -run

注：如果需要恢复原始代码，可执行 reset 命令

node node_modules/sensorsdata-analytics-react-native/SensorsDataRNHook.js -reset

iOS 端

集成神策分析 iOS SDK

使用 CocoaPods  集成

在项目目录下执行：

 cd ios && pod install && cd ..

仅支持 React native 0.60.0 及以上版本

使用源码集成

  1. 从 GitHub 上获取 iOS SDK 的源码，并将解压后的源码放入 React Native 项目的 ios 文件夹中；
  2. 打开 React Native 项目的 iOS 工程，将 SensorsAnalyticsSDK.xcodeproj 添加到 iOS 工程里 Libraries  文件夹里；
  3. 将 SensorsAnalyticsSDK.framwwork 添加到 "General" → "Framwworks,Libraries,Embedded Content" 中;
  4. 项目设置 "Build Phase" → "Link Binary With Libraries" 中添加依赖库：libicucore、libsqlite3 和 libz；
  5. 添加不同模块的代码：
    1. Core 文件夹是 SDK 的核心文件，默认添加的；
    2. Location 文件夹是采集定位信息的，如果不需要采集定位信息，可以从项目中移除这个文件夹；
    3. 对于打通 H5，SDK 默认支持的是 WKWebView 的新版打通方案。如果想使用老版打通方案，可以引入 WKWebView 文件夹；如果使用的是 UIWebView，可以引入 WebView 文件夹；

初始化神策分析 SDK

获取项目数据接收地址

  • 每个项目都有单独的数据接收地址
  • 请使用管理员账号获取响应项目的数据接收地址

初始化 SDK

在 AppDelegate 的 -application:didFinishLaunchingWithOptions: 中添加初始化代码：

//引入神策分析 SDK
#import <SensorsAnalyticsSDK/SensorsAnalyticsSDK.h>

// 初始化配置
  SAConfigOptions *options = [[SAConfigOptions alloc] initWithServerURL:<#数据接收地址#> launchOptions:launchOptions];

  // 开启全埋点，可根据需求进行组合
  options.autoTrackEventType = SensorsAnalyticsEventTypeAppStart |
                 SensorsAnalyticsEventTypeAppEnd |
                 SensorsAnalyticsEventTypeAppClick |
                 SensorsAnalyticsEventTypeAppViewScreen;
#ifdef DEBUG
  // SDK 开启 Log
  options.enableLog = YES;
#endif

  /**
   * 其他配置
   */
  // 初始化 SDK
  [SensorsAnalyticsSDK startWithConfigOptions:options];

配置 Scheme

获取项目 Scheme

  • 项目的 Scheme 需要管理员账户进行获取
  • App 工程可以同时配置多个项目的 Scheme

同获取数据接收地址的地方一致，如下图：

App 中添加 Scheme

在 React Native 项目的 ios 工程中选择 Target → Info → URL Types，点击加号(+)，将上一步获取的 Scheme 配置到 URL Types 中：

处理传入的 URL

在 AppDalegate 的 -application:openURL:options: 方法中调用 -handleSchemeUrl: 对神策分析 Scheme 进行处理

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options{
  if ([[SensorsAnalyticsSDK sharedInstance] canHandleURL:url]) {
    return [[SensorsAnalyticsSDK sharedInstance] handleSchemeUrl:url];
  }
  return NO;
}

Android 端

集成和初始化神策分析 Android SDK

请参考 集成文档（Android） 。

配置混淆

集成神策分析 SDK RN 模块后，如果项目中有使用到混淆，需要在混淆文件中添加如下配置：

-dontwarn com.sensorsdata.analytics.**
-keep class com.sensorsdata.analytics.** {
*;
}

使用 Android Studio 打包集成方式

如果需要把 React Native 组件集成到 Android 应用中，需要在加载 ReactRootView 的 Activity 中添加 RNSensorsAnalyticsPackage 并实现相关回调。

代码示例：

import com.sensorsdata.analytics.RNSensorsAnalyticsPackage;
...
 
public class RNPageActivity extends AppCompatActivity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    public static ReactInstanceManager mReactInstanceManager;
    private final static String TAG = "RNPageActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
 
        mReactRootView = new ReactRootView(this);
        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setCurrentActivity(this)
                .setBundleAssetName("index.android.bundle")
                .setJSMainModulePath("index")
                .addPackage(new MainReactPackage())
                .addPackage(new RNSensorsAnalyticsPackage()) // 添加 RNSensorsAnalyticsPackage
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
        // 这个"App1"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
        mReactRootView.startReactApplication(mReactInstanceManager, "App1", null);
 
        setContentView(mReactRootView);
    }
 
    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
 
    @Override
    protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this, this);
            Log.d(TAG, "onResume");
        }
    }
 
    @Override
    protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
            Log.d(TAG, "onPause");
        }
    }
 
 
    @Override
    public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
            Log.d(TAG, "onBackPressed");
        } else {
            super.onBackPressed();
        }
    }
 
    @Override
    protected void onDestroy() {
        super.onDestroy();
 
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
            Log.d(TAG, "onDestroy");
        }
        if (mReactRootView != null) {
            mReactRootView.unmountReactApplication();
        }
    }
 
    public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (BuildConfig.DEBUG) {
            if (keyCode == KeyEvent.KEYCODE_MENU) {//Ctrl + M 打开RN开发者菜单
                mReactInstanceManager.showDevOptionsDialog();
                return true;
            }
        }
        return super.onKeyUp(keyCode, event);
    }
}

需要在 onResume()、onPause()、onDestroy()  回调方法中实现 mReactInstanceManager.onHostResume(this, this)、mReactInstanceManager.onHostPause(this)、mReactInstanceManager.onHostDestroy(this) 方法，否则可能出现点击事件全埋点无法触发情况。

HarmonyOS 端

集成神策分析 HarmonyOS SDK

参考文档 集成神策分析 HarmonyOS SDK：集成文档（HarmonyOS）

  • 目前仅支持 React native 0.72.5 版本，参考：React Native for OpenHarmony (RNOH) 
  • 神策分析 React Native 插件 v3.0.0 及以上，支持 HarmonyOS 埋点
  • 神策分析 HarmonyOS SDK，需要 v0.5.0 及以上

集成神策分析 React Native 插件的 HarmonyOS 实现

引入插件

将组件 react-native-sensors-analytics 中 harmony 目录下 cpp 和 ets 下的 sensorsdata 文件夹

分别拖拽到 RN 生成的鸿蒙项目中 scr 目录下 cpp 和 ets 目录中



 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

配置修改

1. 在 CMakeLists.txt 中添加新增的胶水代码文件 

在 entry/src/main/cpp/CMakeLists.txt 中定义 cpp 的 sensorsdata 路径，并添加到编译构建中：

2. 在 entry/src/main/cpp/PackageProvider.cpp 中创建 cpp 侧的 package 对象

3. 需要在 entry/src/main/ets/RNPackagesFactory.ets 中添加创建 RNSensorsAnalyticsPackage 的方法： 

 

初始化神策分析 SDK

获取项目数据接收地址

  • 每个项目都有单独的数据接收地址
  • 请使用管理员账号获取响应项目的数据接收地址

初始化 SDK

在项目 Ability 入口文件 onCreate 方法中参考如下代码初始化 SDK：

import sensors from '@sensorsdata/analytics';
sensors.init({
   // 服务器接收地址
   server_url: '你的数据接收地址',
   // Ability 上下文
   context: this.context,
   // 是否显示日志
   show_log: true,
   // 开启 App 打通 H5
   app_js_bridge: true    
});
 

SDK 只会在调用了 init 后才会触发事件和上报数据，请确保 init 在合适的时机进行调用。

 

权限配置说明

 

SDK 共需要三个权限，需要应用进行配置：

权限

用途

 
ohos.permission.INTERNET
 
 必须权限，允许应用发送统计数据，SDK 发送埋点数据需要此权限 
ohos.permission.GET_NETWORK_INFO
 
 必须权限，允许应用检测网络状态 
ohos.permission.GET_WIFI_INFO
 
 可选权限，允许应用获取 WIFI 信息

 

在 React Native 上初始化

导入神策模块

在具体的 js 文件中导入神策 React Native 模块，导入模块示例如下：

import sensors from 'sensorsdata-analytics-react-native'

初始化

sensors.init({
    server_url:'数据接收地址',
    auto_track:SAAutoTrackType.START|SAAutoTrackType.END|SAAutoTrackType.CLICK|SAAutoTrackType.VIEW_SCREEN
})
初始化属性说明
属性名 属性类型 属性说明 备注
server_url string 数据接收地址  
show_log boolean 是否显示日志 默认 false
global_properties object 全局属性

Android SDK 6.4.3 及以上

iOS SDK 4.4.6 及以上
auto_track SAAutoTrackType 全埋点采集类型

默认不开启，HarmonyOS 平台，不支持 RN 项目全埋点

START：应用启动
END：应用退出
CLICK：点击事件
VIEW_SCREEN：页面浏览
例：若需要采集启动退出，需设置 SAAutoTrackType.START|SAAutoTrackType.END
全部采集，需设置
SAAutoTrackType.START|SAAutoTrackType.END|SAAutoTrackType.CLICK|SAAutoTrackType.VIEW_SCREEN
flush_interval int 设置两次事件上报的最小间隔 默认 15 秒，最小 5 秒，单位毫秒
flush_bulksize int 设置本地缓存触发 flush 的最大条目数 默认 100，最小 50
encrypt boolean 是否开启加密 默认 false，仅支持 RSA+AES，HarmonyOS 不支持在 RN 中开启加密，需要在 HarmonyOS 项目中单独配置
javascript_bridge boolean 是否支持 H5 打通 默认 false

android

 object

Android 端特有配置

  • sub_process_flush:是否支持子进程上报数据
  • jellybean: 打通是否支持 API level 16 及以下的版本
  • max_cache_size:最大缓存数

android:{

    sub_process_flush:true, //默认 false

    jellybean:true ,                 //默认 false

    max_cache_size:48 * 1024*1024      //单位 byte ，默认为 32 * 1024 * 1024

}
ios object

iOS 端特有配置

  • max_cache_size:最大缓存数，单位条

ios:{

    max_cache_size:10000   默认 10000 条

}
harmony
 object
HarmonyOS 端特有配置
  • max_cache_size:最大缓存数，单位条
harmony:{

    max_cache_size:10000   默认 10000 条

}
visualized object

可视化相关配置

  • auto_track: boolean 是否开启
  • properties:自定义属性是否可用

visualized{

    auto_track:true, 默认 false

    properties:true   默认 false

} 

HarmonyOS 不支持可视化功能
heat_map boolean

点击分析开关

heat_map:true  默认 false

HarmonyOS 不支持点击分析功能

若 App 有合规需求，可参考 React Native 合规步骤。

若在 ReactNative 上进行初始化，则不需要再在 Android、iOS 或 HarmonyOS  中进行初始化

注意事项

如果项目中之前使用过神策分析 SDK RN 模块 1.1.8 及更早版本并开启了全埋点，那么在升级到最新版本后，请关闭掉之前开启的全埋点相关内容，否则会造成同一 App 元素点击事件被采集到两次的问题。

  1. Android 需要 ：
    • 删除对 enableReactNativeAutoTrack() 方法的调用
  2. iOS 端需要：
    • 对于直接集成源代码的开发者，需要在编译选项 Preprocessor Macros 中删掉 SENSORS_ANALYTICS_REACT_NATIVE=1。
      （对于直接集成 SDK 工程的项目，需要在 SDK 对应的 project 中修改编译选项，在 Preprocessor Macros中删掉 SENSORS_ANALYTICS_REACT_NATIVE=1）。

 

    • 对于使用 Cocoapods 集成神策分析 SDK 的开发者，在 pod 'SensorsAnalyticsSDK' 后删掉 :subspecs => ['ENABLE_REACT_NATIVE_APPCLICK']。
上一个
React Native
下一个
基础 API 介绍（React Native）
最近修改: 2025-03-03