如需在每个事件中都包括某属性，可通过公共属性设置，无需在每个事件中重复设置。公共属性只需设置一次，即可包括在所有代码埋点事件、预置事件和全埋点事件中。

设置公共属性 #

关于自定义 “公共属性” 请注意：

1. 上报机制是随着每一次日志发送进行提交，默认的日志发送频率是1分钟，所以如果在一分钟内连续修改自定义公共属性，按照日志发送前的最后一次修改为准；
2. 不推荐高频次修改，如每秒修改一次；

   import { NativeModules } from 'react-native';
   const { RangersAppLogModule } = NativeModules;
   
   // 示例：设置自定义的公共属性，属性名为key_public，属性值为value_public
   RangersAppLogModule.setHeaderInfo({
       "key_public": "value_public"
   });
   

移除公共属性 #

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：设置自定义的公共属性，属性名为key_public，属性值为value_public
RangersAppLogModule.removeHeaderInfo("key_public");

用户登录态设置 #

用户登录 #

如您的产品中有账户体系，请在用户登录后立即设置uuid，以保证用户登录前后口径一致性。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 登录时设置您账号体系的ID, 并保证其唯一性
RangersAppLogModule.setUserUniqueId('{{USER_UNIQUE_ID}}');

用户登出 #

在账户登出时调用。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 登出时设置uuid为null
RangersAppLogModule.setUserUniqueId(null);

设置用户属性 #

profileSet #

设置用户属性，存在则覆盖，不存在则创建。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：设置用户属性，属性名为key，属性值为value
RangersAppLogModule.profileSet({"key": "value"});

profileSetOnce #

设置用户属性，存在则不设置，不存在则创建，适合首次相关的用户属性，比如首次访问时间等。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：设置用户属性，属性名为key_once，属性值为value_once
RangersAppLogModule.profileSetOnce({"key_once": "value_once"});

profileIncrement #

设置数值类型的属性，可进行累加。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：设置用户属性，属性名为key，属性值为1
RangersAppLogModule.profileIncrement({"key": 1});

profileAppend #

设置集合类型的用户属性，可持续向集合内添加。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：置用户属性，属性名为key，原本已有属性值，现添加属性值为value_append
RangersAppLogModule.profileAppend({"key": "value_append"});

profileUnset #

删除用户的属性。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：删除用户属性，属性名为key
RangersAppLogModule.profileUnset("key");

获取平台生成ID #

请注意 device_id 是火山生成的 id，不是原始设备 id。

import { NativeModules } from 'react-native';
const { RangersAppLogModule } = NativeModules;

// 示例：获取did
let didPromise = RangersAppLogModule.getDeviceID();
didPromise.then((deviceID) => {
    console.log(deviceID);
});

可以参考这个带全埋点Demo。注意：使用Demo时请将其中的app_id和上报域名更换成自己的。

ReactNavigationExample_带全埋点.zip

未知大小

React Native侧要求 #

版本对应关系：

//babel.config.js
plugins: ['rangers_applog_reactnative_plugin/plugins/babel-plugin-jsx-hook.js']

原生Android侧代码及要求 #

通过 Application 集成，或者通过 Lifecycle 集成，两种方法二选一即可。

通过 Application 集成 #

在 Application 文件（默认是 MainApplication.java）中，将继承的 Application 改为 RangersAppLogApplication：

import com.reactnativerangersapplogreactnativeplugin.RangersAppLogApplication;

public class MainApplication extends RangersAppLogApplication implements ReactApplication {
    // ...
}

通过 Lifecycle 集成 #

在 Application 文件（默认是 MainApplication.java）中，在 onCreate 钩子方法中，注册 RangersAppLogActivityLifecycle。
注意：如果选择通过 Lifecycle 集成，则当前Application不能继承 RangersAppLogApplication。

import com.reactnativerangersapplogreactnativeplugin.RangersAppLogActivityLifecycle;
// ...

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
      super.onCreate();
      registerActivityLifecycleCallbacks(new RangersAppLogActivityLifecycle());
    }
}

