埋点～～～

埋点

依赖

npm init
tsc --init
npm install rollup -D
npm install rollup-plugin-dts -D    // 生成声明文件
npm install rollup-plugin-typescript2 -D  // ts插件支持
npm install typescript -D              //

rollup.config.js

import path from 'path'
import ts from 'rollup-plugin-typescript2'
import dts from 'rollup-plugin-dts'
export default [
    {
        input:'./src/core/index.ts',
        output: [
            {
                file:path.resolve(__dirname,'./dist/index.esm.js '),
                format:'es'
            },
            {
                file:path.resolve(__dirname,'./dist/index.cjs.js '),
                format:'cjs'
            },
            {
                file:path.resolve(__dirname,'./dist/index.js '),
                format:'umd',
                name:'tracker'
            }
        ],
        plugins:[
            ts()
        ]
    },
    {   // 这个是声明 文件的
        input:'./src/core/index.ts',  
        output:{
            file:path.resolve(__dirname,'./dist/index.d.ts '),
            format:'es'
        },
        plugins:[
            dts()
        ]
    }
]

package.json 配置指令(他版本有问题)

{
  "name": "tracker",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.77.0",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-typescript2": "^0.32.1",
    "typescript": "^4.7.4"
  }
}

文件结构

core/ index.ts

import { DefaultOptons, Options, TrackerConfig } from "../type/index";
import { creatHistoryEvent } from "../utils/pv";
const MouseEventList: string[] = ['click', 'dblclick', 'contextmenu', 'mousedown', 'mouseup', 'mouseenter', 'mouseout', 'mouseover']
export default class Tracker {

    //这个是用户所传的参数
    public data: Options;
    constructor(options: Options) {
        this.data = Object.assign(this.initDef(), options)
        this.installTracker()
    }

    private installTracker() {
      //通过参数判断是否开启
        if (this.data.historyTracker) {
            this.ceptureEvents(['pushState', 'replaceState', 'popstate'], 'history-pv')
        }
        if (this.data.hashTracker) {
            this.ceptureEvents(['hashchange'], 'hash-pv')
        }
        if (this.data.domTracker) {
            this.targetKeyReport()
        }
    }

    private initDef(): DefaultOptons {
        window.history['pushState'] = creatHistoryEvent('pushState')
        window.history['replaceState'] = creatHistoryEvent('replaceState')
        return <DefaultOptons>{
            historyTracker: false,
            hashTracker: false,
            domTracker: false,
            jsError: false,
            sdkVersion: TrackerConfig.version
        }
    }

    public setUUID<T extends DefaultOptons['uuid']>(uuid: T) {
        this.data.uuid = uuid;
    }
    public setExtar<T extends DefaultOptons['extra']>(extra: T) {
        this.data.extra = extra
    }

    public sendTracker<T>(data: T) {
        this.reportTracker(data)
    }

    private ceptureEvents<T>(mouseEventList: string[], targetKet: string, data?: T) {
        mouseEventList.forEach(event => {
            window.addEventListener(event, (e) => {
                this.reportTracker({
                    event,
                    targetKet,
                    data
                })

            })
        })
    }
  
    private reportTracker<T>(data: T) {
        const params = Object.assign(this.data, data, { time: new Date().getTime() })
        let headers = {
            type: 'application/x-www-form-urlencoded'
        }
        let blob = new Blob([JSON.stringify(params)], headers)
        navigator.sendBeacon(this.data.requestUrl, blob)
    }
    private targetKeyReport() {
        MouseEventList.forEach(key => {
            window.addEventListener(key, (e) => {
                //拿到事件的触发元素
                const targer = e.target as HTMLElement
                //判断该元素中有没有 设定好的属性
                const targetKey = targer.getAttribute('target-ket')
                // 如果是有改属性则发送
                if (targetKey) {
                    this.reportTracker({
                        event: key,
                        targetKey
                    })
                }
            })
        })
    }
}

type/index.ts

/**
 * @requestUrl 接口地址
 * @historyTracker history上报
 * @hashTracker hash上报
 * @domTracker 携带Tracker-key 点击事件上报
 * @sdkVersionsdk版本
 * @extra透传字段
 * @jsError js 和 promise 报错异常上报
 */
 export interface DefaultOptons {
    uuid: string | undefined,
    requestUrl: string | undefined,
    historyTracker: boolean,
    hashTracker: boolean,
    domTracker: boolean,
    sdkVersion: string | number,
    extra: Record<string, any> | undefined,
    jsError:boolean
}

export interface Options extends Partial<DefaultOptons>{
    requestUrl:string
}
//版本
export enum TrackerConfig {
    version = '1.0.0'
}

util/pv.ts

export const creatHistoryEvent = <T extends keyof History> (type:T) =>{

    const origin = window.history[type]
    return function(this: any) {
        //我猜这是创建事件用的
        const res = origin.apply(this,arguments)

        const e = new Event(type)

        window.dispatchEvent(e)

        return res
    }
}