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

🚩 前言

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

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

⭐️ 埋点

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

💣 埋雷

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


🚩 定义

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

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

🚩 设计

💻 代码埋点

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

前端

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

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

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

百度统计:

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

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

后端

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

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

原理

📹 硬件埋点

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

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

🚩 作用

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

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

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

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

相关推荐
摆烂工程师5 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭6 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码14 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger19 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话20 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时20 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳20 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
前端小巷子22 分钟前
深入解析 iframe
前端
WEI_Gaot23 分钟前
ES6 模板字符串
前端·javascript
前端大白话23 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架