likes
comments
collection
share

前端数据上报

作者站长头像
站长
· 阅读数 39

最近刚好使用了Singular的web打点，基于当前web页面，需要记录用户的各种行为，跟我们之前使用谷歌打点是大同小异。回想之前gamebox页面的统计次数处理，目前基于数据的上报做一次小总结

常见上报方案

  • 1、基于脚本请求 可以使用常规的ajax请求、fetch请求，通过请求后端接口，可以记录当前页面访问记录
    • 优点：
      • 可以快速上报数据，
      • 结合埋点记录用户的行为，包括点击、滑动、页面停留时间等，比较灵活
      • 支持异步和同步处理响应
    • 缺点：
      • 会存在跨域问题
  • 2、使用script、link处理
    • 优点：使用这种方式可以解决跨域
    • 缺点：需要将script元素、link元素挂载在dom树上,才会发生请求

在另外一个域名下使用地下两个元素
<script async="" src="http://localhost:5501/users/a.js"></script>
<link rel="stylesheet" href="http://localhost:5502/users/a.css">


//基于node
var express = require("express");
var router = express.Router();

/* GET users listing. */
router.get("/a.js", function (req, res, next) {
  res.send("respond with a resource");
});

router.get("/a.css", function (req, res, next) {
  res.send("respond with a resource");
});
module.exports = router;

前端数据上报

  • 3、使用img处理或css中的url处理

    对于经常使用图片懒加载的，应该会很熟悉使用img提前加载图片的方案。通过使用Image对象的src设置链接地址就可以正常请求

    • 优点：

      • 可以跨域
      • 同时可以选择是否挂载元素到dom上
      • 发生简单、兼容性好

    • 缺点：

      • 存在缓存的可能性，会减少重复上报
    <script>
        const img=new Image();
        img.src="http://localhost:5502/users/a.png"
    </script>

    //基于node
    var express = require("express");
    var router = express.Router();

    router.get("/a.png", function (req, res, next) {
      res.send("respond with a resource");
    });
    module.exports = router;

前端数据上报

  • 4、WebSocket

    • 优点：
      • 支持双向通信，可以实时传输数据
      • 支持跨域请求
    • 缺点：
      • 需要建立长连接，需要服务器和客户端都支持 WebSocket
      • 开发比较麻烦

  • 5、navigator.sendBeacon

    HTML5 提供的一个 API，用于在页面卸载前异步地向指定的 URL 发送数据，不会延迟卸载文档，而导致下一个导航出现的慢

    • 优点：

      • 方法是异步的，不会影响页面卸载和用户体验
      • 可以跨域
      • 可以确保数据在页面卸载前，成功上报
      • 可以用post请求，发生大量数据，不受url的长度限制，一般get传递参数容易被浏览器限制
      • 不会阻塞页面主线程、不会影响页面性能

    • 注意：在许多情况下（尤其是移动设备）浏览器不会产生 unload、beforeunload 或 pagehide 事件。使用 unload 或 beforeunload 事件以在会话结束时发送统计数据这是不可靠的，容易导致收集到数据误差。常见不触发两个事件的情况：

      • 用户加载了网页并与其交互。
      • 完成浏览后，用户切换到了其他应用程序，而不是关闭选项卡
      • 随后，用户通过手机的应用管理器关闭了浏览器应用。
//使用方式也很简单
navigator.sendBeacon(url);
navigator.sendBeacon(url, data);


    <script>
            const res=   navigator.sendBeacon('http://localhost:5502/users/a', "11111");
            console.log(res);
    </script>

var express = require("express");
var router = express.Router();

/* GET users listing. */
router.post("/a", function (req, res, next) {
  res.send("respond with a resource");
});
module.exports = router;

前端数据上报 前端数据上报

  • 6、a标签的ping属性

    • 优点：

      • 无需 JavaScript 代码参与，网页功能异常也能上报
      • 不受浏览器刷新、跳转过关闭影响，也不会阻塞页面后续行为，这一点和 navigator.sendBeacon() 类似，可以保证数据上报的准确性；
      • 支持跨域
      • post请求

    • 缺点：

      • 只能点击触发
      • 只支持a标签
      • 适用于移动端，否则存在兼容性，部分浏览器不支持这个属性
<body>
<a href="https://www.baidu.com/" ping="http://localhost:5502/users/a.js" target="_blank">链接1</a>
<a href="javascript:" ping="http://localhost:5502/users/a">链接2</a>
</body>

前端数据上报

综上所示：对于不同情况，可以采取不同的方式来处理数据上报，大部份情况下可以以sendBeacon方式为主处理

参考

sendBeacon

ping数据上报

打点相关事件

转载自:https://juejin.cn/post/7240487843224600634
评论
请登录