<br>vue-uweb
<script src="./node_modules/vue-uweb/dist/vue-uweb.min.js"><script>
<button v-track-event.click="'category, action''"></button> // 统计click事件<br><br><button v-track-event="'category, action'"></button> // 统计click事件简写<br><br><input v-track-event.keypress="'category, action'"> // 统计keypress事件<br><br><button v-track-event="'category, action, label, value, nodeid'"><button> // 以字符串传递参数<br><br><button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数
trackpoint-tools<br>
mport { after } from 'trackpoint-tools'<br><br>class SomeComponent {<br> onClick = after(() => console.log('send after'))(() => {<br> return ajax.post(...).then(() => {<br> console.log('normal click')<br> })<br> })<br>}
ES7 注解<br>class SomeComponent {<br> @track(before(() => console.log('before')))<br> onClick () {<br> console.log('click')<br> }<br><br> @track(after(() => console.log('after')))<br> onClickAjax () {<br> return ajax.get(...').then(() => {<br> console.log('request done')<br> })<br> }<br>}<br>
vue-ba
vue指令
<button v-track-event.click="'category, action''"></button> // 统计click事件<br><br><button v-track-event="'category, action'"></button> // 统计click事件简写<br><br><input v-track-event.keypress="'category, action'"> // 统计keypress事件<br><br><input v-track-event.someEvent:custom="'category, action'"> // 统计someEvent事件,someEvent是自定义事件<br><br><button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串传递参数<br><br><button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数
web-sdk
封装的挺不错的
https://github.com/bailinlin/web-sdk
collect.onload<br>collect.setIframe<br>collect.onload<br>helper.each<br>
封装可借鉴
监听浏览器的默认事件,
beforeunload
click
onpopstate
onpushstate
web-tracing
前端 - 埋点, 性能采集, 异常采集, 请求采集, 路由采集
兼容, js vue2, vue3
<br>vueTrackSdk<br>
普光监听
intersection-observer 监听是不是在浏览器的视窗范围内
v-track
vue指令,区域埋点
<!-- 页面行为埋点(track-view为v-track全局注册的组件) --><br><track-view v-track:18015></track-view><br><track-view v-track:18015.watch="{ rest }"></track-view><br><track-view v-track:18015.watch.delay="{ rest }"></track-view><br><track-view v-if="rest" v-track:18015></track-view><br><br><!-- 事件行为埋点(DOM) --><br><div v-track:18015.click="handleClick"></div><br><div v-track:18015.click="{ handleClick, item, index }"></div><br><div v-track:18015.click.async="{ handleSearch, rest }"></div><br><div v-track:18015.click.delay="handleClick"></div><br><br><!-- 事件行为埋点(组件) --><br><cmp v-track:18015.click="handleClick"></cmp><br><cmp v-track:18015.[自定义事件名]="handleSearch"></cmp><br><cmp v-track:18015.[自定义事件名].delay="handleSearch"></cmp><br><cmp v-track:18015.[自定义事件名].async="{ handleSearch, rest }"></cmp><br><br><!-- 区域展现埋点(block 可以是 DOM 或者组件) --><br><block v-track:18015.show></block><br><block v-track:18015.show.once></block><br><block v-track:18015.show.custom="{ ref: 'scroll' }"></block><br><block v-track:18015.show.custom.once="{ ref: 'scroll' }"></block>