帮助文档
  • What's new
  • 增长平台全景图
  • 文档使用指南
  • 产品简介
    • 产品概述
    • 数据模型
      • 用户模型
        • 访问用户
        • 登录用户
        • 用户属性
      • 事件模型
        • 什么是事件
        • 无埋点事件
          • 概述
          • 访问事件及变量
          • 页面事件及变量
          • 元素事件及变量
        • 埋点事件
      • 统计模型
        • 指标-事件的度量
        • 维度-事件的属性
        • 预定义指标
        • 预定义维度
    • 数据定义
      • 用户变量
        • 登录用户变量
        • 访问用户变量
      • 页面级变量
      • 埋点事件及变量
        • 埋点事件和事件级变量
        • 转化变量
    • 数据安全
  • 开发者文档
    • SDK 集成
      • SDK 简介
      • 合规指南
        • Android SDK合规说明
        • iOS SDK合规说明
        • HarmonyOS SDK合规说明
        • Web JS SDK 合规说明
        • 小程序 SDK 合规说明
      • SDK 使用流程
      • Web JS SDK
        • Web JS SDK 更新日志
        • 概述
        • 集成最新SDK
        • SDK 版本1.x升级2.x指导
        • Web JS SDK API
          • API 2.x
        • Web半自动采集浏览事件
        • 常见问题
          • 为什么网站要允许iframe加载?
          • 为什么网站不能复写 window 对象?
          • 页面内部嵌入的 iframe 元素如何加载 SDK?
          • 同时集成了web sdk 和 hybrid sdk 会怎么处理?
          • 同时集成了web sdk 1.x 和web sdk 2.x会怎么处理?
          • 元素没有元素浏览量怎么处理?
          • display:none 的元素,其子元素中的a/button只采集一次浏览量,想每次曝光都采集怎么处理?
          • 设置了 growing-ignore 之后,其子元素也不采集怎么处理?
      • 原生 Android SDK
        • Android SDK更新日志
        • 无埋点 SDK 集成
        • 埋点 SDK 集成
        • Android SDK API
          • Gradle配置API
          • 初始化配置项API
          • 运行时API
          • 自定义数据上传API
        • Android半自动采集浏览事件
        • 1.x Android SDK 升级指导
        • 常见问题
          • 无埋点数据采集问题
          • 无埋点SDK中埋点API使用问题
          • SDK性能问题
          • 圈选问题
          • Gradle 常见问题
          • App内嵌H5页面常见问题
      • 原生 iOS SDK
        • iOS SDK 更新日志
        • 无埋点 SDK集成
        • 埋点 SDK集成
        • iOS SDK API
          • 初始化配置项API
          • 埋点SDK支持的其他接口
          • 动态添加属性说明
          • 自定义数据上传API
        • iOS半自动采集浏览事件
        • iOS SDK升级指导
        • 常见问题
        • 用户运营iOS SDK地址
      • 移动端第三方框架 SDK
        • React Native无埋点SDK
        • React Native埋点SDK
        • Flutter埋点SDK
        • Cordova埋点SDK
        • Weex埋点SDK
        • API Cloud埋点SDK
        • AppCan埋点SDK
        • uniapp 埋点SDK
        • Unity 埋点 SDK
        • 鸿蒙原生埋点 SDK
      • 小程序 SDK
        • 3.7及以下
          • 更新日志
          • 集成
            • 微信小程序
            • 支付宝小程序
            • 百度小程序
            • QQ小程序
            • 字节跳动小程序
            • 快应用
          • 数据采集API
          • 无埋点采集逻辑和高级配置
        • 3.8
          • 更新日志
          • 集成
            • 微信小程序
            • 阿里(支付宝)小程序
            • 百度小程序
            • 字节(抖音头条)小程序
            • QQ小程序
            • 快应用
          • 初始化配置
          • 数据采集API
          • 无埋点采集逻辑和高级配置
          • 旧版本与3.8对比
          • 旧版本升级到3.8
      • Hybrid JS SDK
      • 小程序和微信公众号H5 内嵌页 SDK
        • 更新日志
      • 微信小游戏 SDK
        • 更新日志
      • 服务端埋点SDK
        • Java埋点SDK
        • PHP埋点SDK
        • 常见问题
      • 仅集成埋点SDK的Hybrid JS SDK
    • SDK调试
      • 概述
      • Web Debugger
      • Mobile Debugger
      • 小程序&内嵌页Debugger
      • 验证埋点事件
        • 概述
        • 对 cstm(事件以及关联的事件级变量)上报进行验证
        • 对 pvar(页面级变量)进行验证
        • 对 evar(转化变量)进行验证
        • 对 ppl(用户变量)上报验证
    • API参考
      • 公共请求参数
      • 原始数据导出API V2
        • 概述
        • 事件表字段说明
          • 事件表关联
          • 无埋点事件字段
          • 埋点事件与变量字段
          • 广告相关字段
        • 接口定义
          • 获取不同类型原始数据下载链接
          • 获取全部事件类型原始数据的下载链接
        • 升级说明
        • 导出数据处理建议
      • 原始数据导出API V1
        • 概述
        • 字段说明
          • 事件类型
          • 无埋点事件字段
          • 埋点事件与变量字段
          • 广告相关字段
        • 接口定义
          • 获取原始数据下载链接
          • 来源管理数据导出 -- [接口下线 2020.11.02]
        • 导出数据处理建议
      • 统计数据导出API V3
        • V3接口概述
        • 接口定义
          • 获取事件分析数据
          • 获取漏斗分析数据
          • 获取留存分析数据
          • 获取分布分析数据
          • 获取用户分群的下载链接
          • 获取用户标签的下载链接
      • 统计数据导出API
        • 概述
        • 接口定义
          • 获取看板列表
          • 获取看板中的图表信息
          • 获取事件分析数据
          • 获取漏斗分析数据
          • 获取留存分析数据
          • 获取分群列表
          • 获取特定分群的用户列表
          • 获取圈选元素定义
      • 用户分群更新API
      • 广告监测链接创建API
        • 概述
        • 接口定义
          • 查询应用ID
          • 新建推广活动
          • 查询推广活动ID
          • 新建推广渠道
          • 查询推广渠道ID
          • 新建监测链接(吸引用户直接打开App)
          • 查询监测链接(吸引用户直接打开App)
          • 新建监测链接(增加APP下载量-同时推广iOS和Android)
          • 查询监测链接(增加APP下载量-同时推广iOS和Android)
          • 新建监测链接(增加App下载量-推广iOS或Android单个平台)
          • 查询监测链接(增加App下载量-推广iOS或Android单个平台)
          • 新建监测链接(推广网页)
          • 查询监测链接(推广网页)
          • 新建监测链接(微信小程序)
          • 查询监测链接(微信小程序)
      • 埋点数据上传API
      • 登录用户变量上传API
        • 登录用户变量上传
        • 维度分类上传
        • 既有登录用户ID上传
        • (旧)接口定义
          • 用户变量上传
          • 维度分类上传
      • 项目管理API
        • 概述
        • 从项目内移除成员
        • 获取埋点事件列表
        • 创建埋点事件
        • 更新埋点事件
        • 删除埋点事件
        • 获取事件级变量
        • 创建事件级变量
        • 获取页面级变量
        • 创建页面级变量
        • 获取登录用户变量
        • 创建登录用户变量
        • 获取访问用户变量
        • 获取埋点数量限额
      • 数据管理API(GDPR)
        • 数据保护
        • 删除原始数据
  • 产品使用文档
    • 产品分析
      • 数据监测
        • 概览
        • 实时
        • 分析看板
        • KPI看板
        • 小程序看数助手
      • 分析工具
        • 事件分析
          • 什么是事件分析
          • 创建事件分析
          • 视图介绍
        • 漏斗分析
          • 什么是漏斗分析
          • 创建漏斗分析
          • 漏斗分析结果解读
          • 案例解读
        • 留存分析
          • 什么是留存分析
          • 创建留存分析
          • 留存分析结果解读
          • 视图介绍
          • 应用场景
          • 常见问题
        • 分布分析
          • 什么是分布分析
          • 使用场景
          • 创建分布分析
        • 热图分析
          • 什么是热图分析
          • Web端热图
          • App热图
        • 事件流分析
      • 业务场景
        • 分享分析
        • 留存魔法师
    • 智能运营
    • 获客分析
      • 首页
        • 应用级数据
        • 数据指标说明
      • 分析
        • 渠道价值分析
        • 渠道归因分析
        • 落地页分析
        • 活动页分析
      • 获客追踪
        • 监测链接
          • 推广App
          • 推广网页
          • 推广小程序(微信)
            • 推广链接的投放和设置指南
            • 小程序码管理
        • 深度链接
        • 结合产品数据深度分析
      • 产品配置
        • 广告活动管理
        • 推广渠道管理
        • 深度链接配置
        • 广告数据权限控制
        • 日志数据导出
        • 维度配置(链接扩展维度)
        • 归因配置
      • 渠道配置指南
        • 苹果广告投放
        • 华为应用商oCPD
        • HUAWEI Ads
        • 腾讯社交广告(Marking API)
        • 今日头条(巨量纵横)
        • 百度原生信息流
        • 百度搜索_ocpc
        • 微信广告平台
        • 微博超级粉丝通
        • 爱奇艺
        • InMobi
        • 快手平台
        • 凤羽广告平台
        • bilibili(B站)
        • VIVO营销平台
      • 相关知识
        • UTM参数使用指南
        • 移动端转化归因
        • 默认的渠道来源跟踪
        • DeepLink启用新域名
      • 常见问题
    • 用户库
      • 用户分群
        • 用户分群
          • 什么是用户分群
          • 创建用户分群
            • 规则分群
          • 更新用户分群
          • 查看分群详情页
          • 常见问题
        • 用户细查
          • 什么是用户细查
          • 细查用户
          • 应用场景
          • 常见问题
      • 用户标签 - Beta
        • 创建标签
        • 标签模型使用
          • 基础指标值
          • 最大值 / 最小值
          • 最初 / 最终
          • 分层标签
      • 用戶分析
        • 活跃用户分析
          • 什么是活跃用户分析
          • 分析活跃用户
      • 业务场景
        • 微信应用用户分析
    • 数据中心
      • 数据管理
        • 无埋点事件
          • 概述
          • Web端数据定义
            • Web圈选
            • Chrome插件圈选
            • Chrome插件安装步骤
          • App端数据定义
          • App端数据定义(App圈选)
          • 小程序数据定义
          • 微信内嵌页数据定义
        • 埋点事件
        • 事件级变量
        • 页面级变量
        • 用户变量
          • 登录用户变量
          • 访问用戶变量
        • 转化变量
        • 业务标签管理
        • 批量操作
        • 自定义指标管理
          • 计算指标
          • 合并事件
        • 预定义维度
        • 预定义指标
      • 数据规划
        • 电商行业数据规划
      • 数据校验
        • 移动端数据校验
        • 小程序数据校验
        • Mobile Debugger
        • Web Debugger
      • 数据集成
        • 微信公众号集成
    • 项目管理
      • 如何进入项目管理?
      • 项目概览
      • 应用管理
      • 成员管理
      • 角色管理
        • 典型角色应用场景
        • 系统角色功能权限列表
      • 小组管理
      • 数据权限
      • 项目配置
        • IP及域名数据过滤
        • 爬虫预防
        • UTM映射管理
        • API Token管理
        • 获取项目UID
    • 组织管理
      • 组织概览
      • 组织项目
      • 组织成员
      • 费用中心(计费方案)
    • 个人中心
      • 个人信息
      • 安全设置
    • 学习平台
    • 工单管理
      • 提交工单
      • 查看进度
      • 邀请技术支持
    • 术语解释
  • 常见问题与解决
    • 基本问题
    • SDK集成
    • 圈选问题
    • 指标和维度
    • 数据安全
    • 产品使用
    • 数据统计差异
    • 如何删除不要的项目?
    • 为何收不到GIO的邮件?
    • 无效指标清理说明
    • 产品维护计划通告
