React Native 无埋点 SDK

Last updated 7 hours ago

自动采集用户行为数据、页面元素信息和设备信息等数据,和原生无埋点 SDK 的采集内容和功能一致。

GitHub Demo : https://github.com/growingio/ReactNativeDemo

支持版本

  • 兼容 react native 版本:0.46-0.56

  • 兼容组件 react-navigation 版本:2.6.2及以上

  • 兼容组件 react-native-navigation 版本:1.1.486及以上

集成

预处理 JS 文件

RN无埋点的实现原理是修改用户React NativeReact-navigationReact-Native-Navigation的源码。所以需要预先处理js文件,GitHub 开源 JS 脚本

(1)使用命令行进入项目根目录,执行下面操作(二者任选其一即可):

npm install --save react-native-autotrack-growingio
npm install --save https://github.com/growingio/GIORNHook.git#0.0.5

(2) 配置 package.json 文件

考虑到了hook.js每次npm install之后都需要执行, 建议直接配在项目的package.json中, 在原有文件中,添加如下代码,保存后执行npm install

"scripts": {
"postinstall": "node node_modules/react-native-autotrack-growingio/hook.js -run"
}

Android 集成

1. 添加 Android 无埋点 SDK 依赖

React Native 无埋点 SDK 是在 Android 原生 SDK 上的扩展,参照 Android 无埋点 SDK,集成步骤的 1~5,注意将 SDK 版本号替换成 RN 版本RN-autotrack-2.6.0

集成步骤中,只有版本号不同,适配 RN 与原生混合开发场景。

2. 重要配置项

由于 SDK 需要在java代码中进行初始化。

在项目的Application中,添加GrowingIOPackage

public class MainApplication extends Application implements ReactApplication {
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
// 此处加入GrowingIOPackage
new GrowingIOPackage()
);
}
}

iOS 集成

1. 添加 iOS 无埋点 SDK 依赖

参照 iOS 无埋点 SDK 集成, 操作步骤一致。

2. 集成 React Native 打点 SDK

npm install --save https://github.com/growingio/react-native-growingio.git#0.0.5
react-native link react-native-growingio

如果react-native link react-native-growingio失败

(成功则忽略此步骤),即发现Libraries中没有GrowingIORNPlugin.xcodeproj,则可手动配置:

  1. 打开 XCode 工程中, 右键点击 Libraries 文件夹 ➜ Add Files to <...>

  2. node_modules react-native-growingio ➜ iOS ➜ 选择 GrowingIORNPlugin.xcodeproj

  3. 在工程Build PhasesLink Binary With Libraries中添加libGrowingIORNPlugin.a

3. 重要配置项

与原生混合开发的开发者可详细查看 iOS 无埋点 重要配置文档,如果原生控件使用不多,只需关注如下配置即可:

页面识别

由于RN应用的页面切换并不遵循原生的生命周期, 需要单独适配, 目前在 React Native 页面中我们只支持react-navigationreact-native-navigation作为导航器, 并且为了拓展性, 留下了手动的page接口, 开发者可自行适配(直接更改 hook.js 脚本)。

1. react-navigation

如果使用react-navigation, 我们的hook脚本进行了自动适配, 默认的page名称为其key值。 用户可以自行设置, 如下代码:

this.props.navigation.setParams({growingPagePath: 'xx'});

采集原理参照 react-navigation 的 screen tracking,目前仅兼容 Listening to State Changes方式,如果用户使用 Redux ,请结合官网的 Screen tracking with Redux Page 设置 API 采集页面。

2. react-native-navigation

  • 当前支持react-native-navigation版本为 1.1.486, 1.1.406。 理论上兼容1.1版本。

  • react-native-navigation其标题默认取title, 如果没有title则取screenId,作为唯一标记。

用户可以设置自定义title, 只需要设置growingPagePath字段, 该字段与title同级即可.

3. Page 设置 API

如果SDK目前支持的路由方案不能满足您的需求, SDK留下拓展接口, 您需要在您认为页面发生切换时, 将最新的page名称告诉我们。 调用方法如下:

import {
NativeModules
} from 'react-native';
// 在react native页面将要展示时调用
NativeModules.GrowingIO.onPagePrepare("pageName");
// 在react native页面已经展示时调用
NativeModules.GrowingIO.onPageShow("pageName");

自定义事件和变量API

方法名

参数类型

说明

track

