前端页面数据埋点

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

  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可以优化用户等待时间的空白,能无形中给页面增加加载时间。

### 测试前端页面数据埋点功能的方法与工具 测试前端页面中的数据埋点功能是确保用户行为数据能够正确采集和发送的关键步骤。以下是一些常见的测试方法和工具,可以帮助验证埋点是否按预期工作。 #### 方法一:使用浏览器开发者工具 通过浏览器内置的开发者工具,可以检查网络请求并查看埋点数据是否成功发送到服务器。具体操作包括: - 打开浏览器的“开发者工具”(通常在开发者菜单中)。 - 切换到“Network”选项卡。 - 过滤请求类型为 `XHR` 或 `Fetch`,查找与埋点相关的请求。 - 检查请求的 URL 和参数,确认是否包含预期的用户行为数据[^4]。 #### 方法二:模拟用户行为进行测试 编写自动化脚本模拟用户的点击、滚动等行为,并验证这些行为是否触发了正确的埋点事件。例如,使用 JavaScript 在控制台中执行代码来触发特定的事件: ```javascript document.getElementById('test-button').click(); ``` 然后检查是否有对应的埋点请求被发出。 #### 方法三:使用日志输出调试信息 在埋点代码中添加 `console.log` 语句,将收集到的数据打印到控制台,以便快速查看数据是否符合预期: ```javascript function trackEvent(eventName, eventData) { console.log(`Tracking event: ${eventName}`, eventData); // 发送数据到服务器的逻辑 } ``` 这种方法适合开发阶段快速定位问题。 #### 工具推荐 1. **Charles Proxy** Charles 是一款 HTTP 代理/监控工具,可以捕获所有客户端和服务端之间的流量,帮助开发者检查埋点请求的内容和频率。 2. **Fiddler** 类似于 Charles,Fiddler 提供了详细的网络请求分析功能,支持解密 HTTPS 流量,适用于复杂的埋点测试场景。 3. **Selenium** Selenium 是一个强大的自动化测试框架,可以通过编写脚本来模拟用户交互,并结合断言机制验证埋点是否触发。 4. **Postman** Postman 可以用来手动发送请求并验证后端接口是否能正确接收埋点数据。这对于测试 API 接口非常有用。 5. **埋点专用工具** - **Google Tag Manager (GTM)** GTM 允许通过可视化界面配置埋点规则,而无需修改代码。它还提供了预览模式,可以直接在浏览器中看到哪些标签被触发。 - **Mixpanel / Amplitude** 这些第三方分析平台通常提供 SDK 和调试工具,方便开发者验证埋点数据是否正确上报。 #### 注意事项 - 确保埋点数据的准确性,包括事件名称、参数值等。 - 避免重复上报或遗漏关键事件。 - 考虑性能影响,避免因过多的埋点请求导致页面加载变慢。 - 使用异步方式发送数据,防止阻塞主线程。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值