React Native

本指南将会为您介绍如何在 React Native 中使用 SDK 的功能。

稳定版本为：v2.4.5

更新时间为：2023-02-17

资源下载:源代码 (opens new window)

Beta版本为: v2.4.6-beta.1

一、集成 SDK

react-native-thinking-data 有自动和手动两种集成方法,推荐使用自动集成

1.1 自动集成

1. npm 安装 react-native-thinking-data 模块

npm install react-native-thinking-data --save

2. link react-native-thinking-data 模块

react-native link react-native-thinking-data（React Native 0.60 以下版本）
cd ios&&pod install（React Native 0.60 以上版本）

1.2 手动集成

1. npm 安装 react-native-thinking-data 模块

npm install react-native-thinking-data --save

2. Android&iOS 平台配置

• iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ react-native-thinking-data and add RNThinkingData.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNThinkingData.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)

• Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import cn.thinking.RNThinkingDataPackage; to the imports at the top of the file
• Add new RNThinkingDataPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

include ':react-native-thinking-data'
project(':react-native-thinking-data').projectDir = new File(rootProject.projectDir,     '../node_modules/react-native-thinking-data/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

compile project(':react-native-thinking-data')

完成导入后即可在 ReactNative 中使用 SDK 相关功能

二、 初始化 SDK

以下是 SDK 初始化的示例代码:

import thinkingdata, { AutoTrackEventType } from "react-native-thinking-data";
thinkingdata.init({ appid: "xxx", serverUrl: "https://xxx" });

参数说明:

• appid: 您的项目的 APPID，可通过在 TA 后台项目管理页面获取
• serverUrl: 数据上传的 URL
  • 如果您对接的是云服务，填入: https://global-receiver-ta.thinkingdata.cn
  • 如果您使用私有化部署版本，请为数据采集地址绑定域名，并配置 HTTPS 证书：https://数据采集地址绑定域名

    由于 Android 9.0+ 默认限制 HTTP 请求，因此请务必使用 HTTPS 协议

三、常用功能

在使用常用功能之前，建议你先了解用户识别规则；SDK 默认会使用生成随机数作为访客 ID，并持久化存储访客 ID 在本地；用户未登录之前，会以访客 ID 作为身份识别 ID。注意:访客 ID 在用户重新安装 App 以及更换设备时将会变更。

3.1 设置账号 ID

在用户进行登录时，可调用 login 来设置用户的账号 ID， TA 平台将会以账号 ID 作为身份识别 ID，并且设置的账号 ID 将会在调用 logout 之前一直保留。多次调用 login 将覆盖先前的账号 ID 。

thinkingdata.login("TA");

login 可以多次调用，每次调用会判断传入的账号 ID 与先前保存的 ID 是否一致，一致则忽略调用，不一致则会覆盖先前的 ID。

该方法不会上传登录事件

3.2 设置公共事件属性

公共事件属性指的就是每个事件都会带有的属性，您可以调用 setSuperProperties 来设置公共事件属性，我们推荐您在发送事件前，先设置公共事件属性。对于一些重要的属性，譬如用户的会员等级、来源渠道等，这些属性需要设置在每个事件中，此时您可以将这些属性设置为公共事件属性。

ta.setSuperProperties({
  channel: "ta", //字符串
  age: 1, //数字
  isSuccess: true, //布尔
  birthday: new Date(), //时间
  object: {
    key: "value",
  }, //对象
  object_arr: [{ key: "value" }], //对象组
  arr: ["value"], //数组
});

公共事件属性将会被保存到缓存中，无需每次启动 App 时调用。如果调用 setSuperProperties 上传了先前已设置过的公共事件属性，则会覆盖之前的属性。

• Key 为该属性的名称，为字符串类型，规定只能以字母开头，包含数字，字母和下划线 "_"，长度最大为 50 个字符，对字母大小写不敏感,TA 会统一转化为小写字母
• Value 为该属性的值，支持字符串、数字、布尔、时间、对象、对象组、数组

  事件属性、用户属性的要求与公共事件属性保持一致

3.3 开启自动采集

以下示例代码开启安装事件、启动、关闭事件的自动采集，如果您想更详细的了解自动采集事件，可以阅读自动采集功能介绍

thinkingdata.enableAutoTrack([AutoTrackEventType.APP_END, AutoTrackEventType.APP_START, AutoTrackEventType.APP_INSTALL)

3.4 发送事件

您可以调用 track 来上传事件，建议您根据先前梳理的埋点文档来设置事件的属性以及发送事件的条件，此处以用户购买某商品作为范例：

thinkingdata.track(
  "product_buy", //事件名
  { product_name: "商品名" } //事件属性
);

3.5 设置用户属性

对于一般的用户属性，您可以调用 userSet 来进行设置，使用该接口上传的属性将会覆盖原有的属性值，如果之前不存在该用户属性，则会新建该用户属性，类型与传入属性的类型一致，此处以设置用户名为例：

//此时username为TA
thinkingdata.userSet({ username: "TA" });
//此时username为TE
thinkingdata.userSet({ username: "TE" });

四、最佳实践

以下示例代码包含以上所有操作，我们推荐按照如下步骤使用:

import thinkingdata, { AutoTrackEventType } from "react-native-thinking-data";
if (授权隐私政策) {
  //SDK初始化
  thinkingdata.init({ appid: "xxx", serverUrl: "https://xxx" });
  //如果用户已登录，可以设置用户的账号ID作为身份唯一标识
  thinkingdata.login("TA");
  //设置公共事件属性以后，每个事件都会带有公共事件属性
  ta.setSuperProperties({
    channel: "ta", //字符串
    age: 1, //数字
    isSuccess: true, //布尔
    birthday: new Date(), //时间
    object: { key: "value" }, //对象
    object_arr: [{ key: "value" }], //对象组
    arr: ["value"], //数组
  });
  //开启自动采集
  thinkingdata.enableAutoTrack([
    AutoTrackEventType.APP_INSTALL,
    AutoTrackEventType.APP_START,
    AutoTrackEventType.APP_END,
  ]);
  //发送事件
  thinkingdata.track(
    "product_buy", //事件名
    { product_name: "商品名" } //事件属性
  );
  //设置用户属性
  thinkingdata.userSet({ username: "TE" });
}

#