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

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

最近从松江图书馆中借了一本叫《指尖上行 移动前端开发进阶之路》的书,该书分为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可以优化用户等待时间的空白,能无形中给页面增加加载时间。

相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
前端开发 数据安全/隐私保护
.自定义认证前端页面
.自定义认证前端页面
13 1
.自定义认证前端页面
|
1月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
1月前
|
前端开发 安全 JavaScript
在阿里云快速启动Appsmith搭建前端页面
本文介绍了Appsmith的基本信息,并通过阿里云计算巢完成了Appsmith的快速部署,使用者不需要自己下载代码,不需要自己安装复杂的依赖,不需要了解底层技术,只需要在控制台图形界面点击几下鼠标就可以快速部署并启动Appsmith,非技术同学也能轻松搞定。
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
42 18
|
1月前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
56 1
|
1月前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
45 1
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 数据安全/隐私保护
angular前端基本页面验证
angular前端基本页面验证
33 1
|
2月前
|
前端开发
搭建个人博客--1、前端页面
搭建个人博客--1、前端页面
26 1

热门文章

最新文章