前端怎么做用户行为统计分析

╰半夏微凉° 2022-04-27 19:42 297阅读 0赞

# 1.解释 #

> 用户行为统计分析，是指在获得网站访问量基本数据的情况下，对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。这是狭义的只指网络上的用户行为分析。

# 2.思路 #

用户行为分析.png

# 3.前端能做什么 #

前端行为流程图.png

## 3.1获取性能数据 ##

如何获取页面性能数据请看【[使用performance进行前端性能监控][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);
    }
    复制代码

[performance]: https://juejin.im/post/5c2c591be51d4554055593c6