自定义 View¶

RUM 浏览器 SDK 默认在用户访问新页面或单页应用 URL 变化时自动创建 View。 需要由业务控制 View 边界、名称或 URL 时，可以开启手动 View。

开启手动 View¶

初始化时设置 trackViewsManually: true：

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: "<APPLICATION_ID>",
      site: "<PUBLIC_OPENWAY_URL>",
      clientToken: "<CLIENT_TOKEN>",
      trackViewsManually: true,
    })
</script>

开启后，SDK 不再根据浏览器 URL 自动创建 View。应用必须在首个页面和每次业务页面 切换时调用 startView()。

启动 View¶

只指定名称：

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView({
    name: "product-detail",
  })

从 SDK 3.3.6 开始，可以同时指定 View URL：

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView({
    name: "/products/:id",
    url: "/products/42?source=campaign",
    context: {
      page_group: "product",
    },
  })

url 可以是绝对 URL 或相对于当前页面的 URL。SDK 使用该值生成 View 的 url、url_path 和 query 上下文；无法解析时回退到浏览器当前 URL。

startView() 支持以下参数：

也可以使用字符串简写：

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView("product-detail")

框架 Router¶

React、Vue、Angular、Next.js 和 Nuxt 应用建议使用 前端框架插件。Router 插件会自动接管手动 View，并在 成功提交路由后调用 startView()。

不要同时使用 Router 插件和业务代码中的 startView() 跟踪同一次路由变化， 否则会生成重复 View。

注意事项¶

1. 开启 trackViewsManually 后，首个 View 也需要由应用启动。
2. View 应在对应业务页面开始展示时启动，避免把资源、错误和行为归入前一个 View。
3. View 名称应使用路由模板或稳定业务名称，不要直接使用用户 ID、订单号等高基数值。
4. 单独调用 startView() 不会触发页面跳转，只会切换 RUM View 上下文。