由 GitBook 提供支持
在本页
  • 1. 预处理 JS 文件
  • 2. 集成
  • 3. 页面识别
  • 3.1 react-navigation
  • 3.2 react-native-navigation
  • 3.3 page 设置API
  • 4. 自定义数据上传
  • 5. 高级选项设置
  • 6. 创建应用
  • 7. 验证SDK是否正常采集数据
  • 常见问题
  • 1. iOS使用 react native location 功能时与GrowingIO有冲突吗?
  • 2. 使用Debugger 工具时是否可以校验SDK采集数据的准确性?
  • 3. react native 页面中的 tabbar imp event 不准确,click event是否受影响?
  • 4. npm项目中同时集成了不同版本(如4.x、6.x)的react-navigation时,page、click event失效?

这有帮助吗?

  1. 开发者文档
  2. SDK 集成
  3. 移动端第三方框架 SDK

React Native无埋点SDK

上一页移动端第三方框架 SDK下一页React Native埋点SDK

最后更新于2年前

这有帮助吗?

GitHub Demo: 。

版本支持:

  • 兼容 React Native 版本:0.46-0.56、0.59.9、0.66+

  • 兼容组件 react-navigation 版本:^2.7.4、^3.11.0、^6.0.0

  • 兼容组件 react-native-navigation 版本:^1.1.486

  • App适配最低系统版本:iOS 8及以上、Android 4.2及以上

    如果没有使用react-navigation或者react-native-navigation作为导航,请仔细阅读 下文3.3 page设置API。

