vue工程师必会封装的埋点指令有哪些

发布时间:2021-12-18 19:26:15 作者:iii
来源:亿速云 阅读:175

本篇内容主要讲解“vue工程师必会封装的埋点指令有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue工程师必会封装的埋点指令有哪些”吧!

指令基础知识

在此之前,先来复习下vue自定义指令吧,这里只介绍常用的基础知识。更全的介绍可以查看官方文档。

钩子函数

钩子函数参数

在这里分享个小技巧,钩子函数参数中没有可以直接获取当前实例的参数,但可以通过 vnode.context 获取到,这个在我之前的vue技巧文章中也有分享到,有兴趣可以去看看。

正文

进入正题,下面会介绍埋点指令的使用,内部是怎么实现的。

用法与思路

一般我在封装一个东西时,会先确定好它该怎么去用,然后再从用法入手去封装。这样会令整个思路更加清晰,在定义用法时也可以思考下易用性,不至于封装完之后因为用法不理想而返工。

埋点上报的数据会分为公共数据(每个埋点都要上报的数据)和自定义数据(可选的额外数据,和公共数据一起上报)。那么公共数据在内部就进行统一处理,对于自定义数据则需要从外部传入。于是有了以下两种用法:

一般用法

<div v-track:clickBtn></div>

自定义数据

<div v-track:clickBtn="{other:'xxx'}"></div>

可以看到埋点事件是通过 arg 的形式传入,在此之前也看到有些小伙伴封装的埋点事件是在 value 传入。但我个人比较喜欢 arg 的形式,这种更能让人一目了然对应的埋点事件是什么。

另外上报数据结构大致为:

{   
    eventName: 'clickBtn'
    userId: 1,
    userName: 'xxx',
    data: {
        other: 'xxx'
    }
}

eventName 是埋点对应的事件名,与之同级的是公共数据,而自定义数据放在 data 内。

实现

定义一个 track.js 的文件

import SlsWebLogger from 'js-sls-logger'

function getSlsWebLoggerInstance (options = {}) {
  return new SlsWebLogger({
    host: '***',
    project: '***',
    logstore: `***`,
    time: 10,
    count: 10,
    ...options
  })
}

export default {
  install (Vue, {baseData = {}, slsOptions = {}) {
    const slsWebLogger = getSlsWebLoggerInstance(slsOptions)
    // 获取公共数据的方法
    let getBaseTrackData = typeof baseData === 'function' ? baseData : () => baseData
    let baseTrackData = null
    const Track = {
      name: 'track',
      inserted (el, binding) {
        el.addEventListener('click', () => {
          if (!binding.arg) {
            console.error('Track slsWebLogger 事件名无效')
            return
          }
          if (!baseTrackData) {
            baseTrackData = getBaseTrackData()
          }
          baseTrackData.eventName = binding.arg
          // 自定义数据
          let trackData = binding.value || {}
          const submitData = Object.assign({}, baseTrackData, {data: trackData})
          // 上报
          slsWebLogger.send(submitData)
          if (process.env.NODE_ENV === 'development') {
            console.log('Track slsWebLogger', submitData)
          }
        })
      }
    }
    Vue.directive(Track.name, Track)
  }
}

封装比较简单,主要做了两件事,首先是为绑定指令的 DOM 添加 click 事件,其次处理上报数据。在封装埋点指令时,公共数据通过baseData传入,这样可以增加通用性,第二个参数是上报平台的一些配置参数。

在初始化时注册指令:

import store from 'src/store'
import track from 'Lib/directive/track'

function getBaseTrackData () {
  let userInfo = store.state.User.user_info
  // 公共数据
  const baseTrackData = {
    userId: userInfo.user_id, // 用户id
    userName: userInfo.user_name // 用户名
  }
  return baseTrackData
}

Vue.use(track, {baseData: getBaseTrackData})

Vue.use 时会自动寻找 install 函数进行调用,最终在全局注册指令。

加点通用性

除了点击埋点之外,如果有停留埋点等场景,上面的指令就不适用了。为此,可以增加手动调用的形式。

export default {
  install (Vue, {baseData = {}, slsOptions = {}) {
    // ...
    Vue.directive(Track.name, Track)
    // 手动调用
    Vue.prototype.slsWebLogger = {
      send (trackData) {
        if (!trackData.eventName) {
          console.error('Track slsWebLogger 事件名无效')
          return
        }
        const submitData = Object.assign({}, getBaseTrackData(), trackData)
        slsWebLogger.send(submitData)
        if (process.env.NODE_ENV === 'development') {
          console.log('Track slsWebLogger', submitData)
        }
      }
  }
}

这种挂载到原型的方式可以在每个组件实例上通过 this 方便进行调用。

export default {
    // ...
    created () {
        this.slsWebLogger.send({
            //...
        })
    }
}

到此,相信大家对“vue工程师必会封装的埋点指令有哪些”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

推荐阅读:
  1. 怎么在vue项目中实现前端埋点
  2. Vue常用的指令有哪些

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:html5废弃的元素有哪些

下一篇:如何进行springboot配置templates直接访问的实现

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》