神策 react-native-sensors-analytics 模块,封装了神策 Android & iOS SDK 常用 API ,使用此模块,可以在 React Native 开发的 App 中完成埋点的统计上报。

1. 使用 npm 方式安装神策 SDK 模块

对于 React Native 开发的应用,可以使用 npm 方式集成神策 SDK。

1.1. npm 安装 react-native-sensors-analytics 模块

npm install @sensors.data/react-native-sensors-analytics
BASE


1.2. link react-native-sensors-analytics 模块

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

react-native link @sensors.data/react-native-sensors-analytics 
BASE


2. Android 端

2.1. 集成神策的 gradle 插件、初始化 SDK

  • project  级别的 build.gradle 文件中添加 Sensors Analytics android-gradle-plugin 依赖:

buildscript {
	repositories {
	jcenter()
}
dependencies {
	classpath 'com.android.tools.build:gradle:2.2.3'
	//添加神策分析 android-gradle-plugin 依赖
	classpath 'com.sensorsdata.analytics.android:android-gradle-plugin2:3.1.8'
}

allprojects {
	repositories {
	jcenter()
	}
}
JAVA


如下示例图:

  • 主 module 的 build.gradle 文件中添加 com.sensorsdata.analytics.android 插件、神策分析 SDK 依赖:
apply plugin: 'com.android.application'
//添加 com.sensorsdata.analytics.android 插件
apply plugin: 'com.sensorsdata.analytics.android'

dependencies {
//添加 Sensors Analytics SDK 依赖
implementation 'com.sensorsdata.analytics.android:SensorsAnalyticsSDK:3.2.7'
}
JAVA



SensorsAnalyticsSDK 的最新版本号请参考 GitHub 更新日志

如下示例图:

  •  在程序的入口 Application 的 onCreate() 中调用 SensorsDataAPI.startWithConfigOptions() 在主线程中初始化 SDK:
import android.app.Application;
import android.content.Context;
import android.content.pm.ApplicationInfo;
import android.content.pm.PackageInfo;
import android.content.pm.PackageManager;
import com.sensorsdata.analytics.android.sdk.SensorsDataAPI;
import com.sensorsdata.analytics.android.sdk.SAConfigOptions;
import com.sensorsdata.analytics.android.sdk.SensorsAnalyticsAutoTrackEventType;
import org.json.JSONObject;
import java.util.ArrayList;
import java.util.List;

public class App extends Application {

// debug 模式的数据接收地址 (测试,测试项目)
final static String SA_SERVER_URL_DEBUG = "【测试项目】数据接收地址";

// release 模式的数据接收地址(发版,正式项目)
final static String SA_SERVER_URL_RELEASE = "【正式项目】数据接收地址";


@Override
public void onCreate() {
	super.onCreate();
	// 在 Application 的 onCreate 初始化神策 SDK
	initSensorsDataSDK();
}

/**
 * 初始化 SDK 、开启自动采集
 */
private void initSensorsDataSDK() {
	try {
		// 设置 SAConfigOptions,传入数据接收地址
		SAConfigOptions saConfigOptions = new SAConfigOptions(isDebugMode(this) ? SA_SERVER_URL_DEBUG : SA_SERVER_URL_RELEASE);

		// 通过 SAConfigOptions 设置神策 SDK 自动采集 options
		saConfigOptions.setAutoTrackEventType(
		SensorsAnalyticsAutoTrackEventType.APP_CLICK | // 开启全埋点点击事件
		SensorsAnalyticsAutoTrackEventType.APP_START | // 开启全埋点启动事件
		SensorsAnalyticsAutoTrackEventType.APP_END) // 开启全埋点退出事件
		.enableLog(isDebugMode(this)) // 开启神策调试日志,默认关闭(调试时,可开启日志)。
		.enableTrackAppCrash(); // 开启 crash 采集

		// 需要在主线程初始化神策 SDK
		SensorsDataAPI.startWithConfigOptions(this, saConfigOptions);
		
		// 初始化SDK后,开启 RN 页面控件点击事件的自动采集
		SensorsDataAPI.sharedInstance().enableReactNativeAutoTrack();
	} catch (Exception e) {
		e.printStackTrace();
	}
}

/**
 * @param context App 的 Context
 * @return debug return true,release return false
 * 用于判断是 debug 包,还是 relase 包
 */
public static boolean isDebugMode(Context context) {
	try {
		ApplicationInfo info = context.getApplicationInfo();
		return (info.flags & ApplicationInfo.FLAG_DEBUGGABLE) != 0;
	} catch (Exception e) {
		e.printStackTrace();
		return false;
	}
}
JAVA

2.2. 开启 React Native 页面控件的自动采集($AppClick)

1.7.14 及以后的版本, 支持在初始化 SDK 之后,通过 enableReactNativeAutoTrack() 方法开启 RN 页面控件点击事件的自动采集。

//初始化SDK后,开启 RN 页面控件点击事件的自动采集
SensorsDataAPI.sharedInstance().enableReactNativeAutoTrack();
JAVA

3. iOS 端

3.1. 集成并初始化 SDK

  • 使用 CocoaPods 集成:

pod 'SensorsAnalyticsSDK'

注意:React Native 0.60 及以上版本,请在项目中执行下边命令

cd ios && pod install && cd ..

  • 在程序的入口(如 AppDelegate.m )中引入 SensorsAnalyticsSDK.h,并在初始化方法(如 - application:didFinishLaunchingWithOptions:launchOptions )中调用 sharedInstanceWithConfig: 在主线程中初始化 SDK。


#import <SensorsAnalyticsSDK/SensorsAnalyticsSDK.h>

#ifdef DEBUG
#define SA_SERVER_URL @"<#【测试项目】数据接收地址#>"
#else
#define SA_SERVER_URL @"<#【正式项目】数据接收地址#>"
#endif

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

	[self initSensorsAnalyticsWithLaunchOptions:launchOptions];
	return YES;
}

- (void)initSensorsAnalyticsWithLaunchOptions:(NSDictionary *)launchOptions {
	// 设置神策 SDK 自动采集 options
	SAConfigOptions *options = [[SAConfigOptions alloc] initWithServerURL:SA_SERVER_URL launchOptions:launchOptions];
	options.autoTrackEventType = SensorsAnalyticsEventTypeAppStart | SensorsAnalyticsEventTypeAppEnd | SensorsAnalyticsEventTypeAppClick ;
	// 需要在主线程中初始化 SDK
	[SensorsAnalyticsSDK sharedInstanceWithConfig:options];
}
OBJECTIVE-C


3.2. 开启 React Native 页面控件的自动采集($AppClick)

  • 对于直接集成源代码的开发者,可以在编译选项 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']
RUBY

4. 在 React Native 上使用代码埋点

4.1. 在 js 文件中导入神策模块

在具体的 js 文件中导入神策模块(RNSensorsAnalyticsModule),导入模块示例如下:

import { NativeModules } from 'react-native';
const RNSensorsAnalyticsModule = NativeModules.RNSensorsAnalyticsModule;
JS

添加导入模块后便可进行代码埋点。

4.2. 添加埋点事件

在具体的位置添加事件埋点,以按钮点击时触发事件为例:

其中对应的事件名为:RN_AddToFav 对应的事件属性为:ProductIDUserLevel

<Button
	title="Button"
	onPress={() =>
	RNSensorsAnalyticsModule.track("RN_AddToFav",{"ProductID":123456,"UserLevel":"VIP"})}>
</Button>
JS


具体操作如下图所示:


$AppClick( React Native 元素点击)事件的预置属性:

字段名称类型显示名说明版本
$element_type字符串元素类型控件的类型( RNView )
$element_content字符串元素内容控件文本内容