使用全埋点 #

启用全埋点 #

在入口文件 index.js 中启用全埋点：

import { autoTrack } from 'rangers_applog_reactnative_plugin';
// ...

AppRegistry.registerComponent(appName, () => App);
autoTrack.enable();

全埋点开关 #

全埋点默认关闭，可通过以下方法打开（入参为 true，或者不传）：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enable();

关闭全埋点：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enable(false);

pageview 开关 #

pageview 默认开启，可用以下方法开启（入参为 true，或者不传）

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageView();

关闭 pageview

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageView(false);

pageleave 开关 #

pageleave 默认关闭，可用以下方法开启（入参为 true，或者不传）

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageLeave();

关闭 pageleave

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageLeave(false);

click 开关 #

click 默认开启，可用以下方法开启（入参为 true，或者不传）

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableClick();

关闭 click

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableClick(false);

react navigation 开关 #

react navigation 默认开启，可用以下方法开启（入参为 true，或者不传）

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableReactNavigation();

关闭 react navigation，关闭后不再采集 react navigation 页面

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableReactNavigation(false);

相关配置（可选） #

自定义参数 #

可以配置一些全埋点上报时，携带的自定义参数：

• bindEvent：用于绑定 pageview 信息。在全埋点的 pv 事件触发后，所有通过 RangersAppLogModule.onEventV3 触发的事件，都会加上 page_key，page_manual_key 的事件属性。默认为 false。
• pageTitleProp： 用于设置自定义 title 的属性名（props key）。
• elementIdProp： 用于设置点击元素自定义 ID 的属性名（props key）。
• elementCustomProp：用于设置点击元素自定义参数的属性名（props key）。
• pages： 用于配置 RN 页面（通过 AppRegistry 注册的页面）的自定义参数，影响 pageview，pageleave 的埋点事件。
• reactNavigation： 用于配置 ReactNavigation 页面（通过 react navigation 注册的页面）的自定义参数，影响 pageview，pageleave 的埋点事件。

示例

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.config({
  bindEvent: false,
  pageTitleProp: 'rangers-app-log-title',
  elementIdProp: 'rangers-app-log-id',
   elementCustomProp: 'rangers-app-log-custom',
  pages: [
    {
      appKey: appName,
      pageID: 'app',
      pagePath: '/',
      ignore: false
    },
  ],
  reactNavigation: {
    combineApp: true,
    disableApp: true,
    screens: [
      {
        screenName: 'Home',
        pageID: 'navigationpage-home',
        pagePath: '/navigationpage/home',
        ignore: false
      },
    ]
  }
})

配置 RN 页面 #

• appKey：通过 AppRegistry 注册页面时，定义的 appKey，此为页面的唯一标识。
• pageID：在 pageview，pageleave 事件的 page_manual_key 属性会带上该字段。
• pagePath：在 pageview，pageleave 事件的 page_path 属性会带上该字段。
• ignore：在 pageview，pageleave 事件中，是否忽略该页面。如果设置为 true，则忽略该页面，refer page 中也不会有该页面。默认为 false。

示例

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.config({
  pages: [
    {
      appKey: appName,
      pageID: 'app',
      pagePath: '/',
      ignore: false
    },
  ],
  // ...
})

配置 ReactNavigation 页面 #

只有 react navigation 开关开启的情况下，才会使用以下配置：

• combineApp：是否将初始 screen 页面及它所属的 rn 页面视为同一个页面，共享 refer 信息。 为 true 时，初始 screen 页面的 refer 信息与它所属的 rn 页面相同。 为 false 时，初始 screen 页面的 refer 信息是它所属的 rn 页面。 默认为 true。
• disableApp：是否禁用 screen 所属 rn 页面的埋点。 为 true 时， 禁用 screen 所属 rn 页面的埋点，在 rn 页面同级的跳转链路中，使用 screen 页面信息代替 rn 页面。 为 false 时，screen 所属 rn 页面正常触发埋点。 默认为 true。
• screenName：通过 react navigation 注册页面时，为 screen 指定的 name，此为页面的唯一标识。
• pageID：在 pageview，pageleave 事件的 page_manual_key 属性会带上该字段。
• pagePath：在 pageview，pageleave 事件的 page_path 属性会带上该字段。
• ignore：在 pageview，pageleave 事件中，是否忽略该页面。如果设置为 true，则忽略该页面，refer page 中也不会有该页面。默认为 false。

