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

如何設計

在寫代碼前，可以先設計出代碼大概的結構，這樣在寫的時候才會思路清晰。在埋點數據中，性能分析和錯誤監(jiān)聽可能會復雜一點。性能分析可以使用performance.timing

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

錯誤監(jiān)聽可參考文章：如何監(jiān)聽Vue項目報錯的4種方式

完整代碼

    class StatisticsSDK {
    constructor() {
      this.initPerformance(); // 性能分析
      this.initError(); // 錯誤監(jiān)聽
    }
    // 初始化性能分析
    initPerformance() {
      const url = 'xxx';
      this.send(url, performance.timing)
    }

    // 初始化錯誤監(jiān)聽
    initError() { 
      window.addEventListener('error', event => { 
        const {error, lineno, colno} = event;
        this.error(error, {lineno, colno})
      })
      // Promise 未catch的錯誤
      window.addEventListener('unhandledrejection', event => {
        this.error(new Error(event.reason), {type: 'unhandledrejection'})
      })
    }

    // 發(fā)送埋點數據，作為公共方法被調用
    send(url, params = {}) {
      params.id = Date.now(); // 當前時間戳
      const arr = [];
      for (let key in params) {
        arr.push(`${key}=${params[key]}`);
      }
      const newUrl = `${url}?${arr.join('&')}`; // 參數拼接在請求地址上
      // 使用img發(fā)送埋點數據
      // const img = new Image();
      // img.src = newUrl;
      const img = document.createElement('img');
      img.src = newUrl;
    }

    // 頁面訪問量
    pv() {
      const url = 'xxxx'
      // 調用send發(fā)送
      this.send(url, {key: 'pv', value: location.href})
    }

    // 自定義事件
    event(key, value) {
      const url = 'xxxx'; // 服務端地址
      // 調用send發(fā)送
      this.send(url, {key, value})
    }

    // 未捕獲的錯誤，或者用戶自行發(fā)送錯誤埋點數據時
    error(error, info = {}) {
      const url = 'xxx';
      const {message, stack} = error;
      this.send(url, {message, stack, ...info})
    }
  }
  const s = new StatisticsSDK();

總結

本文主要使用img來實現埋點數據的發(fā)送，考慮了跨域、兼容性，但是也存在比較大的缺陷：如果用戶禁用網頁加載圖片，那么將無法正常發(fā)送埋點數據。這種情況下，可以使用script實現本案例，兩者的差異可以參考詳解JavaScript發(fā)送埋點請求的兩種方式，可以使用script實現本案例。

到此這篇關于JavaScript利用img實現前端頁面埋點功能的文章就介紹到這了,更多相關JavaScript埋點功能內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: