npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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方式)