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-trackjs

v1.0.1

Published

A lightweight tracking library of vue.

Downloads

5

Readme

vue-trackjs

A lightweight tracking library of vue.

Installation

// npm
npm i --save vue-trackjs

// yarn
yarn add vue-trackjs

//  main引入
import TrackDirective from 'vue-trackjs'
import { options } from './track.config.js'

// vue 3
createApp(App).use(TrackDirective, options)

// vue 2
Vue.use(TrackDirective, options)

配置文件

// 新建track.config.js文件
import { setTrackBaseInfo, throttle } from 'vue-trackjs'

// 你的自定义通用埋点信息, vue-trackjs集成的通用信息下面会有介绍
const trackBaseInfo = {
    ip: '127.23.112.3',
    version: '1.0.0',
    deviceId: 'vue-track',
    language: 'us',
    network: '3G',
}

// 存储到localstorage
setTrackBaseInfo(trackBaseInfo)

// 获取埋点配置信息函数,一般埋点都是支持系统配置,从接口取埋点配置,下面只是简单示范
function getTrackConfig() {
    // 该函数必须return如下结构,eventId和action字段固定不可更改,其他随意
    return {
        // 该key对应后续自定义指令里面的id
        "moduleName_xxx_show": {
            "eventId": "moduleName_xxx_show",
            "resourceModule": "",
            "action": "show"
        },
        "moduleName_xxx_click": {
            "eventId": "moduleName_xxx_click",
            "resourceModule": "12323",
            "action": "click"
        }
    }
}

// 获取埋点信息上传id函数,埋点批次上传前获取上传权限,根据业务需要,为可选项
function getUploadId() {
    // 只接收下面两个字段
    return { liftTime, uploadKey }
}

// 轮询上传埋点信息回调函数, 会有3个入参  埋点信息数组  通用信息  getUploadId函数返回的uploadKey(可选)
function uploadTracks(trackList, baseInfo, uploadKey) {
    return Promise<any>
}

export const options = {
    appId: 'projectName',
    getTrackConfig,
    getUploadId,
    uploadTracks
}

基本用法

**vue-trackjs 自带的埋点类型有4种:**

// click 点击事件
<div v-track="{ id: 'moduleName_xxx_click', eventResource: '{xxid: 12}' }">...</div>

// scoll_up 用户浏览滚动深度
<div v-track="{ id: 'moduleName_xxx_scoll_up' }">...</div>

// stay 停留时长
<div v-track="{ id: 'moduleName_xxx_stay' }">...</div>

// show 页面加载时间
<div v-track="{ id: 'moduleName_xxx_show'  }" :data-track="getLoadingTime">...</div>

computed: {
    getLoadingTime() {
        // 注意自定义data属性里面只接收字符串
        return JSON.stringify({ loadingTime: xxx })
    }
}

注:因为vue自定义bind.value不是响应式的,但你的eventResource是响应式数据时,需要像上面的show一样新增一个data-track,用来替换eventResource

自定义埋点事件

// 需要新增customActionFn配置
const options = {
    // ...
    customActionFn: {
        // 入参会返回3个参数, callback函数必须调用传入trackInfo才会成功
        myCustom: (trackInfo, callback, el) => {
            const fn = () => {
                trackInfo.haha = "guapi"
                callback(trackInfo)
            }
            el.addEventListener('mouseenter', throttle(fn, 300))
        }
    }
}

手动埋点

import { manualBurying } from 'vue-trackjs'

function clickHandler() {
    // manualBurying接收两个入参  埋点信息  另一个localstorage的key(可选,默认appId)
    const trackInfo = { //... }
    manualBurying(trackInfo)
}

Browser

<script type="text/javascript" src="track.min.js"></script>

除注册自定义指令的方式需要修改外,其他用法基本同上