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

2019年8月30日 210次阅读 来源: 侯医生

迎接人人收看聊一聊系列，这一套系列文章，能够协助前端工程师们相识前端的各个方面（不仅仅是代码）：https://segmentfault.com/blog…

1. 什么是功用统计

作为一位开辟，我们的产物宣布出去今后，不管是产物照样运营，实在都是想实时相识产物对用户发作的影响的。用户终究喜好什么不喜好什么。然则假如拉住用户去一个个问的话，也没法取得最实在的群众的主意。因而，应用大数据举行剖析，就变成了产物们的利器。

那末这些反应了用户实在行动的数据，就得靠前端工程师们来打印了。

比方，你想看一个功用有若干用户举行了点击，来证实用户是不是喜好这个功用，亦或是你想看看用户终究会在你的页面停止多长时间，从而推断用户的黏性。那末，在用户点击谁人功用的时刻，前端发送一条日记到效劳端，如许积聚下去，我们就可以取得，天天有若干用户在点击某一个功用了。在功用发作迭代后，我们也能依据统计，来推断用户是不是喜好新的变化。

2. 怎样统计

平常来说，只需在想统计的行动发作时，发送一条要求抵达效劳端即可。如许我们的效劳端就有了响应的纪录。我们就可以高兴的应用纪录数目来推断点击数目了。

平常来说我们没必要为了发送要求，就在遍地点击的处所加个ajax，实在有种发送要求的体式格局比ajax越发的简朴。而且还避免了跨域题目。

实在直接给一个图片、script标签赋值地点，就完成了一次GET要求。

例(如图2.1所示)：

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

《[聊一聊系列]聊一聊前端功用统计那些事儿》
图2.1

我们看到，轻轻松松就发送了一条要求出去，亦或许是运用script标签，或许fetch之类的体式格局也能够到达目标。

本人视察了一下腾讯网和淘宝网，的日记。发明淘宝网运用的是要求一张空图片到效劳端，以此来完成的日记打印。

而腾讯网运用的，则是发送一个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

我们再次翻开access.log，发明多了一条日记(如图5.6)

《[聊一聊系列]聊一聊前端功用统计那些事儿》
图5.6

因而我们的目标达成了。今后能够用action=log而且，clk=button的纪录，来看有若干用户点击了按钮了。

示例代码在此：

https://github.com/houyu01/lo…

6. 须要注重的点

在日常打日记中，我们会碰到如许那样的题目，这里谨把我再工作中碰到的题目与人人分享一下。

1. 当点击发作本页跳转的时刻，同时发送日记有一定概率没法发出。

当a标签发作点击的时刻，我们往往会发送一条外链的点击日记，然则，假如这个a标签是本页跳转（而不是新开页面）的话，那末在日记发送之前，页面有能够就已跳转了，这时候，一切的要求都是发不出去的。现在应对这类状态，没有什么迥殊好的方法，

  1. 能够尝试运用先发日记，在日记的回挪用举行跳转，如许就有能够形成跳转慢。

  2. 运用新式API navigator.sendBeacon()，能够在本页面跳转今后，顽强的发出一条要求。然则兼容性不太好。

2. 发送的参数不要太多，太长

由于我们的要求毕竟算是GET要求，一定有URL长度的限定。所以，发了大批的信息的话，怕会被截断。

3. 有一定丧失率

由于收集等等的缘由，发送的日记，丧失率是一定会有的，列位假如习气的话，也就好了。

不要走开，请关注我。下一章，我们将继承聊聊速率统计。

https://segmentfault.com/a/11…

原创文章，版权一切，转载请说明出处

    原文作者：侯医生
    原文地址: https://segmentfault.com/a/1190000005861012
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