监控平台之pv&uv/点击事件/路由上报

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