H5 容器自动化埋点

使用 mPaaS 提供的 Nebula 容器加载 H5 页面时,Nebula 容器会自动统计页面的行为数据、加载性能,捕获异常报错等数据,方便您更好地跟踪 H5 页面加载时的各项数据。本文将引导您集成 Nebula 容器自动化埋点能力及查看埋点数据。

前置条件

集成 mPaaS 提供的 H5 容器自动化埋点功能,需满足以下两个条件:

  • 您已在 mPaaS 控制台 中创建了一个 App。

  • 您已完成 添加 SDK 步骤,客户端工程集成了 NebulaLogging.framework

操作步骤

初始化配置

  1. 要集成 Nebula 容器的自动埋点功能,需在容器初始化时启动 H5 埋点监控:

    // 监控委托,添加 H5 页面的自动化埋点
     NBLogConfigurationGet().shouldInjectSPMJS=YES;
     #ifdef DEBUG
     NBLogConfigurationGet().enableConsoleLog = YES;
     #endif
     [NBLogServiceGet() start];
     [[NBMonitor defaultMonitor] setDelegate:NBLogServiceGet()];
  2. 启动 H5 埋点监控后,使用 Nebula 容器加载 H5 页面,容器就会自动统计页面加载行为、性能及异常数据等。根据查看埋点数据的场景不同,分为以下两种方式:

    • 查看客户端日志:查看客户端本地的埋点数据,适用于应用开发阶段的问题排查。参见下文 查看客户端日志

    • 查看服务端日志:查看线上用户产生的真实埋点数据,适用于应用发布上线后,排查线上问题。参见下文 查看服务端日志

查看客户端日志

加载 H5 页面后,在 XCode 控制台搜索关键字 [h5log],即可查看页面加载相关的埋点数据的关键信息,如下图。

客户端日志

Xcode 控制台打出的 H5 容器埋点数据,只包含了以下关键信息:

SeedId

示例

含义

bizType

webapp

日志类型,写入本地日志文件的文件名。

seedId

H5_AL_SESSION_FROM_NATIVE

埋点的唯一标识,具体含义参见下文的 H5 容器埋点集

head

HD-VM

日志模型。可参考 性能埋点

params

https://www.baidu.com

当前页面的 URL。

currentTimestamp=1553072784000

自定义参数,如时间戳,页面加载状态。

-

自定义参数,如页面元素位置。

^url=https://www.baidu.com^referer=MPH5DemoVC^viewId=MPH5DemoVC^refviewId=MPHomeViewController^token=A994169ddd50640fa262dbc2dfebb2bb3^h5SessionToken=db4db9cfd83521aa2bc31a2e5a6df30e/td>

埋点信息:包括离线包 APPID、离线包版本号、当前 H5 页面加载的 URL、所在的 VC 类名、当前页面的 token 等。

formatter

header = "HD-VM"

同 head 字段说明。

若您需要查看 Xcode 控制台上某条日志的完整内容,可在沙盒中找到 Library/log 下以 bizType 开头的文件名,然后根据 seedId 关键字搜索查询。

image.png

查看服务端日志

若需要查看线上用户 H5 容器的埋点数据,可在 mPaaS 控制台通过 查询历史日志 进行查询。

服务端日志

H5 容器埋点集

H5 容器统计的自动化埋点信息,根据埋点数据的 seedID 作为唯一标识,按加载的 H5 页面方式不同,主要有以下三类:

  • 打开在线 URL 的相关埋点集

SeedId

含义

H5_AL_SESSION_FROM_NATIVE

容器已经启动。

H5_AL_PAGE_START

页面开始加载。

H5_AL_NETWORK_START

页面开始发起网络请求。

H5_OPEN_PAGE_FINISH

页面加载完成。

H5_AL_PAGE_APPEAR

页面首次出现。

H5_AL_JSAPI_SENDEVENT

页面调用 JSAPI。

H5_AL_JSAPI_NOTFOUND

页面调用 JSAPI 失败。

H5_TITLEBAR_BACK_BT

单击导航栏返回按钮。

H5_PAGE_PERFORMANCE

统计页面加载的性能。

  • 打开离线包页面的相关埋点集

SeedId

含义

H5_APP_REQUEST

请求离线包信息。

H5_APP_LOAD_DATASOURCE

加载离线包信息。

H5_AL_SESSION_FROM_NATIVE

容器已经启动。

H5_APP_DOWNLOAD

离线包下载。

H5_APP_UNZIP

离线包解压。

H5_APP_POOL

包管理信息池操作 (包含池内信息的增、删、改)。

H5_APP_VERIFY

离线包验签。

H5_AL_SESSION_VERIFYTAR_FAIL

离线包验签失败。

H5_AL_PAGE_START

页面开始加载。

H5_AL_SESSION_MAP_SUCCESS

加载本地离线包成功。

H5_AL_SESSION_FALLBACK

加载本地离线包失败,走 fallback 请求在线页面。

H5_OPEN_PAGE_FINISH

页面加载完成。

H5_AL_PAGE_APPEAR

页面首次出现。

  • 异常埋点

seedId

含义

H5_AL_NETWORK_PERFORMANCE_ERROR

资源请求异常。

H5_PAGE_ABNORMAL

页面异常。

H5_AL_PAGE_JSERROR

JS 异常。

H5_AL_JSAPI_RESULT_ERROR

JSAPI 异常。