(String eventId, Object eventLevelVariable(optional))

自定义事件

trackWithNumber

(String eventId, Number number, Object eventLevelVariable(optional))

自定义事件

setEvar

(Object conversionVariables)

设置转化变量

setPeopleVariable

(Object peopleVariables)

设置用户变量

setUserId

(String userId)

设置登录用户ID

clearUserId

无参数

清除登录用户ID

setVisitor

(Object visitor)

设置访问用户变量

埋点接口其实最终是通过 NativeModules.GrowingIO 调用的原生GrowingIO 无埋点的API,以上接口使用时,对应的参数限制条件对您很重要。请您注意遵守,并且验证打点是否成功。

参数限制条件

参数名称

限制条件

eventId

非空,长度限制小于等于50;

number

非空。

eventLevelVariable

不可使用嵌套的JSONObject对象,即为JSONObject中不可以放入JSONObject或者JSONArray

key 长度限制小于等于50,value长度限制小等于1000。

conversionVariables

同上

peopleVariables

同上

visitor

同上

userId

长度限制小于等于1000;

如果值为空则清空了登录用户变量,不建议这么用,

请使用 clearUserId 清除登录用户变量。

代码示例:

GrowingIOPackage 向 RN 提供了一个 NativeModule , 所有打点接口都是由其实现,使用方法如下:

//在使用 GrowingIO 埋点功能的文件中导入 NativeModules
import {
NativeModules
} from 'react-native';
//埋点方法调用示例如下:
//track 设置自定义事件
NativeModules.GrowingIO.track('testEventId', {'卖家Id': 'xxxxxx', '地点': '北京'});
//trackWithNumber 设置自定义事件
NativeModules.GrowingIO.trackWithNumber('addCart',97,{"book":"EnglishBook"});
//setPeopleVariable 设置用户变量
NativeModules.GrowingIO.setPeopleVariable({ "name": "Danny", "Age": 20 });
//setEvar 设置转化变量
NativeModules.GrowingIO.setEvar({ "registered": true, "fee": "200" });
//setUserId 设置登录用户名称
NativeModules.GrowingIO.setUserId("Gioer");
//clearUserId 清除登录用户名称
NativeModules.GrowingIO.clearUserId();
//setVisitor 设置访问用户变量
NativeModules.GrowingIO.setVisitor({ "age": 20, "gender": "male" });

高级选项设置

开发者可以为UI元素添加growingParams

代码示例:

<Text growingParams={{id:"test",content:"test",info:"test",ignore:"true"}}>高级选项设置</Text>

属性列表

属性名称

参数限制

描述

功能对应于原生接口

ignore

仅接受"true"

忽略对应的元素,不采集点击事件和浏览事件

Android 文档解释,iOS 意义相同

track

仅接受"true"

采集输入框内容,默认采集输入框内容变化次数,不采集内容

Android 文档解释,iOS 意义相同

id

设置界面元素ID

Android 文档解释,iOS 意义相同

content

设置界面元素内容

Android 文档解释,iOS 意义相同

info

设置元素对象

Android 文档解释,iOS 意义相同

支持设置组件(Component)列表(包括但不限于)

支持的组件

View

ScrollView

ListView

Picker

Text

TextInput

WebView

RefreshControl

ActivityIndicator

验证 SDK 是否正常工作

验证内容:

  1. 验证 点击事件是否发送 (clck)

  2. 验证 页面是否识别(page)

  3. 验证热图圈选功能

  4. 原生验证内容(Android)

  5. 原生验证内容(iOS)

验证工具:

  1. 查看日志: Android 打开 TestMode 和 Debug Mode

  2. 查看日志:iOS

常见问题

1.iOS 使用react native location功能时与GrowingIO有冲突么?

是的,但不属于growingio的原因,具体可以参考issue中的解答,并且可以使用rn-patch.zip来解决这个问题

2. 支持react native 版本?

0.46 ~ 0.56

3. chrome debug时是否可以校验sdk采集数据的准确性?

目前不支持,但不影响您chrome debug调试自己的项目, 建议您在release环境下校验

4. react native页面中的tabbar imp event不准确?click event是否受影响?

(1) 原则上对于react native中的tabbar控件,我们只能保证使用原生代码UITabBarController,或者不是RCT为前缀的原生控件实现的tabbar,可以正确采集tabbar上的imp (2) click event不受影响,可正确采集