摘要：歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面不僅僅是代碼什么是功能統計作為一名開發，我們的產品發布出去之后，無論是產品還是運營，其實都是想及時了解產品對用戶產生的影響的。下一章，我們將繼續聊聊速度統計。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog...

作為一名開發，我們的產品發布出去之后，無論是產品還是運營，其實都是想及時了解產品對用戶產生的影響的。用戶到底喜歡什么不喜歡什么。但是如果拉住用戶去一個個問的話，也無法得到最真實的大眾的想法。于是，運用大數據進行分析，就變成了產品們的利器。

那么這些反映了用戶真實行為的數據，就得靠前端工程師們來打印了。

比如，你想看一個功能有多少用戶進行了點擊，來證明用戶是否喜歡這個功能，亦或是你想看看用戶究竟會在你的頁面停留多長時間，從而判斷用戶的黏性。那么，在用戶點擊那個功能的時候，前端發送一條日志到服務端，這樣積累下去，我們就能獲得，每天有多少用戶在點擊某一個功能了。在功能發生迭代后，我們也能根據統計，來判斷用戶是否喜歡新的變化。

一般來講，只要在想統計的行為發生時，發送一條請求到達服務端即可。這樣我們的服務端就有了相應的記錄。我們就能開心的利用記錄數量來判斷點擊數量了。

一般來講我們不必為了發送請求，就在各處點擊的地方加個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日志，利用這個日志，就可以記錄了。

我們在開發的時候，在用戶發生各個行為時，發送一條記錄了此行為的數據。這樣就能記錄自己產品的方方面面了。

一般來講服務器的server都會有access日志。這里拿nginx來舉個例子。我們需要搭建一個nginx服務器，然后饞看nginx的conf(安裝路徑/conf/nginx.conf)如圖3.1

圖3.1

nginx可以配置一個access日志的文件，每當有請求打到當前的nginx上，都會產出一條access日志。

日志的路徑也是可配置的，甚至可以配置文件的切割，這里就不再贅述。

圖3.2

接著，我們訪問一下這個服務，于是就產生了一條access日志(如圖3.2)，我們只要在功能點擊的時候，往這臺機器上發送一個簡單的請求即可產生日志啦。接下來把日志整理整理，就可以產出產品經理們想要的反饋了。

如果我們需要各種各樣的日志，那么可以把參數給多樣化，用參數來區分各個不同地方的點擊或者是各種交互行為。我們的access日志中，會留存有完整的URL，只要我們將其解析，就能拿到各處的點擊行為了。

為了各位考慮，本小節的實驗在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

    
        
    
    
        點我
        
    

運行頁面，點擊按鈕。我們發現，發送出一條日志(如圖5.5)

圖5.5

我們再次打開access.log，發現多了一條日志(如圖5.6)

圖5.6

于是我們的目的達成了。以后可以用action=log并且，clk=button的記錄，來看有多少用戶點擊了按鈕了。

示例代碼在此：

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

在日常打日志中，我們會遇到這樣那樣的問題，這里謹把我再工作中遇到的問題與大家分享一下。

1. 當點擊發生本頁跳轉的時候，同時發送日志有一定幾率無法發出。

當a標簽發生點擊的時候，我們往往會發送一條外鏈的點擊日志，但是，如果這個a標簽是本頁跳轉（而不是新開頁面）的話，那么在日志發送之前，頁面有可能就已經跳轉了，這時，所有的請求都是發不出去的。目前應對這種狀況，沒有什么特別好的辦法，

可以嘗試使用先發日志，在日志的回調用進行跳轉，這樣就有可能造成跳轉慢。

使用新式API?navigator.sendBeacon()，可以在本頁面跳轉之后，堅強的發出一條請求。但是兼容性不太好。

2. 發送的參數不要太多，太長

因為我們的請求畢竟算是GET請求，肯定有URL長度的限制。所以，發了大量的信息的話，怕會被截斷。

3. 有一定丟失率

因為網絡等等的原因，發送的日志，丟失率是肯定會有的，各位如果習慣的話，也就好了。

不要走開，請關注我。下一章，我們將繼續聊聊速度統計。

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

原創文章，版權所有，轉載請注明出處