2026年埋点前端vue（前端数据埋点实现）

编程日记 • 2026-03-10 08:51 • 阅读 3

最近菜鸟做项目，需要做简单的数据埋点，不是企业级的，反正看渡一的视频，企业级特别复杂，包括但不限于：错误收集、地方、用户行为……

菜鸟的需求就是简单收集一下用户的ip、地址、每个界面的访问时间，而且面向的是全球用户，所以自己简单写了。

这里菜鸟最开始想到的就是高德、腾讯地图这样的平台，里面都是有ip逆向解析的，但是菜鸟一看高德的api，发现不支持国外！！！
在这里插入图片描述
然后百度虽然支持，但是也不是很准确，最重要的一点是总是提示我跨域了，不知道咋解决！！！

所以菜鸟就在网上找到一个免费且比较准确的

https://ipinfo.io/account/profile

反正电脑不是手机，定位确实不好搞，反正菜鸟感觉定位的地方就是离你最近的转发基站的位置，而不是你本来的位置！

希望有知道可以精确定位的读者可以 指点江山，激扬文字！

这里菜鸟最开始想的是 vue3 的 mixins，发现 vue3 不推荐 mixins，但是可以直接使用组合式 API 的组合式函数，就相当于把mixins当函数提出去，然后需要用到的时候直接引入就行！

结果压根不靠谱，这样发送给后端的是跳转后的界面，而不是跳转前的，所以每次都是把上一个界面的访问时间和新跳转的界面发送过去了！！！而且还有一个bug 就是别人不切换界面，那我就不知道别人上一个界面访问了多久，且当别人访问一个界面后，直接关闭标签，也无法知道这个界面访问了多久！

接下来一个一个解决！

但是菜鸟一想，不对呀，全部和路由相关，直接写路由里面不好吗？这样写成mixins还要每个界面都这这样引入！

注意：
上面的 localStorage.setItem(“lastPageTime”, startTime); 是后续做 解决监听不到关闭网页的问题 的时候加上的！

在app.vue里面加上监听页面关闭事件，这个必须用原生js，vue 的 onBeforeUnmount 根本不能在界面标签关闭时做操作！

注意：
1、这里 mainStore.routeObj 和上面的 _routeObj 是同一个东西，但是不能直接在 route/index.js 中使用 pinia，会报错，搜索是因为在 pinia 挂载之前使用了，具体怎么解决不知道！！！望读者 指点江山，激扬文字！！！

2、为什么使用delete event[“returnValue”] ？参考：MDN - beforeunload

在这里插入图片描述

最近菜鸟看MDN，发现这个 beforeunload、unload 事件并不被推荐了，具体见：
在这里插入图片描述

pagehide见：
在这里插入图片描述

visibilitychange见：
在这里插入图片描述

所以最好是使用 visibilitychange 事件，如果浏览器不支持，才使用 pagehide，所以菜鸟改了代码，但是没对pagehide做兼容，大家可以自行加上，修改后的代码为：

DataburialpointApi代码

关于 navigator.sendBeacon 这里菜鸟介绍一下
在这里插入图片描述

到这里，菜鸟的需求就结束了，但是菜鸟拓展了一下，其实这个也很简单，就是每个按钮请求的时候，让后端统计一下，或者前端请求一下后端的某个接口就行！当然如果能直接封装成 自定义指令 就最好了！！！

今天的文章 2026年埋点前端vue（前端数据埋点实现）分享到此就结束了，感谢您的阅读。