vue-track-spm
v1.0.0
Published
vue-track-spm
Downloads
3
Readme
vue方案埋点插件
spm定位方案
spmA 唯一标识一个站点
spmB 唯一标识某站点的一个页面
spmC 唯一标识某页面的一个区块
spmD 唯一标识某区块的一个具体位置
spmE 随机生成的字串,跟时间有关系,在循环页面计算时可以区分点击的时序
埋点统计指标
PV 页面浏览次数
UV 页面浏览人数
按钮点击
跳出率
停留时长
转化率
访问深度
安装
npm i vue-track-spm --save
全局引入
// main.js
import VueTrace from 'vue-track-spm'
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-track-spm'
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方式)