示例

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.config({
  // ...
  reactNavigation: {
    combineApp: true,
    disableApp: true,
    screens: [
      {
        screenName: 'Home',
        pageID: 'navigationpage-home',
        pagePath: '/navigationpage/home',
        ignore: false
      },
    ]
  }
})

配置组件的自定义属性 #

配置页面自定义 title
在 pageview，pageleave 事件的 page_title 属性会带上 title 值。
设置属性后，title 会自动取组件的内容：

<Text rangers-app-log-title>App Page</Text>

也可以为该属性直接设置 title 值：

<Text rangers-app-log-title="App">App Page</Text>

如果页面内多个组件都设置了 title，会以最后加载的组件为准。
属性名默认为：rangers-app-log-title，若需要修改可参考上面自定义参数内容。
配置点击元素的自定义 ID
在 click 事件的 element_manual_key 属性会带上 title 值。

<TouchableOpacity rangers-app-log-id="页面1-确认" onPress={testPress}>
    <Text>确认</Text>
</TouchableOpacity>

属性名默认为：rangers-app-log-id，若需要修改可参考上面自定义参数内容。
配置点击元素的自定义参数
在 click 事件的 custom 属性会带上该值。

<TouchableOpacity rangers-app-log-custom={{mykey:"myvalue"}} onPress={testPress}>
    <Text>确认</Text>
</TouchableOpacity>

属性名默认为：rangers-app-log-custom，若需要修改可参考上面自定义参数内容。

设置页面的自定义参数 #

设置页面的自定义属性后，会在 pageview 事件的 page_custom 属性会带上该值
设置 RN 页面
通过 initialProperties 设置 RN 页面的自定义参数
iOS设置方式参考：

// 创建 RN 页面时，传入的 initialProperties，会放在 pv 埋点的 page_custom
NSDictionary *initialProperties = @{@"mykey": @"myvalue"};
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:[BridgeManager shared].bridge
                                                   moduleName:moduleName
                                            initialProperties:initialProperties];

Android设置方式参考：

@Overrideprotected ReactActivityDelegate createReactActivityDelegate() {
    return new ReactActivityDelegate(this, getMainComponentName()) {
        @Nullable@Overrideprotected Bundle getLaunchOptions() {
            Bundle initialProps = new Bundle();
            initialProps.putString("mykey", "myvalue");
            return initialProps;
        }
    };
}

设置 ReactNavigation 页面
通过 navigation 的 route.params 设置 ReactNavigation 页面的自定义参数

// 通过 navigation 跳转时，传入的参数会放在 pv 埋点的 page_custom
navigation.navigate('DetailScreen', { detailId: 12 });

支持圈选的版本要求：

圈选功能依赖：

1. React Native 全埋点功能，需要保证全埋点开启
2. iOS/Android 圈选功能，需要集成圈选模块，完成圈选配置

样例代码如下，在入口文件 index.js 中，需要在导入 react-native 库之前执行 initPicker 方法才能保证圈选成功（因圈选需要通过 devtools 注入，导入 react-native 库之后再执行会导致注入失败）。
注： 不需要使用圈选功能时，请移除 initPicker 方法，该方法可能会影响渲染效率

import { autoTrack } from '@dp/rangers_applog_reactnative_plugin';
autoTrack.initPicker();

import { AppRegistry } from 'react-native';
// register app root component
AppRegistry.registerComponent(appName, () => App);

autoTrack.enable();

之后按 ios/android 的圈选流程启动圈选，当进入 React Native 页面时，圈选页面的信息会自动变成 React Native 的页面 & 组件信息。