在Vue中如何不影响业务代码的情况下实现页面埋点

最新推荐文章于 2024-06-24 11:36:20 发布

我的小熊不见了

最新推荐文章于 2024-06-24 11:36:20 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/qq1311256696/article/details/87896119

版权

本文介绍在不使用外部SDK且不影响业务代码的情况下，利用Vue的路由钩子函数、vuex进行页面埋点的方法。通过客户端交互日志采集、浏览日志采集和日志发送，实现用户行为跟踪并优化日志发送策略，降低服务器压力。

摘要由CSDN通过智能技术生成

实现思路

我们的目的是在不引入外部SDK，业务代码方完全无感知的情况下实现页面的日志采集功能。由于在Vue中每一次的页面跳转都会进入路由的beforeEach和afterEach钩子函数，因此我们将借助路由实现业务代码无感知的埋点功能。

在此之前，需要保证项目中除了日志服务之外其他的请求都会经过一个入口方法，因为

我们会将日志信息进行聚合，避免发送过多的请求以减轻日志服务器的压力。

客户端交互日志采集

我们将要借助vuex来保存用户的页面交互日志。

export default {
    state: {
        templates: "1",
        // 交互日志
        log: {
            info: "demo",
            actionData: []
        },
    },
    getters: {
        templates(state) {
            return state.templates;
        },
        log(state) {
            return state.log
        }
    },
    mutations: {
        templatesMu(state, val) {
            if (val) {
                state.templates = val;// 改变vuex中的templates为设置的皮肤
            }
        },
        logMu(state, val) {
            if(val) {
                 state.log.actionData.push(val);
            }
        }
    },
    actions: {