React Native无埋点SDK
版本支持：
- 兼容 React Native 版本：0.46-0.56、0.59.9
- 兼容组件 react-navigation 版本：^2.7.4、^3.11.0
- 兼容组件 react-native-navigation 版本：^1.1.486
- App适配最低系统版本：iOS 8及以上、Android 4.2-10
如果没有使用react-navigation或者react-native-navigation作为导航，请仔细阅读 下文3.3 page设置API。
RN无埋点的实现原理是修改用户
React Native，React-navigation， React-Native-Navigation的源码。所以需要预先处理js文件，GitHub 开源 JS 脚本。npm install --save react-native-autotrack-growingio
npm install --save https://github.com/growingio/GIORNHook.git#0.0.6
考虑到了
hook.js每次npm install之后都需要执行， 建议直接配在项目的package.json中， 在原有文件中，添加如下代码，保存后执行npm install。"scripts": {
"postinstall": "node node_modules/react-native-autotrack-growingio/hook.js -run"
}
Android
iOS
注意替换SDK版本号：
请将autotrack-
version替换成RN版本：RN-autotrack-version。集成步骤中只有版本号不同，适配RN与原生混合开发场景。
由于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()
);
}
}
注意混淆文件比 Android 原生 SDK 多一条 RN 控件的混淆代码，请复制全部内容添加到您的
proguard_rules.pro 文件中，如下：# GIO RN 控件混淆代码，不添加则会造成点击事件采集失败
-keep class com.facebook.react.uimanager.JSTouchDispatcher{
*;
}
-keep class com.growingio.** {
*;
}
-dontwarn com.growingio.**
-keepnames class * extends android.view.View
-keepnames class * extends android.app.Fragment
-keepnames class * extends android.support.v4.app.Fragment
-keepnames class * extends androidx.fragment.app.Fragment
-keep class android.support.v4.view.ViewPager{
*;
}
-keep class android.support.v4.view.ViewPager$**{
*;
}
-keep class androidx.viewpager.widget.ViewPager{
*;
}
-keep class androidx.viewpager.widget.ViewPager$**{
*;
}
方式一：使用CocoaPods 快速添加
- 1.添加
pod 'GrowingReactNativeKit'到Podfile中。 - 2.执行
pod install或pod update更新pod依赖库。 - 3.（可选）GrowingIO推荐您添加 AdSupport.framework 依赖库，用于来源管理激活匹配,有利于您更好的分析数据 ,添加项目依赖库的位置在项目设置target -> 选项卡General -> Linked Frameworks and Libraries
方式二：手动添加
- 2.将
Growing.h、module.modulemap和GrowingCoreKit.framework、GrowingAutoTrackKit.framework、GrowingReactNativeKit.framework添加到iOS工程中。
npm install --save https://github.com/growingio/react-native-growingio.git#0.0.7
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 Phases➜Link Binary With Libraries中添加libGrowingIORNPlugin.a
如果您使用的是pod方式集成：
请添加以下内容到Podfile中，并在添加之后执行
pod update：pod 'GrowingReactNativeTrackKit', :path => '../node_modules/react-native-growingio'
由于RN应用的页面切换并不遵循原生的生命周期， 需要单独适配， 目前在 React Native 页面中我们只支持
react-navigation， react-native-navigation作为导航器, 并且为了拓展性， 留下了手动的page接口， 开发者可自行适配（直接更改 hook.js 脚本）。如果使用react-navigation， 我们的hook脚本进行了自动适配, 默认的page名称为其key值。 用户可以自行设置， 如下代码：
this.props.navigation.setParams({growingPagePath: 'xx'});
采集原理参照 react-navigation 的 screen tracking，目前仅兼容
Listening to State Changes方式，如果用户使用 Redux ，请结合官网的 Screen tracking with Redux 和 3.3 Page 设置 API 采集页面。当前支持
react-native-navigation版本为 1.1.486， 1.1.406。 理论上兼容1.1版本。react-native-navigation其标题默认取title， 如果没有title则取screenId，作为唯一标记。用户可以设置自定义
title, 只需要设置growingPagePath字段， 该字段与title同级即可。如果SDK目前支持的路由方案不能满足您的需求， SDK留下拓展接口， 您需要在您认为页面发生切换时， 将最新的page名称告诉我们。 调用方法如下：
import {
NativeModules
} from 'react-native';
// 在react native页面将要展示时调用
NativeModules.GrowingIO.onPagePrepare("pageName");
// 在react native页面已经展示时调用
NativeModules.GrowingIO.onPageShow("pageName");
自定义数据上传其实最终是通过 NativeModules.GrowingIO 调用的原生GrowingIO 无埋点的API，以上接口使用时，对应的参数限制条件对您很重要。
方法名 | 参数类型 | 说明 |
track | (String eventId, Object eventLevelVariable(optional)) | 自定义事件 |
setEvar | (Object conversionVariables) | 设置转化变量 |
setPeopleVariable | (Object peopleVariables) | 设置用户变量 |
setUserId | (String userId) | 设置登录用户ID |
clearUserId | 无参数 | 清除登录用户ID |
setVisitor | (Object visitor) | 设置访问用户变量 |
setPageVariable | (String pageName, JSONObject pageVariable) | 设置页面级变量 |
埋点接口其实最终是通过 NativeModules.GrowingIO 调用的原生GrowingIO 无埋点的API，参数限制与其一致。
代码示例
GrowingIOPackage 向 RN 提供了一个 NativeModule ，所有埋点接口都是由其实现，使用方法如下：
//在使用 GrowingIO 埋点功能的文件中导入 NativeModules
import {
NativeModules
} from 'react-native';
//埋点方法调用示例如下：
//track 设置自定义事件
NativeModules.GrowingIO.track('testEventId', {'卖家Id': 'xxxxxx', '地点': '北京'});
//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" });
//setPageVariable 设置页面级变量
NativeModules.GrowingIO.setPageVariable("HomePage",{ "registered": true, "fee": "200" });
开发者可以为 UI 元素添加 growingParams
代码示例：
<Text growingParams={{id:"test",content:"test",info:"test",ignore:"true"}}>高级选项设置</Text>
属性列表
属性名称 | 参数限制 | 描述 |
ignore | 仅接受 true | 忽略对应的元素，不采集点击事件和浏览事件 |
track | 仅接受 true | 采集输入框内容，默认采集输入框内容变化次数，不采集内容 |
id | - | 设置界面元素ID |
content | - | 设置界面元素内容 |
info | - | 设置元素对象 |
支持设置组件（Component）列表（包括但不限于）
组件 |
View |
ScrollView |
ListView |
Picker |
Text |
TextInput |
WebView |
RefreshControl |
ActivityIndicator |
添加代码之后，请先Clean项目，然后再进行编译，并在你的 App 安装了 SDK 后重新启动几次 App，保证行为采集数据自动发送给 GrowingIO，以便顺利完成检测。
在GrowingIO平台的应用创建页面继续完成应用创建的数据检测，检测成功后应用创建成功。
GrowingIO为您提供多种验证SDK是否正常采集数据的方式：
方式二：在SDK中设置了Debug模式后，在IDE编译器控制台查看数据采集日志。
目前不支持，Debugger工具可以辅助您来调试自己的项目，建议您在release 环境下校验。
（1）原则上对于react native中的tabbar控件,我们只能保证使用原生代码UITabBarController，或者不是RCT为前缀的原生控件实现的tabbar，可以正确采集tabbar上的imp
（2）click event不受影响,可正确采集
Last modified 3yr ago