专栏首页晓月寒·在Vue中如何不影响业务代码的情况下实现页面埋点

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

实现思路

我们的目的是在不引入外部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: {

    }
}

其中的log中的actionData用来存储用户的交互日志信息。每一次用户的操作都会调用mutations中的logMu将信息存放进去。

// 数据直接请求
export const apiData = (config)=>{
    // 用户操作之后将操作的信息存进actionData
    store.commit("logMu", {url: config.url, time: new Date().getTime()})
    config.url = '/zuul'+ config.url
    config = checkConfig(config)
    return axios.request(config)
}

客户端浏览日志采集

正常情况下我们会在进入页面时发送日志信息,但是用户在每个页面的停留时间我们将很难统计到。因此考虑在离开页面时发送日志信息,并且在页面跳转时将上一个页面的一些信息也一并加入日志信息中。

客户端日志发送

在Vue中我们将在router.afterEach钩子函数里做这个操作。

// 路由跳转之后
router.afterEach((to, from) => {
    end = new Date().getTime();
    let logData = window.vm.$store.getters.log;
    logData['from'] = from.name;
    logData['to'] = to.name;
    logData['start'] = start;
    logData['end'] = end;
    logData['url'] = "url";

    logServer(logData);
    start = new Date().getTime();
    window.scrollTo(0, 0);
})

其中的start和end为进入页面的开始和结束时间。因为是在页面跳转之后发送请求,所以此时将end置为当前时间。在发送完日志之后进入页面,将start设置为当前时间。

优化

我们是在假设用户每一次的操作都会发送一次请求来实现的,但在实际环境中用户的操作大部分都不会给后台发送请求。此时我们可以考虑在主页面是加点击事件记录下当前页面的信息,鼠标位置等。

<template>
    <div id="app" @click="clickme">
        <router-view/>
    </div>
</template>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Docker安装ELK并实现JSON格式日志分析

    ELK是elastic公司提供的一套完整的日志收集以及前端展示的解决方案,是三个产品的首字母缩写,分别是ElasticSearch、Logstash和Kiban...

    我的小熊不见了丶
  • 页面日志采集(埋点)思路及其实现

    如果要进行日志采集的动作,需要在服务器响应并返回所请求的内容之后,对应页面的onload事件。 一般需要采集当前页面参数、浏览行为的上下文信息(如读取用户访问当...

    我的小熊不见了丶
  • Spring AOP使用指南,详细了解AOP相关注解

    spring aop可以在spring构建的系统中使用面向切面编程。当然Spring Boot也是基于Spring构建的。使用AOP

    我的小熊不见了丶
  • 如何将Flutter优雅的嵌入现有应用

    在早期Flutter发布的时候,谷歌虽然提供了iOS和Android App上的Flutter嵌入方案,但主要针对的是纯Flutter的情形,混合开发支持的并不...

    用户1907613
  • JS原生引用类型解析6-Boolean类型

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 如何解决selenium被检测,实现淘宝登陆

    因为不少大网站有对selenium的js监测机制。比如:navigator.webdriver,navigator.languages,navigator.pl...

    十四君
  • centos7使用kubeadm安装kubernetes 1.11版本多主高可用

    关闭任一master节点测试集群是能否正常执行上一步的基础测试,查看相关信息,不能同时关闭两个节点,因为3个节点组成的etcd集群,最多只能有一个当机。

    菲宇
  • 删除数据库日志文件的方法

           你曾经有在执行SQL的时候,数据库报事务日志已满,然后执行报错。然后纠结于怎么删除数据库日志,捣鼓半天吗,现在就提供两种删除日志文件的方法,希望能...

    用户1168362
  • 走近周鸿祎,探索360不平凡的“做机之路”

    镁客网
  • 可解释的CNN

    Quanshi Zhang, Ying Nian Wu, Song-Chun Zhu

    用户1908973

扫码关注云+社区

领取腾讯云代金券