前端埋点pv,uv以及实现思路

   埋点就是在应用或系统中通过特定的流程收集一些信息，用来跟踪项目或系统使用的状况，后续用来进一步优化产品或是提供运营的数据支撑；

目前埋点实现方法可以分为三种类型：

手动埋点
在需要统计数据的地方插入代码，需要入侵业务代码，优点是数据统计比较精准有效，缺点是不能与业务代码分离，后期需求更新需要同步更新；
无埋点
无埋点并不是说不需要埋点，而是全部埋点，通过js脚本，收集想要收集的数据。通过定期上传记录文件，配合文件解析，解析出来我们想要的数据，并生成可视化报告供专业人员分析因此实现“无埋点”统计，无需在项目代码中插入，复用性高，无需跟随项目的改动而改动，但是传输数据多，无法定制，可能会增大服务器压力；
可视化埋点
通常是指用户通过可视化工具快速配置采集节点（圈点），在前端自动解析配置，并根据配置上传埋点数据，能够支持产品运营随时调整埋点，无需再走发版流程，直接把配置结果推入到前端，数据采集流程更简化，也更方便产品的迭代。

本次通过编写埋点sdk的形式来实现数据的收集，类比于百度统计的实现方式，记录一下过程中遇到的问题；首先插入一段代码引入js：

   (function () {var ma = document.createElement('script');ma.type = 'text/javascript';ma.async = true;ma.src = "/js/ma1.js";var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ma, s);})();

此处js文件是存在static目录下的。

整体分为三个阶段：
（一）埋点阶段
（二）数据收集阶段
（三）后端处理阶段

可以参考这篇文章的原理分析https://blog.csdn.net/lucky541788/article/details/103795942。

前两个阶段是由前端实现，下面是开发过程中前端遇到的问题及解决办法：

相对于比较特殊的路由页面跳转如nuxt-link，route-link，router.push等，跳转页面js脚本不会重新加载，所以需要在项目的守卫路由中添加一句代码用来执行sdk中的方法，一次来实现页面跳转并收集数据；
页面数据的传递时机，由于需要统计访问时间，所以在beforeunload方法中传到后台，该方法是在页面关闭或跳转之前执行的；
对于唯一设备id可以在sdk引入的时候设置一个cookie值，过期时间设置10年或更久，用来区分用户；
页面如果打开了但是没有访问，在浏览器里访问的是其他的页面，可以使用window的onblur和onfocus方法，页面离开执行onblur，将数据传回后台，进入页面再执行onfocus方法；
对于不同项目的跨域问题，可以通过生成Img标签来进行传参，如
var img = new Image(1, 1)；
var src = ‘http://xxxxxx?userName=’ + params;
img.src = src;

通过上面的问题分析，将数据的传输时间以及如何传输问题基本解决，接下来需要策划传输的每一个数据应该如何使用和应该统计到哪些指标：

pv
即用户浏览量，用户每次打开或者刷新页面该页面pv值就加1，通过后台接收到的数据统计访问该页面的次数；
uv
即独立访客数，一个电脑设备为一个访客，通过设置永久cookie来标识不同的设备，同一访客访问不同页面uv加一，一天内同一设备多次访问同一页面uv只加一；
跳出率
跳出率=访问一个页面的uv数 / uv总数；
页面平均访问时长
从页面进入的时候开始计时，到页面刷新或者关闭的时候停止计时，将时间传到后台，再统计页面访问了多少次，把所有时间相加除以次数，即可得到平均访问时间；
访问ip数
访问页面的局域网ip数，通过document.domain获取，不同的ip访问就加一，一天内同一ip访问多次只加一；
用户访问地址
通过搜狐的插件获取用户当前所在地及设备ip；
访问来源类型
来源类型可以分为三类：搜索引擎，外部链接、直接访问；通过document.referrer参数，若为空则是直接访问，再将常见的搜索引擎标识放入一个数组，当document.referrer有值时检索该值中有没有对应的搜索引擎，有来源就是搜索引擎，没有即为外部链接；
页面加载时长
window.performance.timing对象中的各个时间节点，通过loadEventEnd - fetchStart可以计算出页面加载时长；
浏览器类型
通过navigator.userAgent参数将访问的浏览器内核进行处理，得到访问的浏览器的名称；
浏览器和系统版本
navigator.appVersion包含浏览器和系统的版本；
电脑屏幕信息
window.screen对象中包含设备屏幕宽高，色深，分辨率。
地图热力图
通过用户地址统计各地区使用人数，在地图上用不同颜色渲染出来。

