第JavaScript利用img實(shí)現(xiàn)前端頁面埋點(diǎn)功能目錄數(shù)據(jù)類型技術(shù)方案如何設(shè)計(jì)完整代碼總結(jié)做數(shù)據(jù)分析的時(shí)候，可能會(huì)遇到一個(gè)問題：如何獲取足量的有效數(shù)據(jù)。簡(jiǎn)單記錄用戶登錄IP肯定是不能滿足要求的，這個(gè)時(shí)候就需要我們?cè)谇岸隧撁媛顸c(diǎn)，也就是數(shù)據(jù)采集點(diǎn)。如何來實(shí)現(xiàn)一個(gè)前端埋點(diǎn)功能，本文就帶你上手試試。

數(shù)據(jù)類型

首先，我們需要明確埋點(diǎn)需要哪些數(shù)據(jù)，這個(gè)和具體的業(yè)務(wù)需求有關(guān)。但是我們?cè)O(shè)計(jì)的時(shí)候，還是應(yīng)該盡量考慮：

pv：頁面訪問量uv：用戶訪問量自定義事件頁面性能加載數(shù)據(jù)報(bào)錯(cuò)信息

埋點(diǎn)數(shù)據(jù)范圍清晰了，那么怎么來實(shí)現(xiàn)埋點(diǎn)呢？

技術(shù)方案

首先我們不建議使用ajax發(fā)送http的方式將埋點(diǎn)數(shù)據(jù)發(fā)送到服務(wù)端，原因主要有兩個(gè)：

可能存在跨域的風(fēng)險(xiǎn)，例如使用第三方的接口可能存在兼容性問題，例如使用fetch來發(fā)送請(qǐng)求就不兼容IE

其他原因也有，但不是主要的。這里，我們建議使用img或者script來實(shí)現(xiàn)埋點(diǎn)數(shù)據(jù)的發(fā)送，這兩個(gè)屬于原生的HTML屬性，兼容性比ajax要好很多，而且支持跨域。img和script如果要細(xì)分的話，還是有差異的，感興趣的朋友可以移步：詳解JavaScript發(fā)送埋點(diǎn)請(qǐng)求的兩種方式，本文將選擇img來實(shí)現(xiàn)埋點(diǎn)。

如何設(shè)計(jì)

在寫代碼前，可以先設(shè)計(jì)出代碼大概的結(jié)構(gòu)，這樣在寫的時(shí)候才會(huì)思路清晰。在埋點(diǎn)數(shù)據(jù)中，性能分析和錯(cuò)誤監(jiān)聽可能會(huì)復(fù)雜一點(diǎn)。性能分析可以使用performance.timing

performance的每一個(gè)屬性的作用節(jié)點(diǎn)可參考下圖：

錯(cuò)誤監(jiān)聽可參考文章：如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式

完整代碼

classStatisticsSDK{

constructor(){

this.initPerformance();//性能分析

this.initError();//錯(cuò)誤監(jiān)聽

//初始化性能分析

initPerformance(){

consturl='xxx';

this.send(url,performance.timing)

//初始化錯(cuò)誤監(jiān)聽

initError(){

window.addEventListener('error',event={

const{error,lineno,colno}=event;

this.error(error,{lineno,colno})

//Promise未catch的錯(cuò)誤

window.addEventListener('unhandledrejection',event={

this.error(newError(event.reason),{type:'unhandledrejection'})

//發(fā)送埋點(diǎn)數(shù)據(jù)，作為公共方法被調(diào)用

send(url,params={}){

params.id=Date.now();//當(dāng)前時(shí)間戳

constarr=[];

for(letkeyinparams){

arr.push(`${key}=${params[key]}`);

constnewUrl=`${url}${arr.join('')}`;//參數(shù)拼接在請(qǐng)求地址上

//使用img發(fā)送埋點(diǎn)數(shù)據(jù)

//constimg=newImage();

//img.src=newUrl;

constimg=document.createElement('img');

img.src=newUrl;

//頁面訪問量

pv(){

consturl='xxxx'

//調(diào)用send發(fā)送

this.send(url,{key:'pv',value:location.href})

//自定義事件

event(key,value){

consturl='xxxx';//服務(wù)端地址

//調(diào)用send發(fā)送

this.send(url,{key,value})

//未捕獲的錯(cuò)誤，或者用戶自行發(fā)送錯(cuò)誤埋點(diǎn)數(shù)據(jù)時(shí)

error(error,info={}){

consturl='xxx';

const{message,stack}=error;

this.send(url,{message,stack,...info})

consts=newStatisticsSDK();

總結(jié)

本文主要使用img來實(shí)現(xiàn)埋點(diǎn)數(shù)據(jù)的發(fā)送，考慮了跨域、兼容性，但