[聊一聊系列]聊一聊前端功能统计那些事儿

时间 2019-11-10

标签系列前端功能统计那些事儿繁體版

原文原文链接

欢迎你们收看聊一聊系列，这一套系列文章，能够帮助前端工程师们了解前端的方方面面（不只仅是代码）：https://segmentfault.com/blog...javascript

1. 什么是功能统计

做为一名开发，咱们的产品发布出去以后，不管是产品仍是运营，其实都是想及时了解产品对用户产生的影响的。用户到底喜欢什么不喜欢什么。可是若是拉住用户去一个个问的话，也没法获得最真实的大众的想法。因而，运用大数据进行分析，就变成了产品们的利器。html

那么这些反映了用户真实行为的数据，就得靠前端工程师们来打印了。前端

好比，你想看一个功能有多少用户进行了点击，来证实用户是否喜欢这个功能，亦或是你想看看用户究竟会在你的页面停留多长时间，从而判断用户的黏性。那么，在用户点击那个功能的时候，前端发送一条日志到服务端，这样积累下去，咱们就能得到，天天有多少用户在点击某一个功能了。在功能发生迭代后，咱们也能根据统计，来判断用户是否喜欢新的变化。java

2. 如何统计

通常来说，只要在想统计的行为发生时，发送一条请求到达服务端便可。这样咱们的服务端就有了相应的记录。咱们就能开心的利用记录数量来判断点击数量了。nginx

通常来说咱们没必要为了发送请求，就在各处点击的地方加个ajax，其实有种发送请求的方式比ajax更加的简单。并且还避免了跨域问题。git

其实直接给一个图片、script标签赋值地址，就完成了一次GET请求。github

例(如图2.1所示)：ajax

(new Image()).src = 'https://gm.mmstat.com/tmallfp.4202.7';

图2.1segmentfault

咱们看到，轻轻松松就发送了一条请求出去，亦或者是使用script标签，或者fetch之类的方式也能够达到目的。windows

本人观察了一下腾讯网和淘宝网，的日志。发现淘宝网使用的是请求一张空图片到服务端，以此来实现的日志打印。

而腾讯网使用的，则是发送一个js请求的方式，来打印日志(如图2.2)

图2.2

其实不管使用什么方式，都异曲同工，最终咱们获得的是服务端的一条access日志，利用这个日志，就能够记录了。

咱们在开发的时候，在用户发生各个行为时，发送一条记录了此行为的数据。这样就能记录本身产品的方方面面了。

3. 服务端如何接收并使用数据

通常来说服务器的server都会有access日志。这里拿nginx来举个例子。咱们须要搭建一个nginx服务器，而后馋看nginx的conf(安装路径/conf/nginx.conf)如图3.1

图3.1

nginx能够配置一个access日志的文件，每当有请求打到当前的nginx上，都会产出一条access日志。

日志的路径也是可配置的，甚至能够配置文件的切割，这里就再也不赘述。

图3.2

接着，咱们访问一下这个服务，因而就产生了一条access日志(如图3.2)，咱们只要在功能点击的时候，往这台机器上发送一个简单的请求便可产生日志啦。接下来把日志整理整理，就能够产出产品经理们想要的反馈了。

4. 多种多样个性化的日志

若是咱们须要各类各样的日志，那么能够把参数给多样化，用参数来区分各个不一样地方的点击或者是各类交互行为。咱们的access日志中，会留存有完整的URL，只要咱们将其解析，就能拿到各处的点击行为了。

5. 跟我学---进行一次简单的打印日志

为了各位考虑，本小节的实验在windows下进行。首先，咱们将下载一个nginx（本文最后的示例代码中也有），而后，更改其conf文件(如图5.1)。

图5.1

并将端口改成8091。而且去掉注释，打开access日志。

图5.2

双击启动便可。而后，咱们访问一下http://localhost:8091/

发现nginx已然运行成功(如图5.3)

图5.3

接下来，咱们看一下logs/access.log中的记录(如图5.4)

图5.4

多了一条，证实有记录了。

接着，咱们建立一个html（在哪儿建立都行）--- testlog.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id="click2log">点我</button>
        <script type="text/javascript">
            document
            .getElementById('click2log')
            .addEventListener('click', function () {
                (new Image()).src = 'http://localhost:8091/?action=log&clk=button';
            });
        </script>
    </body>
</html>

运行页面，点击按钮。咱们发现，发送出一条日志(如图5.5)

图5.5