前端日志统计工具

历史版本

版本号	发布日期	说明
1.0.0	2022.01.20
1.0.1	2022.01.21	修复事件委托bug
1.0.2	2022.02.08	新增ajax发送请求方式

1.安装

直接用<script>引入

在常规的前端页面中可使用<script>标签引入，此时js4log会被注册为一个全局变量js4Log，请通过该对象进行相关的配置和事件注册

<script type="text/javascript" src="./x.x.x/js4Log.js"></script> 
<script>
js4Log.config({
  pageId: 123123,
  cusParam: {
    cus1: 'cus1...',
    cus2: 'cus2...',
  },
})
</script>

NPM

对于使用spa框架开发的项目时建议使用NPM进行安装

npm install --save js4log

import js4Log from 'js4Log/dist/js4Log'

js4Log.config({
  pageId: 123123  
  accessLog:false,
  loadLog:false,
  stayLog:false,
  cusParam: {
    cus1: 'cus1...',
    cus2: 'cus2...',
  },
})

对于SPA应用,需要在router守卫中重置pagePath，对于Vue来说，需要使用fullPath来保证携带了所有的GET参数

router.beforeEach((to, from, next) => {
    js4Log.config({
        accessLog:true,
        stayLog:true,
        loadLog:true,
        pagePath: `#${to.fullPath}`,
    })
    ...
})

2.配置项

js4Log.config(Object)

参数（Object）

属性	类型	默认值	必填	说明
pageId	Number	0	否	页面vID
from	String	''	否	预留业务源字段
finger	Boolean	true	否	是否开启指纹追踪
fingerKey	String	'site_tp'	否	指纹追踪cookie的Key名
defaultParams	Boolean	true	否	是否添加默认浏览器参数
getQuery	Array	[ ]	否	需要携带到日志参数中的的get参数数组
throttleTime	Number	200	否	函数节流的响应延迟（毫秒）
sendLogType	String	'img'	否	打日志方式img：资源src无跨域问题（推荐）/ajax：ajax请求方式
protocol	String	''	否	日志接口协议
domain	String	''	否	日志接口域名
port	String	''	否	日志接口端口
path	String	hm.gif	否	日志资源路径，支持多级
accessLog	Boolean	true	否	是否开启access日志（PV）
scrollLog	Boolean	true	否	是否开启window原生滚动事件日志
stayLog	Boolean	true	否	是否开启驻留日志
loadLog	Boolean	true	否	是否开启load事件日志
pagePath	String	''	否	页面path,SPA应用容易用到
cusParam	Object	{}	否	自定义全局日志参数

3.公用方法

对于需要自定义上报日志的情况，可手动进行日志注册和日志上报

对于需要支持高级选择器的，需要手动引入Sizzle模块:

npm install sizzle

import Sizzle from 'sizzle'

js4Log.initLog(Object)

参数（Object）

属性	类型	默认值	必填	说明
el	String	-	是	�DOM对象选择，支持多种选择器，需要手动引入Sizzle
evtType	String	-	是	html原生事件名
params	Object	-	是	自定义携带参数

比如需要不使用默认的滚动日志并自定义滚动日志

js4Log.config({
   scrollLog:false 
})

js4Log.initLog(window,'scroll',{ info:'customScrollLog'})

则会在window注册一个scroll日志，并添加自定义参数，类似的日志可以注册到任意DOM的任意原生事件上

js4Log.log(params)

立即上报一条日志，有3种调用方式：

js4Log.log(params)

js4Log.log(params, evt | fn)

js4Log.log(params, evt, fn)

参数（Object）

属性	类型	默认值	必填	说明
params	Object	-	是	自定义携带参数
evt	Event	-	否	DOM Event事件
fn	Function	-	否	日志发送成功后的回调函数

成功回调函数参数（Object res）

属性	类型	值	说明
code	Number	0	错误码
msg	String	'send success'	错误信息

失败回调函数参数（Object err）

属性	类型	值	说明
code	Number	1	错误码
error	Object	Event对象	错误信息

比如通过下列方式进行会回调：

js4Log.log({...params},e,function(e){
    if(e.code == 1){
        console.log('发送失败',e.error)
    } else if(e.code == 0){
        console.log('发送成功',e.msg)
    }  
})

js4Log.addExtra(params)

添加全局参数,这个和config中的customParam相互独立，并具有更高的优先级

参数（Object）

属性	类型	默认值	必填	说明
params	Object	-	否

js4Log.removeExtra(key)

删除指定参数

参数（String | Array）

属性	类型	默认值	必填	说明
key	String 或 Array	-	否

js4Log.getLpvs()

返回当前日志的lpvs参数

js4Log.getPvs()

返回当前日志的pvs参数

注意

本日志工具的方法在对同一个对象的同一个事件进行日志初始化时，会先解绑上一次的日志事件，而不是追加。