数据埋点

据采集 Collect.js

子主题

原生js保存数据

collect

<script src=\"./node_modules/vue-uweb/dist/vue-uweb.min.js\"><script>

<button v-track-event.click=\

vue-uweb

ES7 注解class SomeComponent {  @track(before(() => console.log('before')))  onClick () {    console.log('click')  }  @track(after(() => console.log('after')))  onClickAjax () {    return ajax.get(...').then(() => {        console.log('request done')    })  }}

mport { after } from 'trackpoint-tools'class SomeComponent {    onClick = after(() => console.log('send after'))(() => {         return ajax.post(...).then(() => {             console.log('normal click')         })    })}

trackpoint-tools

vue指令

vue-ba

https://github.com/bailinlin/web-sdk

collect.onloadcollect.setIframecollect.onloadhelper.each

封装可借鉴

beforeunload

click

onpopstate

onpushstate

监听浏览器的默认事件， 

封装的挺不错的

web-sdk

web-tracing

device.fxosTablet

浏览器的内容

多设备详情，判断的比较多

smart_web_data_sdk

控制台收集器

mixpanel-browser

intersection-observer 监听是不是在浏览器的视窗范围内

普光监听

vueTrackSdk

<!-- 页面行为埋点（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=\

vue指令，区域埋点

v-track

浏览器获取ip

MonitorFE

开源工具对比分析

简单，业务隔离，方便引入， 可配置，粒度可大可小

设备与系统信息

浏览器版本

浏览器 localStory，session

浏览器事件 load。beforeload

浏览器信息

屏幕信息

网络信息

用户信息

按钮点击

页面切换

停留时长

行为信息

拦截器

接口交互信息

系统类型

模块类型

租户

明度系统

获取内容

编码与解码

队列

保存

需求

原生js

vue2

 vue3

支持 

引入sdk，配置开启

全局方法

全局指令

使用的方式

实现

数据埋点