Img前端埋点

背景

对项目中统计一些用户行为、某些事件点击量、某些重要页面的曝光量等信息的统计；

统计信息

• 某些页面pv、页面停留时间
• 浏览器版本及操作系统信息
• 某些按钮的点击次数
• 操作用户的信息
• ...

埋点方案

• 页面pv，停留时间这些可以通过url跳转及跳出时间进行统计
• 浏览器信息直接window获取
• 可以全局监听 click 事件，通过给 Button 、Link 等添加 data-id 进行统计
  在vue项目中可以通过监听vue-router 钩子和 directive 自定义指令进行实现，项目为 react项目，以下为react实现方式，其实实现思路都是一样的

实现方案

项目中使用的是 img 来实现埋点数据的发送，img属于原生的HTML属性，兼容性比ajax要好很多，而且支持跨域，但如果用户禁用网页加载图片，那么将无法正常发送埋点数据。

具体代码实现

• 公共类封装

export interface IPointProps {
  buttonType?: string  // 按钮类型
  browerVersion?: string // 浏览器版本
  userInfo?: string //用户信息
  referrer?: string //来源
  currentUrl?: string // 当前url
}
// 公共类封装
class PointSDK {
    constructor() {
      // 性能分析
      this.initPerformance(); 
    }
    // 初始化性能分析
    initPerformance() {
      const url = 'xxx';
      this.send(url, performance.timing)
    }
    // 获取浏览器信息
    getBrowerVersion() {
        const navigator = window.navigator
        return {
            browerVersion: navigator.userAgent
        }
    }
    // 通过img发送埋点数据
    send(url: string, params = {} as any) {
        const arr = []
        for (let key in params) {
            arr.push(`${key}=${params[key]}`)
        }
        const newUrl = `${url}?${arr.join('&')}`
        // 使用img发送埋点数据
        const img = new Image();
        img.src = newUrl;
    }
    // 自定义事件
    event(baseurl: string, value: IPointProps) {
        const api = `${baseurl}${'/api/point'}`
        const client = this.getClient()
        // 处理url中的 特殊符号，# & 等
        // const url = `${window.location.href?.replace(/#/g, '%23').replace(/&/g, '%26')}` 

        // 存在用户信息则统计，反之不需要
        value.userInfo && this.send(api, { ...client, ...value })
    }
}

const pointSDK = new PointSDK();

const Point = {
    event: (baseurl: string, value: IPointProps) => pointSDK.event(baseurl, value)
}

本文参考阿里开发者文档