首页  思维导图  详情

数据埋点

2023-03-15 11:30:00   0  举报





AI智能生成

前端数据埋点技术研究

前端数据埋点

采集系统

作者其他创作

大纲/内容

开源工具对比分析

collect

原生js保存数据

据采集 Collect.js

子主题

vue-uweb

<button v-track-event.click="'category, action''"></button> // 统计click事件

<button v-track-event="'category, action'"></button> // 统计click事件简写

<input v-track-event.keypress="'category, action'"> // 统计keypress事件

<button v-track-event="'category, action, label, value, nodeid'"><button> // 以字符串传递参数

<button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数

trackpoint-tools

mport { after } from 'trackpoint-tools'

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

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')
    })
  }
}

vue-ba

vue指令

<button v-track-event.click="'category, action''"></button> // 统计click事件

<button v-track-event="'category, action'"></button> // 统计click事件简写

<input v-track-event.keypress="'category, action'"> // 统计keypress事件

<input v-track-event.someEvent:custom="'category, action'"> // 统计someEvent事件,someEvent是自定义事件

<button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串传递参数

<button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数

web-sdk

封装的挺不错的

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

collect.onload
collect.setIframe
collect.onload
helper.each

封装可借鉴

监听浏览器的默认事件，

beforeunload

click

onpopstate

onpushstate

web-tracing

前端 - 埋点, 性能采集, 异常采集, 请求采集, 路由采集

兼容， js vue2, vue3

smart_web_data_sdk

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

device.fxosTablet

浏览器的内容

mixpanel-browser

控制台收集器

vueTrackSdk

普光监听

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

v-track

vue指令，区域埋点

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


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

MonitorFE

浏览器获取ip

需求

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

获取内容

设备与系统信息

浏览器信息

浏览器版本

浏览器 localStory，session

浏览器事件 load。beforeload

屏幕信息

网络信息