前端页面数据埋点、分析和参考

简介: 前端页面数据埋点、分析和参考

最近从松江图书馆中借了一本叫《指尖上行 移动前端开发进阶之路》的书,该书分为5大章,此处只记录了其中的第4章。

书中写到在项目上线后,通过数据监控发现:

1. 一些之前觉得很好的创意,由于资源和加载量太大,导致用户在Loading阶段大量蹦失。

2. 一些很出色的页面设计,由于没有突出重要按钮,导致转化率很低。

3. 一些动画效果绚丽的互动页面,反而转化率比同样功能的常规页面低很低。

4. 一些费了很低精力和资源做出来的页面,由于缺乏推广,造成访问量极少。

我们需要对页面进行各种数据埋点,从数据的角度研究需求的实际效果、用户的实际行为和后续的改进措施。


一、埋点


1)PV和UV

1. PV:Page View,页面访问次数。

2. UV:Unique Visitor,页面独立的访问次数,通过Cookie区分不同的人。

2)关键转化率

转化率用来衡量一个时间段内,特定的用户行为量和页面流量的比率,页面关键的数据信息点都不一样,但可以总结为“某个按钮的点击率”。

3)页面用户行为

除了常规的按钮点击、每屏的触达率、每屏的回翻率及每屏的停留时长等外,还会有带动画的图片点击和摇晃手机的行为等。

4)腾讯云分析

基础功能包括:实时数据、关键数据、运营商、客户端信息、访客画像、访客深度、地域信息、页面排行、外部链接、入口页面及离开页面等。

高级功能包括:渠道效果分析和自定义事件统计。


二、数据分析


1)转化率

微信中右上角的分享除以页面浏览量,计算出页面分享率。

领取奖励的按钮的点击数除以页面浏览量,计算出的就是领奖按钮的点击率。

2)多页面之间的联系

每个页面之间肯定是有联系的,找到联系点,就可以研究用户体验的流程,还可以看出体验流程是否完善,是否会在某个节点突然大量的流失用户。

3)多项目之间的联系

研究多个项目之间的数据差异,可以为下次的宣传页面找到更适合的设计方式。

找到多个项目之间的共同点,例如在页面中放一个下载游戏或拉起游戏的按钮,对这个按钮的数据进行收集和分析。

单看数据难以找到数据之间微妙的联系,可以利用图表,如折线图、柱形图、饼图和散点图等,进行分析和研究。


三、数据参考


1)资源投放数据参考

1. 中午12点左右和晚上10点左右是页面访问高峰期,这两个时间可能是吃饭和睡觉前。

2. 通过一波资源推广的移动页面,其访问热度往往持续两天左右。

3. 长期、固定位置的资源投放可以延长移动页面生命周期。

2)H5用户行为数据参考

1. 用户随着页面层级的加深而不断流失,流失率在前几页最高。

2. 按钮的点击量受页面层级影响。

3. 输入行为或者复杂交互行为会导致用户流失。

4. 热门对象会带来更多关注,例如世界杯、奥运会等。

5. 用户可能会忽略页面提示直接开始页面交互,在做页面提示的时候,要简洁明了。

6. 用户习惯沿用上一屏学习到的操作行为,如果当前操作不同,需要提示用户。

7. 大多数用户习惯滑动切换,放置在左边的按钮点击量低。

8. 有行为触发的icon要设计得足够醒目易懂,这样会刺激用户去点击。

9. 动画明显的元素更容易引起用户的注意并点击。

10. 有些图片不是动态的,也让人很有点击的欲望,例如宝箱、礼物盒等生活中打开了会有惊喜的元素。

11. 页面首屏和最后一屏的平均停留时间比中间页面的平均停留时间长。

12. 按钮摆放在第1屏的点击率最高,第2屏骤减,最后一屏回升。

13. 功能性页面的平均停留时间比展示型页面的平均停留时间长。

14. 同样功能的按钮,名字设置影响点击率,例如下载游戏、前往领取,后者的点击率更高。

15. 每屏都放同样的按钮,可以增加整体点击率。

16. 加载超过5秒会有74%的用户离开页面,用户不会有耐心反反复复地重试、刷新。

17. 给页面添加Loading可以优化用户等待时间的空白,能无形中给页面增加加载时间。

相关文章
|
4月前
|
缓存 前端开发 JavaScript
如何优化前端页面性能
前端性能优化是网站开发中非常重要的一部分,它直接关系到用户体验和网站的流量以及排名。本文将介绍一些优化前端页面性能的方法,包括减少HTTP请求、压缩代码、使用CDN等。
|
3月前
|
人工智能 前端开发 搜索推荐
前端技术发展趋势分析与展望
【2月更文挑战第9天】 随着移动互联网的快速发展,前端技术在不断演进,从最初的HTML、CSS到如今的React、Vue等前端框架,技术发展日新月异。本文将从移动端、跨平台、人工智能等多个角度分析前端技术的发展趋势,并展望未来的发展方向。
|
5天前
|
机器学习/深度学习 前端开发 数据可视化
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
数据分析web可视化神器---streamlit框架,无需懂前端也能搭建出精美的web网站页面
|
2月前
|
Rust 前端开发 vr&ar
未来前端技术发展趋势分析
在数字化时代,前端技术一直处于快速发展的状态。本文将从WebAssembly、PWA、AR/VR等方面探讨未来前端技术的发展趋势,为读者揭示前端技术的新篇章。
|
2月前
|
Web App开发 SQL 前端开发
性能工具之前端分析工Chrome Developer Tools性能标签
【2月更文挑战第22天】性能工具之前端分析工Chrome Developer Tools性能标签
36 1
性能工具之前端分析工Chrome Developer Tools性能标签
|
3月前
|
前端开发 JavaScript 数据可视化
几何学在前端边界计算中的应用和原理分析(一)
几何学在前端边界计算中的应用和原理分析(一)
20 0
|
3月前
|
Rust 前端开发 JavaScript
前端技术发展趋势与应用前景分析
【2月更文挑战第8天】 随着互联网时代的不断发展,前端技术作为网页和移动端开发的核心领域,也在不断演进。本文将深入探讨前端技术的发展趋势与应用前景,分析当前热门技术及其在各行业中的应用,帮助读者更好地了解前端技术的现状与未来。
|
3月前
|
存储 前端开发 JavaScript
【JavaEE初阶】 博客系统项目--前端页面设计实现
【JavaEE初阶】 博客系统项目--前端页面设计实现
|
3月前
|
人工智能 前端开发 算法
未来互联网发展趋势分析与前端技术应用探讨
【2月更文挑战第3天】随着人工智能、大数据、物联网等新兴技术的快速发展,未来互联网的发展方向和趋势变得更加多样化和复杂。在这种背景下,前端技术作为用户与系统之间的桥梁,扮演着至关重要的角色。本文将从未来互联网发展趋势的角度出发,探讨前端技术在不断变革的互联网时代的应用与发展。
|
7月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
54 0