stat-site

定位是事件埋点和数据上报功能。

用法

引入

1、脚本方式

<script data-stat61="{terminal: 'web',project: 'hualala'}" src="http://localhost:8080/bundle.js"></script>

2、模块方式

npm install  stat-site --save-dev

import * as Stat61 from 'stat-site'

基础方法

// 代码初始化
Stat61.init({
    project: 'xxxx',  // 项目标识 hualala  dengta
    terminal: 'PC',  // 当前平台  PC  H5  WeiXin
    reportHost: '',  // production | test | dev | custom
    reportErrorUrl: '/v1/data/logError',  // 上报异常的api
    reportBuryUrl: '/v1/data/buryJson',  // 上报埋点的api
    reportMethod: 'POST',  // POST | GET，get的时候参数key为result，值为字符串对象
    doReport: function, // 自定义上传接口
    headers: null,  // 头部对象
    errors: 'on',    // 是否开启异常收集
    paramsFilter: Function, // 自定义过滤器，传入即将上报的参数params，返回过滤条件，如果返回false则取消上报
})
// 更新配置
Stat61.config.set(key, value)
// 获取配置
Stat61.config.get(key?)
// 删除配置
Stat61.config.remove(key)

埋点统计

1、手动埋点

Stat61.event.send({
    eventName: 'pagein',
    data: {name: 22222222},
})

2、滚动页面位置埋点

Stat61.event.send('scrollEvent', [{
    eventName: 'test',
    data: {name: 123},
    checkPoint: (topscroll) => {return document.getElementById('bgBlock').offsetTop < topscroll}
}, {
    eventName: 'test22',
    data: {name: 12322},
    checkPoint: (topscroll) => {return 1000 < topscroll}
}])

2、路由切换埋点

Stat61.event.send('routerEvent', {
    mode: 'hash',
    cb: () => {
        return {
            eventName: 'test22',
             data: {name: 12322}, 
        }
    }
})

3、交互事件埋点

提供直接在dom上绑定，目前支持click和dblclick

<p stat61-event="{'eventType': 'click', eventName: 'click-span', 'data': {'name': 'test'}}"></p>
或者
<p stat61-event="eventConfId"></p>
Stat61.events.send('domEvent', [{
    eventType: 'dblclick',
    eventName: 'test',
    confId: '.clickable1',
    data: {
        pageTitle: '中秋报名活动页面',
        eventDesc: '这是一个点击事件'
    },
}])

4、时间计数埋点

// 开始一个时间
Stat61.events.send('timeEvent', {
  eventName: 'pageIn',
    data: {
        pageTitle: '中秋报名活动页面11'
    },
}, 'timeStart')

// 结束一个时间并上报
Stat61.events.send('timeEvent', {
    eventName: 'pageIn',
}, 'timeEnd')

异常上报

1、手动上报

Stat61.errors.track(data)

Stat61.errors.multiTrack([data1, data2])

2、系统会自动上报请求不成功(Http Status非200)、js报错、资源加载异常等

3、自定义上传接口

Stat61.init({
	...
	doReport: (errorInfo) => {
		// getErrorInfo, you can do upload
	}
})

// or

Stat61.config.set('doReport', (errorInfo) => {
	// getErrorInfo, you can do upload
})


errorInfo = {
	userId,
    project,
    version,
    ua: window.navigator.userAgent,
    location: window.location.href,
    logs: errorData
}