pv/uv上报方式
// 这里是pv的上报方式
// 可以用自定义标签定义data-spider,通过body-parser等方式获取body标签的值,进行上报
//
export default function pv() {
const reportData = {
type: 'behavior',
subType: 'pv',
startTime: performance.now(),
pageUrl: window.location.href,
uid: generateUniqueId(),
referrer: window.referrer,
}
lazyReportBatch(reportData)
}
// 可以自定义按钮的上报函数,暴露给外部调用
export default function funPV(options) {
const reportData = {
type: 'behavior',
subType: 'pv',
startTime: performance.now(),
pageUrl: window.location.href,
uid: generateUniqueId(),
referrer: window.referrer,
}
for (const key in options) {
if (reportData.hasOwnProperty(key)) {
reportData[key] = options[key];
}
}
lazyReportBatch(reportData)
}
点击事件上报
监听mousedown,touchstart进行监听点击事件,
import {lazyReportBatch} from "../report"
export default function click() {
['mousedown', 'touchstart'].forEach(eventType => {
window.addEventListener(eventType, e => {
const target = e.target;
if (!target.tagName) {
return
}
const reportData = {
type: 'behaviour',
subType: 'click',
pageUrl: window.location.href,
target: target.tagName,
clientX: e.clientX,
clientY: e.clientY,
startTime: e.timeStamp,
innerHtml: target.innerHtml,
outerHtml: target.outerHtml,
width: target.offsetWidth,
height: target.offsetHeight,
path: e.path
}
lazyReportBatch(reportData)
})
})
}
路由上报
分为hashchange和popstate,根据是否有#进行分别,区别如下
hashChange 触发条件
hash是URL中#后面那部分,同时修改hash值不会引起页面的刷新,也不会向服务器重新发送请求。通过hashchange事件可以监听它的变化。改变hash值有以下三种方式:
- 浏览器前进后退改变URL
- 通过a标签锚点方式改变URL。
- 通过window.location.hash改变URL
- 调用history的back、go、forward方法
不能触发事件的方式
- pushState和replaceState
备注:以上三种方式均可以触发hashchang事件, pushState和replaceState均不能触发hashchang事件
popstate触发条件
history提供了popstate监听事件,但是只有以下两种情况会触发该事件
- 点击浏览器前进后退的按钮
- 显示调用history的back、go、forward方法
- 不能触发事件的方式
pushState和replaceState
- a标签不能触发,因为非锚点模式直接跳转了页面。
这里记录了路由的from路径和to路径,根据业务具体需求上报参数
import {lazyReportBatch} from "../report"
import {generateUniqueId} from "../../utils"
export default function pageChange(data) {
// hash history
let oldUrl = ''
window.addEventListener('hashchange', function(event) {
const newUrl = window.location.href;
const reportData = {
from: oldUrl,
to: newUrl,
type: 'behavior',
subType: 'hashchange',
pageUrl: window.location.href,
startTime: this.performance.now(),
uuid: generateUniqueId(),
}
lazyReportBatch(reportData)
oldUrl = newUrl;
}, true);
// 点击后退前进的时间
let from = ''
window.addEventListener('poststate', function(event) {
const to = window.location.href;
const reportData = {
from,
to,
type: 'behavior',
subType: 'poststate',
pageUrl: window.location.href,
startTime: this.performance.now(),
uuid: generateUniqueId(),
}
lazyReportBatch(reportData)
from = to;
}, true);
}