[聊一聊系列]聊一聊前端功能統計那些事兒

時間 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