前端怎么做用戶行為統計分析

1.解釋

用戶行為統計分析，是指在獲得網站訪問量基本數據的情況下，對有關數據進行統計、分析，從中發現用戶訪問網站的規律，並將這些規律與網絡營銷策略等相結合，從而發現目前網絡營銷活動中可能存在的問題，並為進一步修正或重新制定網絡營銷策略提供依據。這是狹義的只指網絡上的用戶行為分析。

2.思路

3.前端能做什么

3.1獲取性能數據

如何獲取頁面性能數據請看【使用performance進行前端性能監控】

3.2發送信息到服務器

從網頁上收集的信息要發送到服務器存儲，以下我總結了三種方式：

ajax

優點

• 兼容性好。

缺點

• 在異步情況下關閉頁面時會導致服務器接收不到請求，因為頁面關閉時，瀏覽器會自動忽略掉在卸載（unload）事件中的異步XMLHttpRequest。所以，如果需要在卸載頁面之前發送信息需要使用同步的ajax，但在unload里使用同步的ajax請求會使得頁面卸載延遲到ajax請求回來之后，倘若ajax請求的時間很久，用戶體驗會非常不好。

/**
* ajax請求
* @param url 路徑
* @param data 數據
* @param async 是否同步
* @returns {Function}
*/
function ajax({url, data = {}, async = true}) {
  return new Promise((resolve, reject) => {
    var client = new XMLHttpRequest()
    client.onreadystatechange = function () {
      var responseText = client.responseText
      if (client.readyState === 4 && client.status === 200) {
        resolve(JSON.parse(responseText))
      }
    }
    client.open('get', url, async)
    client.setRequestHeader('Content-Type', 'text/plain;charset=UTF-8')
    client.send()
  })
}

偽圖片請求

優點

• 兼容性好。

缺點

• 同上，這種方法在unload執行時還是會延遲頁面的加載。
• 沒有返回信息，對於圖片請求的方式服務器只會返回一個1x1的圖片流，不能接收到其他信息。

function imgLog ({url, data}) {
  let queryData = Lang.queryStr(data) // 這里把數據序列化
  let img = new Image()
  img.src = url + (queryData ? ('?' + queryData) : '')
}

navigator.sendBeacon

可用於通過HTTP將少量數據異步傳輸到Web服務器。該方法專門是為了滿足“統計和診斷代碼”的需求而出現的

優點

• 將會在有機會時異步地向服務器發送數據，同時不會延遲頁面的卸載或影響下一導航的載入性能。這就解決了提交分析數據時的所有的問題：使它可靠，異步並且不會影響下一頁面的加載。

缺點

• 兼容性不好

if (navigator.sendBeacon) {
  navigator.sendBeacon(url);
}