PC端、移動端H5數據埋點JSSDK

目前只實現了基本的事件上報設計，更貼合業務的埋點可在此設計基礎上擴展，比如上報時間戳、頁面停留時長、頁面渲染時長等。
SDK GIthub地址

一、安裝

// 頁面head引入
<script src="./webTrack.js"></script>

二、配置

track對象中的clientConfig為埋點配置項：

• serverUrl: 埋點上報地址
• version: 當前SDK版本

三、生命周期事件上報

默認為頁面生命周期添加了事件上報，直接修改webTrack.js中的生命周期函數完成定制上報。
生命周期函數如下：

• DOMContentLoaded
• load
• beforeunload
• unload

四、自定義事件上報

給window對象注冊了__TRACK_，調用__TRACK.track()方法進行自定義事件上報。

const options = {
  btnClickCount: 12
}
__TRACK_.track(options)

五、代碼

;(function() {
  const track = {
    // 應用生命周期Id，貫穿本次系統加載
    sessionId: '',

    // 頁面生命周期
    pageLife: {
      DOMContentLoaded: function() {
        console.log('DOM is ready')
        const DOMContentLoadedOptions = {}
        track._sendDataToServer(track._parseParam(DOMContentLoadedOptions))
      },
      load: function() {
        console.log('Page loaded')
        const loadOptions = {}
        track._sendDataToServer(track._parseParam(loadOptions))
      },
      beforeunload: function(event) {
        console.log('Page beforeunload')
        const beforeunloadOptions = {}
        track._sendDataToServer(track._parseParam(beforeunloadOptions))
      },
      unload: function() {
        // 在這里可以使用navigator.sendBeacon(url, data)發送異步傳輸
        console.log('Page unloaded')
        const unloadOptions = {}
        track._sendDataToServer(track._parseParam(unloadOptions))
      }
    },

    // 基礎配置
    clientConfig: {
      serverUrl: "",
      version: "1.0.0"
    },

    // 公共參數
    columns: {
      uid: '55555'
    },

    /**
     * 參數編碼返回字符串
     */
    _parseParam: function(param) {
      // 公共參數拼接
      const data = Object.assign({sid: this.sessionId}, this.columns, param)
      var params = "";
      for (var e in data) {
        if (e && data[e]) {
          params += encodeURIComponent(e) + "=" + encodeURIComponent(data[e]) + "&";
        }
      }
      if (params) {
        return params.substring(0, params.length - 1);
      } else {
        return params;
      }
    },

    /**
     * 數據上報
     * @param { String } data 
     */
    _sendDataToServer: function(data) {
      // 發送數據data到服務器，其中data是一個字符串
      var that = this;
      var i2 = new Image(1,1);
      i2.onerror = function(){
        // 這里可以進行重試操作
      };
      i2.src = this.clientConfig.serverUrl + "?" + data;
      console.log(i2.src)
    },

    /**
     * 產生uuid
     */
    _generateId: function() {
      var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
      var tmpid = [];
      var r;
      tmpid[8] = tmpid[13] = tmpid[18] = tmpid[23] = '-';
      tmpid[14] = '4';

      for (i=0; i<36; i++) {
        if (!tmpid[i]) {
          r = 0| Math.random()*16;
          tmpid[i] = chars[(i==19) ? (r & 0x3) | 0x8 : r];
        }
      }
      return tmpid.join('');
    },

    /**
     * 應用開始
     */
    _startSession() {
      this.sessionId = this._generateId()
    }
  }

  // 綁定頁面生命周事件
  Object.keys(track.pageLife).forEach((hook) => {
    window.addEventListener(hook, track.pageLife[hook])
  })

  // 暴露公共方法
  window.__TRACK_ = {
    /**
     * 自定義事件上報
     * @param {*} options 上報數據
     */
    track: function(options) {
      track._sendDataToServer(track._parseParam(options))
    }
  }

  const onload = function onload () {
    track._startSession()
  }

  onload()
})()