pv与uv与ip的区别：

    pv统计的是浏览量，即访问了就会加一，uv统计的是不同的访客数，若统一访客多次访问同一页面，则只算一次，而ip数统计的是访问网站的ip数，同一个ip一个网站只记一次；

对于统计页面中的点击事件形成热力图的想法，由于某些页面的响应式开发，布局在不同尺寸下会发生变化，通过埋点sdk统计准确性不高；

结论：通过将js脚本插入到项目中，从中获取用户信息，设备信息，操作信息，浏览器信息等数据，传入后台进行处理，其他业务数据需要在具体的项目中进行代码埋点，多种埋点方式结合起来才能对产品进行更加全面的分析与了解。

前端埋点pv,uv以及实现思路相关推荐

java统计 pv uv_统计网址的pv,uv（附带Spring定时器）
之前做了一个统计商铺的PV,UV值大体思路:每天将用户的访问信息放到明细表里,然后在第二天的凌晨将这些数据归总 PVUV表 4个字段:主键pk 用户IP(customer_ip) 访问时 ...
实现pv uv统计_聊聊前端监控（二）--行为监控的技术实现
上一篇梳理了前端监控的主要场景和类型,从本文开始,讨论下我知道的一些技术实现.前端黑科技层出不穷,个人眼界有限,尽量把了解到的实现方式都罗列出来,希望对大家有些启发,同时也欢迎流言讨论. 限于篇幅,按 ...
前端埋点方案设计思路
前端监控和前端埋点方案设计在线上项目中,需要统计产品中用户行为和使用情况,从而可以从用户和产品的角度去了解用户群体,从而升级和迭代产品,使其更加贴近用户.用户行为数据可以通过前端数据监控的方式获得, ...
java pv uv_前端数据收集（pv/uv）
所谓web,即使你我素未谋面,便知志趣相投:足不出户,亦知世界大. 01 - 什么是PV/UV 网站流量分析,是指在获得网站访问量基本数据的情况下对有关数据进行统计.分析,从中发现用户访问网站的规律, ...
前端监控和前端埋点方案设计--摘抄
一.为什么需要前端监控前端监控的目的是: 获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化的方向 . 前端监控可以分为三类:数据监控.性能监控和异常监控.下面我们来一一的 ...
前端埋点方法解析及优缺点分析
1.文档说明本文档是对前端埋点方案的梳理,整个文档会对现在主流方向的前端埋点方案进行分析整理.意在帮助产品经理和开发人员了解用户现实使用需求,为后期改进产品提供重要基础指标,优化用户体验的依据.文档 ...
前端监控和前端埋点方案设计
在线上项目中,需要统计产品中用户行为和使用情况,从而可以从用户和产品的角度去了解用户群体,从而升级和迭代产品,使其更加贴近用户.用户行为数据可以通过前端数据监控的方式获得,除此之外,前端还需要实现性能 ...
web前端埋点及数据上报
web前端埋点及数据上报简介前端埋点即在产品客户端获取用户行为和使用情况的一种监控方式.通过埋点可以获取到用户行为数据,借助这些数据,我们可以从用户角度出发,升级迭代产品,使其更加贴近用户使用习惯 ...
前端埋点设计/小程序+友盟埋点方案
埋点简介所谓埋点就是在应用中特定的流程收集一些信息,用来跟踪应用使用的状况,后续用来进一步优化产品或是提供运营的数据支撑,包括访问数(Visits),访客数(Visitor),停留时长(Time O ...

前端埋点pv,uv以及实现思路

前端埋点pv,uv以及实现思路相关推荐

最新文章

热门文章