React Native 全埋点

1.1 JS 代码

支持全埋点的最低版本要求：

• react-native >= 0.62.0

• react-navigation >= 6.0.0

• rangers_applog_reactnative_plugin >= 0.2.0

react-navigation 目前仅支持 navigators：

• Stack

• Native Stack

• Bottom Tabs

注：若混合使用其他未支持的 navigator，可能影响全埋点采集

npm install rangers_applog_reactnative_plugin

1.2 Android 代码

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

1.2.1 通过 Application 集成

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

import com.reactnativerangersapplogreactnativeplugin.RangersAppLogApplication;

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

1.2.2 通过 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());
    }
}

2.1 启用全埋点

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

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

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

2.2 全埋点开关

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

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enable();

关闭全埋点：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enable(false);

2.3 pageview 开关

pageview 默认开启，可用以下方法关闭：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageView(false);

开启 pageview：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageView();

2.4 pageleave 开关

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

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageLeave();

关闭 pageleave：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enablePageLeave(false);

2.5 click 开关

click 默认开启，可用以下方法关闭：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableClick(false);

开启 click：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableClick();

2.5 react navigation 开关

react navigation 默认开启，可用以下方法关闭：
关闭后不再采集 react navigation 页面。

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableReactNavigation(false);

开启 react navigation：

import { autoTrack } from 'rangers_applog_reactnative_plugin';

autoTrack.enableReactNavigation();

3.1 示例

可以配置一些全埋点上报时，携带的自定义参数：
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
      },
    ]
  }
})

3.2 配置 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
    },
  ],
  ...
})

3.3 配置 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
      },
    ]
  }
})

3.4 配置组件的自定义属性

3.4.1 配置页面自定义 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，若需要修改可参考 3.1 节。

3.4.2 配置点击元素的自定义 ID

在 click 事件的 element_manual_key 属性会带上 title 值。

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

属性名默认为：rangers-app-log-id，若需要修改可参考 3.1 节。

3.4.3 配置点击元素的自定义参数

在 click 事件的 custom 属性会带上该值。

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

属性名默认为：rangers-app-log-custom，若需要修改可参考 3.1 节。

3.5 设置页面的自定义参数

设置页面的自定义属性后，会在 pageview 事件的 page_custom 属性会带上该值

3.5.1 设置 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;
        }
    };
}

3.5.2 设置 ReactNavigation 页面

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

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

4.1 启用圈选

支持圈选的版本要求：

• react-native < 0.69.0

• rangers_applog_reactnative_plugin >= 0.2.4

• ios sdk >= 6.14.1

• android sdk >= 6.14.1

圈选功能依赖：

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 的页面 & 组件信息。