1. 预处理 JS 文件

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

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

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

配置 package.json 文件

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

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

2. 集成

1. 添加Android无埋点SDK依赖

注意替换SDK版本号:

请将autotrack-version替换成RN版本:RN-autotrack-version。

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

2. 重要配置

2.1 添加GrowingIOPackage

由于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()
      );
    }
}

2.2 代码混淆

注意混淆文件比 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$**{
    *;
}

1. 添加依赖

方式一:使用CocoaPods 快速添加

  1. 添加 pod 'GrowingReactNativeKit'到Podfile中。

  2. 执行pod install 或 pod update 更新pod依赖库。

  3. (可选)GrowingIO推荐您添加 AdSupport.framework 依赖库,用于来源管理激活匹配,有利于您更好的分析数据 ,添加项目依赖库的位置在项目设置target -> 选项卡General -> Linked Frameworks and Libraries

方式二:手动添加

  1. 将 Growing.h 、module.modulemap 和 GrowingCoreKit.framework、GrowingAutoTrackKit.framework、GrowingReactNativeKit.framework

    添加到iOS工程中。

2. 集成 React Native 埋点SDK

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'

3. 重要配置

3. 页面识别

3.1 react-navigation

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

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

3.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.3 page 设置API

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

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

4. 自定义数据上传

