1. 集成神策分析 SDK RN 模块

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

1.1. 安装神策分析 SDK RN 模块

npm install sensorsdata-analytics-react-native
CODE 
yarn add sensorsdata-analytics-react-native
CODE

链接神策分析 SDK RN 模块

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

react-native link sensorsdata-analytics-react-native
CODE

1.2. 执行命令

在项目路径下执行 node 命令

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

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

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

2. iOS 端

2.1. 集成神策分析 iOS SDK

2.1.1. 使用 CocoaPods  集成

在项目目录下执行：

 cd ios && pod install && cd ..
CODE

仅支持 React native 0.60.0 及以上版本

2.1.2. 使用源码集成

  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 文件夹；

2.2. 初始化神策分析 SDK

2.2.1. 获取项目数据接收地址

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

2.2.2. 初始化 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];
CODE

2.3. 配置 Scheme

2.3.1. 获取项目 Scheme

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

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

2.3.2. App 中添加 Scheme

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

2.3.3. 处理传入的 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;
}
CODE

3. Android 端

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

请参考 集成文档（Android） 。

3.2. 配置混淆

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

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

3.3. 使用 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);
    }
}
CODE

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

4. 在 React Native 上初始化

4.1. 导入神策模块

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

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

初始化

sensors.init({
    server_url:'数据接收地址',
    auto_track:SAAutoTrackType.START|SAAutoTrackType.END|SAAutoTrackType.CLICK|SAAutoTrackType.VIEW_SCREEN
})
CODE

4.1.1.1. 初始化属性说明

属性名属性类型属性说明备注
server_urlstring数据接收地址
show_logboolean是否显示日志默认 false
global_propertiesobject全局属性

Android SDK 6.4.3 及以上

iOS SDK 4.4.6 及以上

auto_trackSAAutoTrackType全埋点采集类型

默认不开启

START：应用启动
END：应用退出
CLICK：点击事件
VIEW_SCREEN：页面浏览
例：若需要采集启动退出，需设置 SAAutoTrackType.START|SAAutoTrackType.END
全部采集，需设置
SAAutoTrackType.START|SAAutoTrackType.END|SAAutoTrackType.CLICK|SAAutoTrackType.VIEW_SCREEN

flush_intervalint设置两次事件上报的最小间隔默认 15 秒，最小 5 秒，单位毫秒
flush_bulksizeint设置本地缓存触发 flush 的最大条目数默认 100，最小 50
encryptboolean是否开启加密默认 false，仅支持 RSA+AES
javascript_bridgeboolean是否支持 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

}

iosobject

iOS 端特有配置

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

ios:{

    max_cache_size:10000   默认 10000 条

}

visualizedobject

可视化相关配置

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

visualized{

    auto_track:true, 默认 false

    properties:true   默认 false

} 

heat_mapboolean

点击图开关

heat_map:true  默认 false

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

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

5. 注意事项

如果项目中之前使用过神策分析 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']。