跳转至

WebView 页面接入

按 配置 App → 初始化 Web 页面 → 验证数据 完成接入。已经完成 App 侧配置的项目,可直接从 页面初始化 开始。

1. 配置 App

先按宿主平台完成 SDK、RUM 和 WebView Bridge 配置,并允许目标页面的 host 使用 Bridge:

宿主平台 App 侧配置
Android WebView 监测
iOS WebView 数据监测
Flutter WebView 数据监测
React Native WebView 数据监测
HarmonyOS WebView 数据监测
UniApp WebView 数据监测

完成后,继续下面的页面初始化。

2. 初始化 Web 页面

按页面的使用范围选择一种配置。页面已集成 Web SDK 时,复用现有加载方式,只保留一次初始化。

页面使用范围 初始化方式
需要在浏览器中独立采集,或同时运行于浏览器与 App WebView 常规集成(推荐)
仅在 App 内使用,数据全部交由 App SDK 接管 仅 App 内嵌页面

常规集成(推荐)

已有 Web SDK 初始化配置的页面可继续使用现有配置;首次接入按 Web 手动接入 准备上报配置,再选择 NPM 或 CDN 加载 SDK。

页面在浏览器中运行时按 Web SDK 配置独立上报;在 App WebView 中运行且 Bridge 生效时,RUM 数据通过 FTWebViewJavascriptBridge 交由 App SDK 接管。完成初始化后,继续 验证数据。

仅 App 内嵌页面(特殊场景)

此方式要求宿主在页面初始化前启用 Bridge,并允许当前页面使用。Bridge 模式会自动设置 applicationId,无需单独创建 Web 应用。

HTTP/HTTPS 页面最小初始化示例

下例包含 SDK 加载和 RUM 初始化,可用于尚未接入 Web SDK 的页面:

<script src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"></script>
<script>
  if (window.DATAFLUX_RUM) {
    window.DATAFLUX_RUM.init({
      // 满足初始化校验;RUM 数据通过原生 Bridge 上报。
      datakitOrigin: window.location.origin,
    })
  }
</script>

完成后,继续 验证数据。

3. 验证数据

  1. 在 App 中打开已接入的 WebView 页面,触发页面访问、点击或网络请求。
  2. 在用户访问监测中选择对应的 App 应用,确认收到 WebView 页面的 RUM 数据。Bridge 模式由 App SDK 上报,不要求浏览器 Network 中出现 /v1/write/rum 请求。

未收到数据时,先确认 Web SDK 已加载、App RUM 已初始化,以及页面初始化时 Bridge 已可用且允许当前 host。平台配置与排查入口见 App 侧配置。

如果页面也在普通浏览器中独立运行,浏览器场景按 Web 验证接入 检查。

可选:会话重放

RUM 数据验证通过后,按宿主平台查看会话重放配置:

宿主平台 配置入口
Android WebView Session Replay
iOS WebView Session Replay
Flutter 会话重放初始化
React Native 会话重放初始化
UniApp 会话重放初始化

Android 和 iOS 的 WebView 专节包含页面录制的开启方式;跨端框架完成会话重放初始化后,页面录制方式参考 Web 会话重放。支持范围与参数说明以各平台文档为准。

文档评价

文档内容是否对您有帮助?