移动端 Session Replay 工作原理简介
移动端 Session Replay 通过逐帧控件扫描的方式，对页面组件以及用户手势操作进行记录。为了节约开销会在新页面录制全量数据，随后同一页面会根据算法仅录制前后帧数的差量数据。录制的数据最终在观测云后端重绘，按照时间轴播放，从而达到回放的效果。
移动端原生页面的会话重放采集可以参考官方文档；此最佳实践主要介绍移动端嵌入了 WebView 页面和 WGT 小程序时，如何采集这些页面的会话重放数据。
WGT 小程序接入实践
WGT 小程序是指用 uni-app 框架写好的小程序前端代码、页面、样式、脚本等打包成一个压缩文件，扩展名 .wgt，相当于小程序的“安装包”，原生 App 集成 uni 小程序 SDK 后，可动态加载并运行 .wgt 包，实现“在自家 App 里跑小程序”的效果。
前置条件
Android APP：
IOS APP：
确保您已设置并初始化 FTMobileSDK RUM 配置，并开启 View 的监控采集
iOS Session Replay 目前为 alpha 功能，版本支持：SDK.Version >= 1.6.0
建议使用文档最上方 badge 显示的版本，另外通过下面命令可找到发布的可用 alpha 版本，alpha 版本更新日志在这里
pod trunk info FTMobileSDK | grep alpha
复制代码
具体步骤
1、引入原生插件
将附件解压后，复制【nativePlugins】文件夹到项目的根路径，再选中 manifest.json 中的【安卓/IOS 原生插件配置】点击【选择本地插件】，选中【Guance UniPlugin】点击确定。
2、配置数据池信息
在 App.vue 中，引入【GCUniPlugin-MobileAgent】插件，并借助初始化数据池配置，参考如下：
// #ifdef APP-PLUSconst ftModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");// #endif
export default { onLaunch: () => {
// #ifdef APP-PLUS ftModule.appendBridgeContext({ 'wgt_id': '', // 可自定义wgt_id，方便后续区分是原生app数据还是某wgt小程序 'wgt_name': 'xxxxx', // 可自定义wgt_name，如wgt应用名称 }); // #endif
}}
复制代码
3、错误信息采集
在 main.js 引入【gcErrorTracking】插件，并借助插件，上报错误日志信息。
// #ifdef APP-PLUSimport {gcErrorTracking} from '@/mixins/GCErrorTracking.js';
gcErrorTracking?.startTracking();// #endif
复制代码
4、接口请求监控
在系统引入 gcAgent-2.x.x 插件，并配置 requestOb:true，在执行接口请求的地方，使用 gcAgent.request 调用接口，即可完成 API 请求监控任务。
// 引入gcAgent插件【⚠️超级重要】import gcAgent from './plugins/gcAgent-2.0.0.esm.js';
// 开启API请求监控【⚠️超级重要】gcAgent.requestOb = true;
// 配置请求的目标服务器地址信息，也可以在url内写完整的服务器地址信息gcAgent.baseURL = 'http://xxx.xxx.xxx/xxx';
// Vue2挂载到全局配置示例Vue.prototype.$gcAgent = gcAgent;
// Vue3挂载到全局配置示例app.config.globalProperties.$gcAgent = gcAgent;
// API接口调用示例const res = await this.$gcAgent.request({ url: 'xxx/xxx/xx', method: "get", data: { code: "xxxxx" }});
复制代码
5、页面信息采集
在 main.js 引入【gcErrorTracking】插件，并借助插件，上报页面错误日志信息。
// #ifdef APP-PLUSimport {gcViewTracking} from '@/mixins/GCViewTracking.js'// 开启 View ⾃动采集gcViewTracking.startTracking();// 注⼊ web js 示例const jsCode = ` // Dynamically create and load external script var script = document.createElement('script'); script.src = 'https://static.guance.com/browser-sdk/v3/dataflux-rum.js'; script.onload = function() { // 这里需要业务侧修改自定义wgt_name、自定义wgt_id DATAFLUX_RUM.setGlobalContextProperty('wgt_id', <wgtID>); DATAFLUX_RUM.setGlobalContextProperty('wgt_name', <wgt名称>); DATAFLUX_RUM.init({ applicationId: 'appid',// 登录观测云获取 site: 'https://xxx/dataway/',// 登录观测云获取 clientToken: '80xxxxxxxxxxxxxxxxxxxde', // 登录观测云获取 env: "test", version: "1.0.0", service: "browser", sessionSampleRate: 0, sessionReplaySampleRate: 0, compressIntakeRequests: true, trackInteractions: true, traceType: "ddtrace" }); window.DATAFLUX_RUM.startSessionReplayRecording();};document.head.appendChild(script);`;gcViewTracking.evalSessionReplayJS(jsCode);// #endif
复制代码
结果展示
正常将原生 APP 和 wgt 小程序的数据采集，并通过视频的方式回放用户操作情况。
也可以通过 wgt_id 筛选具体某个 wgt 小程序的数据进行分析。
WebView 接入实践
WebView 是操作系统或运行时环境提供的“内嵌浏览器”组件，允许原生 App 在自己的窗口里直接渲染并运行 HTML/CSS/JavaScript 网页内容，而无需跳转到外部浏览器。它既是“网页容器”，也是“JS-原生桥梁”。
此实践，也是以 uni-app 框架打包的 H5 为例，通过设置 wgt_id、wgt_name 作为标签化处理。
具体步骤
1、创建 web 应用
登录观测云，在「用户访问监测」中新建一个 Web 应用，获取 js 配置信息。
2、初始化 webview 配置
在 index.html 中添加如下示例代码，标红的数据，参考上一步对应的数据值。
<script> ;(function (h, o, u, n, d) { h = h[d] = h[d] || { q: [], onReady: function (c) { h.q.push(c) }, } d = o.createElement(u) d.async = 1 d.src = n n = o.getElementsByTagName(u)[0] n.parentNode.insertBefore(d, n)})(window, document, "script", "https://static.guance.com/browser-sdk/v3/dataflux-rum.js", "DATAFLUX_RUM") DATAFLUX_RUM.onReady(function () { DATAFLUX_RUM.init({ applicationId: "<应用ID>", // 上面步骤中的应用ID值 datakitOrigin: "https://xxx.com/datakit", env: "test", // 建议测试环境：test、本地开发环境：dev、生产环境：prod version: "1.0.0", service: "browser", sessionSampleRate: 100, sessionReplaySampleRate: 100, compressIntakeRequests: true, trackInteractions: true, traceType: "ddtrace", allowedTracingOrigins: [/.*/], }); DATAFLUX_RUM.setGlobalContextProperty('wgt_id', '<自定义wgt_id>'); // 自定义wgt_id DATAFLUX_RUM.setGlobalContextProperty('wgt_name', '<自定义wgt_name>'); // 自定义wgt_name}) window.addEventListener( "DOMContentLoaded", function () { window.DATAFLUX_RUM.onReady(function () { window.DATAFLUX_RUM && window.DATAFLUX_RUM.startSessionReplayRecording() })}, {once: true} )</script>
复制代码
结果展示
正常将 webview 的数据采集和回放。
也支持按 wgt_id 筛选对应 webview 数据进行分析。
评论