首页 > 其他分享 >前端埋点、pv/uv统计、前端监控

前端埋点、pv/uv统计、前端监控

时间:2023-06-28 13:56:36浏览次数:43  
标签:pv 前端 uv 监控 埋点 页面

1. pv/uv统计

pv: 页面重复浏览量

统计方式,多页面应用通常在页面load事件,单页应用通常在页面路由中

uv: 页面独立访客浏览量

统计方式,pv统计的基础上,添加唯一标识,可以是IP地址,用户浏览器localStorage存储的uuid等。

IP地址存在局域网内的共享一个ip、代理、动态ip等误差

uuid存在用户删除localStorage等,需权衡选取,uuid的准确度更高

2. 前端埋点

无侵入式的埋点方式,就是理由冒泡,在dom层级挂载 track-key,记录上报参数,在document层级监听事件,截获埋点参数,触发上报

vue框架,可以使用 v-track 这个库

react框架,可以使用 react-tracking 或者 react-decorator-track

3. 上报埋点的方式

1. gif图get请求上报,首选,get请求,数据量小,支持跨域,无阻塞(new Image无需append到body即可发送请求)

2. img beacon上报,次之,post请求,数据量大,需后端支持跨域

3. ajax上报,最次,需后端支持跨域

埋点库封装可参考 前端埋点sdk封装

4. 前端监控

监控平台可使用

Sentry:一个开源的前端错误监控工具,可以捕获和报告 JavaScript 和前端框架的错误和异常。它提供详细的错误信息和堆栈跟踪,帮助开发人员快速定位和解决问题。

前端要封装监控库,收集监控信息

 

标签:pv,前端,uv,监控,埋点,页面
From: https://www.cnblogs.com/mengff/p/17511197.html

相关文章

  • 如何将mp4文件解复用并且解码为单独的.yuv图像序列以及.pcm音频采样数据?
    一.初始化解复用器在音视频的解复用的过程中,有一个非常重要的结构体AVFormatContext,即输入文件的上下文句柄结构,代表当前打开的输入文件或流。我们可以将输入文件的路径以及AVFormatContext**format_ctx传入函数avformat_open_input(),就可以打开对应的音视频文件或流。接......
  • 前端Vue自定义手机号文本格式化组件手机号码文本转星号
    前端Vue自定义手机号文本格式化组件,下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13231效果图如下:cc-format-phone使用方法<!--phone:手机号isStar:是否转星号--><cc-format-phone:phone="":isStar="false"></cc-format-phone>......
  • 前端Vue自定义微信支付弹框dialog alert popup
    前端Vue自定义微信支付弹框dialogalertpopup, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13245效果图如下:实现代码如下:cc-payDialog使用方法<!--:money:支付金额 show:是否显示@cancel:取消 @success:确认支付--><cc-payDia......
  • 前端自适应写法--媒体查询
    自适应一般什么rem,vw,vh这些单位注意一下。还有就是一些bootStrap什么的。在这里主要写一下媒体查询的方式。使用CSS中的媒体查询来根据不同的屏幕尺寸应用不同的样式。以下是如何使用媒体查询分别为320px-480px范围内、768px-1024px范围内和大于1024px的屏幕尺寸编写CSS样式:/*......
  • IPv4数据报文
    一、介绍     ......
  • 代购源码,淘宝代购系统源码,代购程序,代购系统源码PHP前端源码参数说明
    代购业务场景:代购业务近年兴起的一种购物模式,是帮国外客户购买中国商品。主要通过外贸代购模式,把淘宝、天猫等电商平台的全站商品通过API接入到你的网站上,瞬间就可以架设一个有数亿产品的大型网上商城,而且可以把这些中文的商品全部自动翻译成各国语言,能让国外客户看懂,直接在网站......
  • 第184期:放心前端死不了,也不会消失
    封面图总有刁民想害朕。不知道是哪个居心叵测之人在网上散播谣言,说前端的日子没两天了。我很纳闷:一个干前端的怎么就这么期盼着这个行业完蛋?写个文章,题目要不就是什么前端已死,要么就是前端没了,为了点所谓的点赞也真是服了。搞技术就好好搞技术,写文章就好好写文章,非得整个这么吓人的......
  • 前端解决跨域
    重新整理了下Vue的接口去跨域的事,其实就两个地方实际生效,其他地方乱写端口什么的反倒是阻碍了。这边展示Vue3+Vite的例子://写在vite.config里server:{port:81,//定义前端程序使用的端口disableHostCheck:true,proxy:{'api':{tar......
  • 了解微前端
    什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化web应用的技术手段及方法策略。微前端(Micro-Frontends)是一种类似于微服务的架构,它将微服务的理念应用于浏览器端,即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。微前端架构旨......
  • 前端项目部署到nginx
    前端项目部署到nginx配置好本地的nodejs环境切换到前端项目所在的文件目录以命令行的方式运行npmrunbuild命令命令执行成功会生成dist文件夹,将文件夹中的内容压缩上传到nginx_html数据卷对应的目录下执行解压命令unzipdist.zip删除压缩包rm-rfdist.zip即可访问nginx......