vue-trace

vue方案埋点插件

spm定位方案

spmA 唯一标识一个站点 
spmB 唯一标识某站点的一个页面
spmC 唯一标识某页面的一个区块
spmD 唯一标识某区块的一个具体位置
spmE 随机生成的字串，跟时间有关系，在循环页面计算时可以区分点击的时序

埋点统计指标

PV 页面浏览次数
UV 页面浏览人数
按钮点击
跳出率
停留时长
转化率
访问深度

安装

npm i vue-trace --save

全局引入

// main.js
import VueTrace from 'vue-trace'
Vue.use(VueTrace, {
  baseUrl: '', // 选填，日志上报接口路径，默认根路径‘/’
  spm_a: 'msen', // 必填，站点
  domain: 'ds.myyshop.com', // 选填，域名，默认location.hostname 用于存储cookie
  sessionExpireTime: 30 * 60 * 1000, // 选填，会话最大有效时间, 默认30分钟
})

埋点sdk能力

点击事件

一、通过vue指令
<div v-trace:moduleName.click="{item_code: ''}" />
moduleName arg必填
binding.value 选填
二、通过api
this.$buryingPoint({
  module: el,
  moduleName: spmc,
  spm_b: spmb
}).click()

曝光事件

通过vue指令
<div v-trace:moduleName.expose />
moduleName arg必填
binding.value 选填

点击事件 + 曝光事件

通过vue指令
<div v-trace:moduleName.click.expose />
moduleName arg必填
binding.value 选填

注意事项

1.binding.value 可传对象或基本类型，如果是基本类型会默认赋值给实体的event_entity_info.keyword，如果是对象，则会合并到实体对象event_entity_info
2.对于第三方组件内部事件阻止了冒泡的，可以加capture，事件在捕获过程中执行
<div v-trace:moduleName.click.capture />

页面曝光

sdk暴露埋点实例
// 在全局控制路由拦截（router.beforeEach）文件引入，eg： src/router/permission.js
import VueTrace from 'vue-trace'
const { BuryingPoint } = vueTrace
// pageview
const spmb = to.meta ? (to.meta.spmb || '') : ''
if (spmb) {
    new BuryingPoint({
        baseUrl: '/',
        spm_a: 'msen',
        module: 'page',
        title: '',
        spm_b: spmb
    }).pageview()
}

注意： this.$route.meta.spmb需要定义spmb, 需要侵入router的meta中

a标签埋spm

改变所有a标签的href，带上当前区块的dspm
引入全局trance-link组件替换router-link
props
to 必填  跳转地址
spm 选填 传值spmC，不填则是正常link链接，不会埋点
spmIndex 选填，传值spmD，默认1 

存在bug

1、第三方组件内部事件阻止了冒泡，指令无法感知，比如element-ui select组件（可搜索模式）；
   1）存在问题页面ds的Search Products中select by location； (已解决，添加修饰符capture，事件在捕获过程中执行)
2、组件无法传递自定义属性，比如element-ui tabs组件无法传自定义属性spm-index，无法自定义原生事件；
   1）存在问题页面ds的Import List\My Products\中tabs组件； (已解决，使用api方式)