自定义数据上传其实最终是通过 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)

设置页面级变量,仅支持无埋点sdk使用

埋点接口其实最终是通过 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" });

5. 高级选项设置

开发者可以为 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

6. 创建应用

添加代码之后,请先Clean项目,然后再进行编译,并在你的 App 安装了 SDK 后重新启动几次 App,保证行为采集数据自动发送给 GrowingIO,以便顺利完成检测。

在GrowingIO平台的应用创建页面继续完成应用创建的数据检测,检测成功后应用创建成功。

7. 验证SDK是否正常采集数据

GrowingIO为您提供多种验证SDK是否正常采集数据的方式:

方式二:在SDK中设置了Debug模式后,在IDE编译器控制台查看数据采集日志。

常见问题

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

2. 使用Debugger 工具时是否可以校验SDK采集数据的准确性?

目前不支持,Debugger工具可以辅助您来调试自己的项目,建议您在release 环境下校验。

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

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

(2)click event不受影响,可正确采集

4. npm项目中同时集成了不同版本(如4.x、6.x)的react-navigation时,page、click event失效?

如果同时集成了不同版本的react-navigation,预处理的文件路径发生了变化,需要在package.json中手动配置对应的预处理路径,如果不确定路径是否正确可以咨询技术支持

下面的例子为同时集成react-navigation 4.x和6.x时的设置

{
  "dependencies": {
    ...
  }
  "GrowingIO": {
    "path": {
      "react-navigation-3x": "react-navigation/node_modules/@react-navigation/native",
      "react-navigation-4x": "react-navigation/node_modules/@react-navigation/native",
      "react-navigation-6x": "@react-navigation/native/node_modules/@react-navigation/core"
    }
  }
}

React Native无埋点SDK是在Android原生SDK上的扩展,请参照Android SDK> 完成添加跟踪代码配置。

version为Android 无埋点SDK版本号,最新版本号请参考原生Android SDK。

下载 、、、,并解压。

其他参照 iOS SDK > ,操作步骤一致。

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

​****

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

采集原理参照 ,目前仅兼容 方式,如果用户使用 Redux ,请结合官网的 和 3.3 Page 设置 API 采集页面。

了解GrowingIO平台数据采集类型请参考。

方式一:

方式三:

有,但不属于GrowingIO的原因,具体可以参考中的解答,并且可以使用来解决这个问题。

https://github.com/growingio/ReactNativeDemo
GitHub 开源 JS 脚本
无埋点 SDK集成
更新日志
GrowingCoreKit
GrowingAutoTrackKit
GrowingReactNativeKit
GrowingHeader
无埋点 SDK集成
直接更改 hook.js 脚本
react-navigation 的 screen tracking
Listening to State Changes
Screen tracking with Redux
数据模型
Mobile Debugger​​
issue
rn-patch.zip
重要配置
App Store 提交应用注意事项
数据校验