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

转载于:https://www.cnblogs.com/strick/p/9342415.html

前端页面数据埋点、分析和参考相关推荐

  1. 谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题

    谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题(避雷) 浏览器的自动翻译会影响页面数据展示 因为我呢用的谷歌浏览器,有时候需要查看英文文档,平时会开着自动翻译翻译,如图: 然后今天在写网页的时 ...

  2. 前端页面JS埋点自定义采集实现

    1 设计实现 1.1 确定收集信息 名称 途径 备注 访问时间 web server Nginx $msec IP web server Nginx $remote_addr 域名 javascrip ...

  3. 谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题 - 接口返回数据被翻译

    背景:Chrome浏览器自带谷歌翻译,这个翻译还是挺实用的,但如果前端代码设置不当,再加上用户操作失误就容易造成很多莫名其妙问题,下面详述问题现象.排查过程及解决方案 文章目录 一.问题现象 二.排查 ...

  4. Vue前端神策数据埋点

    集成JS SDK 全埋点 1.从 npm 获取 sdk npm install sa-sdk-javascript 2.utils新建sensors.js文件夹,Vue全局挂载 import sens ...

  5. 页面数据埋点统计方案

    需要采集的数据 访问设备: navigator 环境信息(地理位置): navigator.geolocation 会话信息:登录接口返回 代码信息:项目设置相关配置文件 访问页面信息: load.h ...

  6. 2021-11-03大数据学习日志——数据埋点+网络爬虫——后端开发入门

    01_mini-web 本章节学习目标 能够知道Web开发流程 能够知道使用web应用程序处理客户端的动态资源请求操作 能够知道路由列表的实现 能够知道装饰器方式的添加路由 能够知道logging日志 ...

  7. 数据中台实战(一):以B2B电商亿订为例,谈谈产品经理视角下的数据埋点

    关注公众号:改变世界的产品经理,回复" 1 "获取10G产品经理学习资料. 笔者所在公司为富力环球商品贸易港,是富力集团旗下汇聚原创设计师品牌及时尚买手/采购商两大社群,通过亿订B ...

  8. php 微信实时更新,微信小程序修改data使页面数据实时更新的代码示例

    本篇文章给大家带来的内容是关于微信小程序修改data使页面数据实时更新的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 需求:通过点击button修改dataList中che ...

  9. 半小时速通【页面数据分页】

    前端页面数据分页 文章目录 前端页面数据分页 导言 后端整体思路 一.建立page分页对象(bean层) 二.DAO层 三.service层 四.web层 前端(JSP+JSTL) 首页.上一页.下一 ...

最新文章

  1. arm的一些概念(ARM7、Cortex-M的区别)
  2. git--版本创建、回滚的原理及演练
  3. 数据结构:二分查找算法
  4. 向顺序容器vector、string、deque、list、forward_list中插入\删除元素时迭代器、引用、指针的变化
  5. Ceph 集群整体迁移方案
  6. [渝粤教育] 西南科技大学 管理学原理 在线考试复习资料(5)
  7. match和exec的对比
  8. DB2 多表空间 重定向 还原
  9. Atitit data fmt sumup 常用的数据交换格式 标准 目录 1. 分类标准 2 1.1. 按照结构化与非结构化分类 2 1.2. 按照资料性质分类常见的数据格式txt ,do
  10. 解决CAJ阅读器读取学位论文卡到爆炸的问题
  11. SPEOS | SPEOS HUD 设计功能
  12. 继电器rc吸收电路取值_RC吸收电路
  13. NLP-文本摘要:“文本摘要”综述(Text Summarization)
  14. 安装wsl kali 遇到WslRegisterDistribution failed with error: 0x80070057 Error: 0x80070057解决
  15. 服务器装win7找不到硬盘驱动,Windows 7安装问题时找不到硬盘驱动器怎么办
  16. VBA和VBScript的AES加密算法
  17. mysql主从配置干什么_mysql主从配置之slave_exec_mode=IDEMPOTENT详解
  18. 数据挖掘实战—家用热水器用户行为分析与事件识别
  19. “@” Java中的特殊符号——注解(Java中’@‘符号是什么意思?)
  20. 麦咭萌app送智伴机器人_模拟麦咭机器人软件 麦咭机器人官网

热门文章

  1. asp.net三层架构制作新闻管理_程序员蜕变为架构师必须要知道的「架构理论」...
  2. cookie 百科_Cookie和session应该这样理解
  3. Stream将List转换为Map
  4. RabbitMQ三种Exchange模式(fanout,direct,topic)的性能比较(转)
  5. Oracle索引状态查询与索引重建
  6. java lang保_java中lang包下的类都涉及哪几方面的
  7. swoole redis
  8. Asp.Net Core基于JWT认证的数据接口网关Demo
  9. 拥有中国最深基坑的超高层建筑完成地下连续墙施工
  10. 惠普在安全领域发力 收购大数据加密企业