l-hammer / V Track
Licence: mit
🕹 A manual tracking decoupling plugin based on Vue directive / 一个基于Vue指令实现的埋点解耦插件~
Stars: ✭ 277
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to V Track
Vue Match Heights
Vue plugin to match the height of elements
Stars: ✭ 50 (-81.95%)
Mutual labels: plugin, directive
V Chart Plugin
Easily bind a chart to the data stored in your Vue.js components.
Stars: ✭ 188 (-32.13%)
Mutual labels: plugin, vue-components
Vst.net
Virtual Studio Technology (VST) for .NET. Plugins and Host applications.
Stars: ✭ 267 (-3.61%)
Mutual labels: plugin
Vim Crystalline
Functions for taking the monotony out of building your own fancy statusline in Vim
Stars: ✭ 264 (-4.69%)
Mutual labels: plugin
Android Mvp Mvvm Flytour
🔥🔥🔥 FlyTour是Android MVVM+MVP+Dagger2+Retrofit+RxJava+组件化+插件组成的双编码架构+双工程架构+双语言Android应用开发框架,通过不断的升级迭代该框架已经有了十个不同的版本,5.0之前工程架构采用gradle配置实现组件化,5.0之后的工程架构采用VirtualAPK实现了插件化,5.0之前采用Java编码实现,5.0之后采用Kotlin编码实现,编码架构由MVVM和MVP组成,工程架构和编码架构及编码语言开发者可根据自己具体的项目实际需求去决定选择使用,该框架是Android组件化、Android插件化、Android MVP架构、Android MVVM架构的集大成者,帮助你快速的搭建自己的App项目开发框架,以便把主要的精…
Stars: ✭ 2,948 (+964.26%)
Mutual labels: plugin
Formvuelar
Vue form components with server-side validation in mind
Stars: ✭ 263 (-5.05%)
Mutual labels: vue-components
Merge Duplicate Symbols
Sketch plugin to merge symbols and layer&text styles.
Stars: ✭ 272 (-1.81%)
Mutual labels: plugin
Form Create
🔥🔥🔥 强大的动态表单生成器|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON.
Stars: ✭ 3,698 (+1235.02%)
Mutual labels: vue-components
Vue Turbolinks
A Vue mixin to fix Turbolinks caching
Stars: ✭ 272 (-1.81%)
Mutual labels: vue-components
Sketch Connection Flow Arrows
Plugin for generating easy to use connection flow arrows in Sketch
Stars: ✭ 275 (-0.72%)
Mutual labels: plugin
Vue Patterns
Useful Vue patterns, techniques, tips and tricks and helpful curated links.
Stars: ✭ 2,898 (+946.21%)
Mutual labels: vue-components
Nutui
京东风格的移动端 Vue2、Vue3 组件库 (A Vue.js UI Toolkit for Mobile Web)
Stars: ✭ 3,870 (+1297.11%)
Mutual labels: vue-components
Protein
💊 Protein is an IntelliJ Plugin to generate Kotlin code for Retrofit 2 and RxJava 2 based on a Swagger definition
Stars: ✭ 273 (-1.44%)
Mutual labels: plugin
Clangformat Xcode
Xcode plug-in to to use clang-format from in Xcode and consistently format your code with Clang
Stars: ✭ 2,852 (+929.6%)
Mutual labels: plugin
Imagvue
🎑 Imagvue is an image component for Vue.js
Stars: ✭ 268 (-3.25%)
Mutual labels: vue-components
v-track
v-track通过 Vue 自定义指令的方式将埋点代码与业务代码完全解耦~
安装
YARN
$ yarn add v-track
NPM
$ npm install v-track --save
CDN
目前可以通过unpkg.com/v-track获取到最新版本的资源,在页面上使用 script 标签直接引入文件即可开始使用
<script src="https://unpkg.com/v-track/dist/v-track.min.js"></script>
或者
<script src="https://cdn.jsdelivr.net/npm/v-track/dist/v-track.min.js"></script>
建议使用 CDN 引入 v-track 的用户在链接地址上锁定版本,以免将来 v-track 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com or jsdelivr.com。
用法
import Vue from "vue"
import VTrack from "v-track"
import trackEvents from "./track-events"
Vue.use(VTrack, {
trackEvents, // 埋点事件对象
trackEnable: {
UVPV: true, // 是否开启UVPV统计,v0.8.3新增routeUpdate,即在当前路由参数发生改变时埋点,默认为false
TONP: true // 是否开启页面停留时长统计,默认为false
}
})
/* track-events.js */
export default {
/**
* @name UVPV 固定名称不支持修改
* @desc UV、PV埋点
* @param {Object} context 当前上下文
*/
UVPV(context) {
...
},
/**
* @name TONP 固定名称不支持修改
* @desc 页面停留时间埋点(Time on Page)
* @param {Object} context 当前上下文
* @param {Timestamp} et 进入页面时间
* @param {Timestamp} dt 离开页面时间
*/
TONP(context, { et, dt }) {
...
},
/**
* @name 18015 埋点唯一标识ID(自定义)
* @param {Object} context 当前上下文
* @param {Object} args 剩余参数
*/
18015(context, args) {
...
}
...
}
<!-- 页面行为埋点(track-view为v-track全局注册的组件) -->
<track-view v-track:18015></track-view>
<track-view v-track:18015.watch="{ rest }"></track-view>
<track-view v-track:18015.watch.delay="{ rest }"></track-view>
<track-view v-if="rest" v-track:18015></track-view>
<!-- 事件行为埋点(DOM) -->
<div v-track:18015.click="handleClick"></div>
<div v-track:18015.click="{ handleClick, item, index }"></div>
<div v-track:18015.click.async="{ handleSearch, rest }"></div>
<div v-track:18015.click.delay="handleClick"></div>
<!-- 事件行为埋点(组件) -->
<cmp v-track:18015.click="handleClick"></cmp>
<cmp v-track:18015.[自定义事件名]="handleSearch"></cmp>
<cmp v-track:18015.[自定义事件名].delay="handleSearch"></cmp>
<cmp v-track:18015.[自定义事件名].async="{ handleSearch, rest }"></cmp>
<!-- 区域展现埋点(block 可以是 DOM 或者组件) -->
<block v-track:18015.show></block>
<block v-track:18015.show.once></block>
<block v-track:18015.show.custom="{ ref: 'scroll' }"></block>
<block v-track:18015.show.custom.once="{ ref: 'scroll' }"></block>
指令修饰符
-
.click
表示事件行为的埋点 -
.[custom-event]
表示自定义事件行为的埋点 -
.native
表示监听组件原生click事件行为的埋点 -
.watch
表示页面异步行为的埋点 -
.async
配合.click
指令,表示异步事件行为的埋点 -
.delay
表示埋点是否延迟执行,默认先执行埋点再执行回调 -
.show
表示区域曝光埋点 -
.once
配合.show
指令,只执行一次埋点 -
.custom
配合.show
指令,表示使用自定义scroll事件
LICENSE
MIT © 2019-present, LHammer
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].