集成文档（React Native）

npm install sensorsdata-analytics-react-native

yarn add sensorsdata-analytics-react-native

react-native link sensorsdata-analytics-react-native

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

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.framework 添加到 "General" > "Frameworks, 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

在 AppDelegate 的 -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 生成的鸿蒙项目中 src 目录下 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

ohos.permission.GET_NETWORK_INFO

ohos.permission.GET_WIFI_INFO

在 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
})

初始化属性说明

若 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。
3. 对于使用 Cocoapods 集成神策分析 SDK 的开发者，在 pod 'SensorsAnalyticsSDK' 后删掉 :subspecs => ['ENABLE_REACT_NATIVE_APPCLICK']。