广告位

蚂蚁云服务器采集移动端WebView和WGT小程序会话重放最佳实践

频道： 日期： 浏览：5

云服务器挂机宝

移动端 Session Replay 工作原理简介

移动端 Session Replay 通过逐帧控件扫描的方式，对页面组件以及用户手势操作进行记录。为了节约开销会在新页面录制全量数据，随后同一页面会根据算法仅录制前后帧数的差量数据。录制的数据最终在观测云后端重绘，按照时间轴播放，从而达到回放的效果。

移动端原生页面的会话重放采集可以参考官方文档；此最佳实践主要介绍移动端嵌入了 WebView 页面和 WGT 小程序时，如何采集这些页面的会话重放数据。

WGT 小程序接入实践

WGT 小程序是指用 uni-app 框架写好的小程序前端代码、页面、样式、脚本等打包成一个压缩文件，扩展名 .wgt，相当于小程序的安装包，原生 App 集成 uni 小程序 SDK 后，可动态加载并运行 .wgt 包，实现在自家 App 里跑小程序的效果。

云服务器 怎么样

前置条件

Android APP：

确保您已设置并初始化 FTSdk RUM 配置，并开启 View 的监控采集Android Session Replay 目前为 alpha 功能，需要使用 ft-sdk:1.7.0 以上的版本建议使用文档最上方 badge 显示的版本，另外通过下面命令可找到发布的可用 alpha 版本, alpha 版本更新日志分别在 ft-sdk、ft-ft-session-replay、ft-session-replay-material

IOS APP：

确保您已设置并初始化 FTMobileSDK RUM 配置，并开启 View 的监控采集iOS Session Replay 目前为 alpha 功能，版本支持：SDK.Version >= 1.6.0建议使用文档最上方 badge 显示的版本，另外通过下面命令可找到发布的可用 alpha 版本，alpha 版本更新日志在这里podtrunkinfoFTMobileSDK | grep alpha

具体步骤

1、引入原生插件

将附件解压后，复制【nativePlugins】文件夹到项目的根路径，再选中 manifest.json 中的【安卓/IOS 原生插件配置】点击【选择本地插件】，选中【Guance UniPlugin】点击确定。

2、配置数据池信息

在 App.vue 中，引入【GCUniPlugin-MobileAgent】插件，并借助初始化数据池配置，参考如下：

// ifdef APP-PLUSconstftModule = uni.requireNativePlugin("GCUniPlugin-MobileAgent");// endifexportdefault{onLaunch:()=>{// ifdef APP-PLUSftModule.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插件【⚠️超级重要】importgcAgentfrom./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接口调用示例constres =awaitthis.$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 scriptvarscript =document.createElement(script); script.src =https://static.guance.com/browser-sdk/v3/dataflux-rum.js; script.onload =function(){// 这里需要业务侧修改自定义wgt_name、自定义wgt_idDATAFLUX_RUM.setGlobalContextProperty(wgt_id, ); DATAFLUX_RUM.setGlobalContextProperty(wgt_name, ); 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 =1d.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、生产环境：prodversion:"1.0.0",service:"browser",sessionSampleRate:100,sessionReplaySampleRate:100,compressIntakeRequests:true,trackInteractions:true,traceType:"ddtrace",allowedTracingOrigins: [/.*/], }); DATAFLUX_RUM.setGlobalContextProperty(wgt_id,<自定义wgt_id>);// 自定义wgt_idDATAFLUX_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} )

关键词：