🚩 前端开发,埋点数据分析...

🚩 前言

今日话题,我们来唠唠"埋点"数据分析问题。

埋点在现实当中,太多地方需要用到了,比如说,我们做一个电商网站,我们希望看到用户停留在某个商品停留时间用户下单以及转化的一个整个过程的数据,这个商品pv,uv等等一些数据信息。到时时刻刻,以及最后帮助我们一步步去分析解读,为什么这个商品的pvuv转化率提高或者降低,哪里好哪里不好的一个问题,更细致地去拆解到位,这就是我们需要埋点这个东西的初衷和目的。

⭐️ 埋点

合理全面的埋点是,对产品数据分析的基础,是对用户行为的分析和监控,对活动效果的统计和加以调整的依据。

💣 埋雷

相反,如果是不合理的庞大的冗余的设置过多量级太大的埋点,有可能会导致要回传的信息太多,甚至有可能导致整个产品或服务器崩溃的情况。如果分析不够,匆匆上线,中途加上的埋点,过一段时间想起来又补某一个点位的埋点,导致前面积累的珍贵的数据丢失,那么这种埋点有可能就是雷点


🚩 定义

埋点就是所谓的事件追踪,数据分析,这8个字既是定义,也是作用的总结。

主要是针对特定用户特定行为或者事件进行捕获处理发送的相关技术,以及实施过程。

🚩 设计

💻 代码埋点

  • 常见埋点设计:前端埋点后端埋点
  • 常见埋点事件: 页面停留pv交互事件逻辑事件错误警告
事件 说明
页面停留 记录在该页面停留时长
pv 同一个用户访问该页面的次数
交互事件 按钮点击、点赞、收藏、双击等
逻辑事件 账号登录、页面跳转
错误警告事件 全局错误、局部错误、接口请求出错日志等等

前端

一些免费的埋点网站,加一段js,不用我们加接口。比如说,很常见的前端埋点统计->(百度统计、友盟统计、阿里的SPM埋点等等)。

还有利用beacon API来做性能监控异常日志记录用户行为跟踪数据收集,代码如下:

kotlin 复制代码
const data = {
    ... // 需要收集以及发送的数据
}
navigator.sendBeacon(`url`, data)

百度统计:

再不济,我们自己写,无非就是写一些统计代码放在js或者app里面进行上报用户的浏览、点击等等一些事件。

页面事件 : 统计用户在某些页面上停留的时长。
点击事件 : 用户点击按钮请求接口计数一次,传用户信息以及次数到数据库。
曝光事件: 用户每次成功打开、加载、刷新一次页面,计算一次曝光,统计uv、pv等数据。

后端

后端埋点就是一些通过数据库sql语句,去算一些东西;或者写一些按约定的东西在后端服务请求中,然后当用户请求接口时,触发埋点代码。

一般我们开发中遇到的是各种应用上的埋点技术。通过技术手段【通常是在应用中(网站、客户端、小程序等等)埋进去代码】用户无感知的情况下,进行点击捕获这么一个操作。

原理

📹 硬件埋点

当然现实公司工厂的管理也会用到硬件埋点,比如摄像头

简单举个例子:
如果在工厂的门口的一条路,一个入口和一个出口的地方,分别放两个摄像头。
这个摄像头就会拍到什么时间点,有谁,经过了这个入口或者出口的点位,然后工厂就可以通过这个摄像头的数据,得到一些结论。
比如某时间段谁谁待的时长,谁在某个时间点进来某个时间点出来等等一些东西。

🚩 作用

  • 🔴 精准数据分析
  • 🔴 精细化客户运营
  • 🔴 改善产品体验
  • 🔴 提高渠道转化

最后,结合一些现下人工智能、大数据、互联网、物联网等等一些技术应用的快速普及,甚至爆发性发展。数据的价值是弥足珍贵的,数据成为企业的关键驱动力。

那么通过埋点收集和分析数据,各个行业可以得以优化产品体验、提供个性化服务、以及精准用户画像。无疑,优秀的埋点需求会让企业产品走得更远更久......

☎️ 希望对大家有所帮助,如有错误,望不吝赐教,欢迎评论区留言互相学习。感谢阅读,祝您开发有乐趣。

相关推荐
霸气小男几秒前
react + antDesign封装图片预览组件(支持多张图片)
前端·react.js
susu10830189111 分钟前
前端css样式覆盖
前端·css
学习路上的小刘2 分钟前
vue h5 蓝牙连接 webBluetooth API
前端·javascript·vue.js
&白帝&3 分钟前
vue3常用的组件间通信
前端·javascript·vue.js
小白小白从不日白14 分钟前
react 组件通讯
前端·react.js
Redstone Monstrosity31 分钟前
字节二面
前端·面试
东方翱翔38 分钟前
CSS的三种基本选择器
前端·css
Fan_web1 小时前
JavaScript高级——闭包应用-自定义js模块
开发语言·前端·javascript·css·html
yanglamei19621 小时前
基于GIKT深度知识追踪模型的习题推荐系统源代码+数据库+使用说明,后端采用flask,前端采用vue
前端·数据库·flask
千穹凌帝1 小时前
SpinalHDL之结构(二)
开发语言·前端·fpga开发