监控平台之pvuv/点击事件/路由上报

本文主要是介绍监控平台之pvuv/点击事件/路由上报，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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 historylet 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); 
} 

这篇关于监控平台之pvuv/点击事件/路由上报的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---