页面数据埋点统计方案

需要采集的数据

访问设备： navigator
环境信息（地理位置）： navigator.geolocation
会话信息：登录接口返回
代码信息：项目设置相关配置文件
访问页面信息： load、hashchange、history、visibilityChange事件
统计操作行为（track this button by an event）：click按钮编码、功能性
停留时间：当前页面是的时间戳减去进入上个页面的时间戳、load、hashchange、history、visibilityChange事件
前端性能：performance apis、timing
上报时间：轮询、webscoket、跳转前发送或最后一次不记录、下一次进入当前页从本地缓存发送
上报方式：ajax轮询、new Image.src ， navigator.sendBeacon("/log", analyticsData);

采集的数据方式

访问设备：
pc： navigator
移动端\微信： navigator、systemInfo

 deviceBrand：deviceFamily：deviceModel：deviceType：deviceOrientation：idfa：androidId：IMEI：screenHeight：screenWidth：osName：osVersion：browserName：navigator.appName  // 浏览名称browserVersion：navigator.appVersion // 浏览器版本userAgent：navigator.userAgent  //用户代理

环境信息(地理位置):
navigator.geolocation
会话信息:
登录接口返回会话信息或者从缓存cookie、localstorage中读取(ip、时间戳、sessionId、token、userId、identity、tag)
代码信息：
code_project项目、code_subproject子项目、code_version代码版本号、code_git_commit_id这些需要项目设置project_default.js内配置，相应接口或者注入到window全局对象、浏览器缓存
访问页面信息：
多页面：window.addEventListener(‘load’, function(){}) 发送时间戳
单页面：
hash模式：window.addEventListener(‘hashchange’, function(){}) 发送时间戳
history模式：监听相应事件，发送时间戳

页面关闭、浏览器tab切换：window.addEventListener(‘visibilityChange’, function(){})
前端性能：performance timing.js(timing.getTimes())
loadTime、// Total time from start to load
domReadyTime、// Time spent constructing the DOM tree
readyStart、// Time consumed preparing the new page
redirectTime、// Time spent during redirection
appcacheTime、// AppCache
unloadEventTime、// Time spent unloading documents
lookupDomainTime、// DNS query time
connectTime、// TCP connection time
requestTime、// Time spent during the request
initDomTreeTime、// Request to completion of the DOM loading
loadEventTime // Load event time
统计操作行为（track this button by an event）:
触发click事件的元素、属性、编码、功能、window.addEventListener(‘click’, function(){})、
document.addEventListener(‘click’, function(){}) 、具体按钮（一系列、单个）
页面停留时长：
当前页面的时间戳(performance.navigationStart)减去进入上个页面的时间戳(performance.navigationStart)、load(多页面、首次)、hashchange(单页面hash路由)、history、visibilityChange事件

history事件：

let _wr =  function (type) {  let orig = window.history[type]return  function () {let rv = orig.apply(this, arguments)let e = new Event(type.toLowerCase())e.arguments = argumentswindow.dispatchEvent(e)return rv}}
window.history.pushState = _wr('pushState')
window.history.replaceState = _wr('replaceState')
window.addEventListener('pushstate',  function (event) {})
window.addEventListener('replacestate',  function (event) {})

visibilityChange事件:

document.addEventListener('visibilitychange',  function (event) {  console.log(document.hidden, document.visibilityState)})

上报时间：跳转前发送或最后一次不记录、下一次进入当前页从本地缓存发送(当前时间戳)、写入本地缓存下次定时上报
上报方式：ajax轮询、new Image.src ， navigator.sendBeacon("/log", analyticsData);

页面数据埋点统计方案相关推荐

数据埋点统计页面使用时长
Android应用中的页面,也就Activity,Fragment两种.对于Activity,系统了全局的生命周期监听的方法,只需要在onResume中记录页面显示时的时间,在onPause中计算显示 ...
前端页面数据埋点、分析和参考
最近从松江图书馆中借了一本叫<指尖上行移动前端开发进阶之路>的书,该书分为5大章,此处只记录了其中的第4章. 书中写到在项目上线后,通过数据监控发现: 1. 一些之前觉得很好的创意,由于 ...
微信小程序开发之数据埋点统计
在开发过程中,有数据统计的需求,需要获取小程序当前页面和来源页面的数据,以及页面的停留时间在对小程序api进行了一番研究之后,发现获取这些数据其实并不难当前页面: let pages = getC ...
数据中台实战（一）：以B2B电商亿订为例，谈谈产品经理视角下的数据埋点
关注公众号:改变世界的产品经理,回复" 1 "获取10G产品经理学习资料. 笔者所在公司为富力环球商品贸易港,是富力集团旗下汇聚原创设计师品牌及时尚买手/采购商两大社群,通过亿订B ...
2021-11-03大数据学习日志——数据埋点+网络爬虫——后端开发入门
01_mini-web 本章节学习目标能够知道Web开发流程能够知道使用web应用程序处理客户端的动态资源请求操作能够知道路由列表的实现能够知道装饰器方式的添加路由能够知道logging日志 ...
关于数字化营销技术实现之【数据埋点】
1.如何实现数据埋点? 小程序数据埋点是指在小程序中收集用户行为数据和业务数据的一种技术手段,以便对用户行为和业务运营进行分析和优化.下面是一些实现小程序数据埋点的方法: 使用小程序统计分析工具:小程 ...
前端页面业务中的埋点统计数据
1.背景在H5的页面中有很多业务需要统计按钮的点击数与页面的打开数量统计以及客户是谁(多数是获取用户手机号),而统计数量的逻辑一般来说是在接口里进行以保证后台系统的查询,所以前端主要的方法便是用户点 ...
数据埋点方案和规范确定
本文为PMCAFF专栏作者速兔出品用户的行为分析是产品调整迭代,运营推广.精准营销等的基础,此类行为的一切均基于良好的数据采集方案.当下几乎所有互联网公司的数据源都是通过埋点方式获得基础的业务数据. ...
代码埋点、可视化埋点、无埋点几种数据埋点方案的分析报告
目录数据采集的核心问题一.埋点是什么二.为什么要埋点三.埋点有哪些方式四.各埋点方式优劣对比五.其他在这篇文章里面,我们会对数据采集的一些基本概念进行阐述,然后,会针对目前市面上新增的一 ...

页面数据埋点统计方案

页面数据埋点统计方案相关推荐

最新文章

热门文章