你只有竭盡全力之後，才有資格說運氣不好。
目錄
- 為什麼要有監控平臺
- 第三方平臺
- 流量分析平臺
- 自己DIY一個
- 日誌採集平臺
- SPM
- 埋點流程
- 自己DIY一個
- Hiper
前言
我認為，流量分析平臺 + 日誌採集平臺 + 異常資訊採集 + ajax資訊採集 + 效能指標 = 監控平臺。
之前我寫過兩篇文章《前端效能優化交流》與《前端程式碼質量優化交流》。也可以看得出來，我是對比專案開發的流程來編寫文章的。監控平臺這一點對於大多公司來說並沒有那麼重要，但是對於一個完善的交付專案，這一點是必不可少的，相應的流量分析平臺、日誌採集平臺。視覺化的資料會給客戶最直觀的展現。
初衷：
自己想了解一些從外部統計專案資料的知識，探究一下原理，配合自己原來做過的一些東西，串聯起來，沉澱出一些東西，自己做一個。
為什麼要有監控平臺
PV、UV、IP等指標，也是老生常談。
PV(訪問量)：Page View，即頁面瀏覽量或點選量，使用者每次重新整理即被計算一次。
UV(獨立訪客)：Unique Visitor，一般使用cookie標記，訪問您網站的一臺電腦客戶端(比如一臺電腦開多個瀏覽器訪問則為多個UV)為一個訪客，00:00-24:00內相同的客戶端只會被計算一次。
IP(獨立IP)：指獨立IP數。00:00-24:00內相同IP地址之被計算一次(多臺電腦可能共用一個ip)。
最終反映的都是產品總體情況，資料的價值除了反映現狀，最重要的還是反饋回來指導業務增長。
說點通俗的，比如：閱讀類專案，必然會有監控平臺。排行榜、閱讀量，就是通過監控平臺統計出的結果。
高速發展的時代對於資料分析需求的精細化程度越來越高
對於現在形式來說，就像上面那句話，精細化程度越來越高。
我不僅要知道買產品的客戶有多少，我還想知道，客戶滑鼠明明放在了購買按鈕上，然後滑鼠移走了的客戶有多少。就差問問他為什麼沒買了。
第三方平臺
這個相信大家也不陌生，往往這個時候老闆讓你一天就搭建一個監控平臺。
老闆：“前端美男子，我需要我們專案的訪問量，最受歡迎的文章等所有資料，定期生成報表(省略6000字)...”
好處也不用多說，人家專門做這個的。這裡要注意：註冊賬號用老闆的，否則不好離職。
不好的地方，有些功能要花錢，有很多我們不需要的資料，定製化太差，不能維護。最最重要的一點，不是我們自己的。當然我的目的是自己玩一個小demo，簡單探究一下監控平臺的原理。
流量分析平臺能做到的功能
這裡我以百度統計為例，看一下他們官網上給自己的自我介紹。
可以統計一些概括上的表現，頁面上下游，訪客屬性，訪客地域，pv，uv，跳出率等等。還有一些百度獨有的功能，比如是通過什麼關鍵字從百度找到的你的網站。等等。
DIY
我們參照上面的功能列表，抽取一些我們能做到的資訊，抓取這些資料。
首先我們先看看我們能抓取哪些資料。
採集的內容包括：
- 當前頁URL，標題來源頁的URL（如果有）。
- 使用者身份識別資訊：cookieID 等。
- 使用者停留時間
- 客戶端/瀏覽器資訊和螢幕解析度。
- 當前業務的識別編碼，使用者操作的編碼
- DIY一些資訊。
這裡注意一下：
我們提交後臺上述的資訊，後臺同學可以記錄使用者的ip、根據ip獲取地址、訪問離開的時間。每一條資料即為一個pv，然後分組查詢ip即可查出每天的ip數，通過ip地址也可以查出使用者地域等資訊。
我們來參照一下掘金髮送統計資料的方式
上面我們可以看出，掘金用的百度統計平臺傳送日誌，先不管掘金用的什麼吧。傳送日誌的方式是一個空gif圖。下面引數也可以隱約猜到一些表面上的意思。剩下的就看你是怎麼約定的了。
解析度
ds: 1920x1080
當前觸發的DOM元素，後面是即將跳轉的URL？？不太確定
ep:-257.5*28*51*41*0*#juejin>div[2]>div>header>div>nav>ul>li[1]>ul>li[2]>a*31*21*a*https%3A%2F%2Fjuejin.im%2Factivities
瀏覽器使用的語言
ln: zh-cn
版本
v: 1.2.43
那我們就開始吧，首先封裝一個插入的monitor.js
這裡宣告瞭一個_map陣列，用來存放抓取的資料，以二維陣列的方式儲存。
然後又動態插入了一個analytics.js，在這個js中專門抓取資料，monitor檔案中還可以加入一些其他操作，我們後續來講。
analytics.js
我們在這裡抓取了一些簡單的資料，存放在_maq陣列中，並且通過encode轉義之後通過一個1x1大小的gif發出請求。按照專案的需求，可以自定義新增很多引數進去，大家自我發揮。
這裡當然也可以不走gif的模式傳送資料請求，我們也可以通過普通的ajax請求傳送，因為這個東西要封裝成元件單獨維護，這裡推薦Zepto $.Ajax 模組。
看一下效果。
我們就給百度統計介面傳送了一條日誌，因為沒有唯一識別的id，人家肯定是不會收的。估計百度會默默的把我的ip記下來 看看我要幹什麼。
我們還需要在後臺進行一些引數的新增，就我像上面所說的的ip等引數。然後我們就可以通過這些資料做一些視覺化介面（echarts, charts, bizcharts等）。比如這種炫酷的圖表。做一個自己的分析平臺，然後慢慢擴充。這個圖表是我通過bizcharts做的。
日誌採集平臺
上面的流量分析平臺抓取了一些概括性的資料，然而，我們需要業務上具體的資料，比如說使用者搜尋了什麼內容，點選了哪些按鈕，下了什麼單，等等。
我們統計這些資料的時候就需要埋點，是一個費時費力的活兒，但是，還是那句話，一個完善的交付專案，這些都是必須有的。
我這邊就簡單給大家介紹一下阿里的埋點解決方案。並且將日誌與上述流量分析方法進行結合。
SPM(Super Position Model)
SPM(Super Position Model)全稱超級位置模型。用來跟蹤頁面模組位置的編碼，標準spm編碼採用a.b.c.d.e的格式（各個位置編碼只能由 數字、小寫字母、連字元/減號 組成），其中a, b位是必須具備的. 各位的含義和部署規範如下:
a標識站點ID，站點ID是指包含特定業務含義的一類頁面的集合，比如女裝市場，就可以看為是一個站點。在部署時, SPM-a的宣告必須放在<head></head>閉合標籤內, 通過一個獨立的<meta>標籤宣告. 如下:
<head> ... <meta name="data-spm" content="申請的A位編碼"> ... </head>
複製程式碼b 標識頁面ID，頁面ID是指某一特定業務下的某一具體頁面，比如女裝市場下的女裝首頁。SPM編碼的前兩位a.b標識了唯一指定的一個頁面，並且跟頁面url的靜態部分（即url中?之前的部分）一一對應。在部署時, SPM-b的需要以標籤的一個擴充套件屬性(data-spm)的方式宣告, 如下:
<body data-spm="註冊的B位編碼">
複製程式碼特別注意: 若aplus.js的部署位置 位於head部分， 或因某些原因導致body屬性不能修改，則spm-AB位的宣告， 只能通過在head部分使用spm-id元標籤(位置在aplus.js指令碼引用程式碼之前) 來實現，如下:
<head> ... <meta name="spm-id" content="申請的A位編碼.註冊的B位編碼"> ... </head>
複製程式碼c標識頁面上某一具體的區域或模組，一般頁面釋出時，原始碼中一個table區域或一個div區域包含的部分可以看做一個模組。比如女裝首頁的左側導航欄，就可以看做一個區塊。C位不強制要求宣告， 可以根據需求指定(但如果需要統計頁面具體的坑位點選資料， 則必須宣告C位)，一般被用來監測頁面上具有相對獨立功能的區域。 在部署時，SPM-c一般以對應的div容器的擴充套件屬性(data-spm)來宣告， 如下:
<div data-spm="自定義或註冊的C位編碼">
複製程式碼d標識位置ID，是指頁面某一具體的模組中，一個對應的連結或者圖片，是資料統計的最細粒度。 SPM-d一般不需要註冊或申請, 也一般不需要特別宣告. 系統會自動計算和編碼(前提是C位必須正確宣告). 如果必須, 則也可以自助宣告, 如下:
<a href="" data-spm="d開頭的自定義編碼串">
複製程式碼e 標識當前日誌的logid, 用以區分訪問日誌時序和回溯使用者的完整訪問路徑。此id由日誌採集指令碼自動賦值，不需要且禁止人為構造和賦值(修改)。
埋點流程
- 埋點申請：在平臺上申請埋碼，並記錄埋點資訊
- 埋點配置：埋碼分為 視覺化自動埋碼，和非視覺化手動埋碼
- 埋點驗證：sdk 自動觸發點選事件，和平臺上提交的埋點資訊做驗證
- 資料監控：監控埋碼質量
- 採集管理：採集資料管理
DIY
我們參考spm埋點流程，以及埋點規則。我們就這麼埋下了點，但是，怎麼獲取到這些a.b.c.d編碼並且傳送日誌請求呢？
我們還是以自己diy自己的日誌採集平臺，從中學習到一些東西。
首先，看到attribute方式埋下引數，第一反應就是想到了事件代理，
我們先在專案中，埋好點，例如：
上面這個是個簡易的埋點，只是個例子，大家可以在自己的業務元件中隨意撒點，注意順序，注意寫好對應埋點功能文件即可。
寫一個spm.js
上面的備註我寫的很詳細，相信大家仔細看看就能看得懂，有一行我需要解釋一下
_maq.push(['_trackEvent', spmArray]);
這一行是把日誌資料push到流量統計裡 monitor.js 中 _maq引數中。
然後我們定義一種解析方法叫，_trackEvent（跟蹤事件），大家可以回頭看一下，上面的截圖中有寫到。
然後我們在monitor.js中新增監聽_maq引數變化的方法，觸發變化，即可傳送日誌出去。監聽引數變化的方法：
看一下效果：
這樣我們就可以通過spm這種方式進行埋點，這種方法需要點選方式觸發，有人就會問了，如果hover事件怎麼辦，還有一些別的事件。
首先，可以開放出來一個改變_maq陣列的方法。在非click事件的時候主動觸發。
其次，配合analytics檔案中的這裡
case裡自定義一些解析規則即可。
Hiper
這裡直接介紹一個外掛，我的想法是把這個外掛整合到我們的監控平臺上，首先看一下，這個外掛是什麼。
傳送門：Hiper
它可以統計一些，網站的“速度”。對優化專案，優化壓縮，挺有幫助的，這些資料也可以整合到我們的監控平臺中。
END
監控平臺下一篇，目前構思想寫一下以下幾點
- 異常資訊抓取
- ajax請求抓取
- 效能資訊抓取
還是以DIY的形式，封裝自己的抓取方法，將異常資訊，請求資訊整合到我們的監控平臺上，還是以從外部注入專案的方式，這種方式的好處就是，不會影響業務邏輯，不會摻雜在一起，便於維護。
最近還是有一些時間的吧，反思了一下自己，寫文章的時候都會構思很久，不像以前想怎麼寫怎麼寫，哎。明天發個沸點給你們看看，我的構思筆記。
謝謝大家。回見。
我這邊3月底之前會寫4篇文章，分別為
《前端效能優化交流》
《前端程式碼質量優化交流》
《DIY一個前端監控平臺（上）》（本篇）
《DIY一個前端監控平臺（下）》（可能會拖到下個月寫）
《前端安全問題交流》
沉澱一下去年在開發流程方面的一些知識。 謝謝各位。