前言

踏足行業幾年了，始終遊離於中小型項目，因爲項目用戶較少，因此前端監控方面很是生疏，最近開始接收大流量項目，卻對埋點，監控一無所知，深感慚愧，因而苦學幾日，心得以下：css

什麼是埋點？

百度原話：埋點分析，是網站分析的一種經常使用的數據採集方法 html

其實通俗的講前端埋點主要是爲了運營以及開發人員採集用戶行爲數據，以及頁面性能等數進行後續的數據分析，舉一些例子：好比，拿到頁面在各類網絡下的加載時間，再好比拿到用戶在某個頁面的停留時間！前端

埋點的目的是什麼？

在現今用戶就是上帝的年代，互聯網競爭如此之大的時代，有針對性的對每一個用戶的喜愛定製不一樣的內容，按照用戶的喜愛去決定產品迭代方向已經成爲各個互聯網公司必需要專一去作的事情，因而埋點便成爲了獲取信息必不可少的一種方式。那咱們埋點有什麼目的呢？須要拿到點什麼呢？ajax

性能監控

在小項目時，因爲用戶數量很少，你們以爲過得去就行，而當用戶數量激增之後，性能監控，就顯得很是重要，由於，這樣你能就能知道潛在的一些問題和bug，而且能快速迭代，得到更好的用戶體驗！通常狀況下，咱們在性能監控時須要注意那麼幾點：後端

一、白屏時長
二、重要頁面的http請求時間
三、重要頁面的渲染時間
四、首屏加載時長

有人就會問了，這個白屏時長和首屏加載時長不是一回事嗎？這裏的白屏時長其實指的時，頁面從請求到達到渲染條件，出現ui骨架的時間（這裏測試的是請求域名到dns解析完畢，返回頁面骨架的時間）而首屏加載時長是頁面全部動態內容加載完成的時間，其中包括ajax數據後渲染到頁面的時間api

數據監控

所謂數據監控就是能拿到用戶的行爲，咱們也須要注意那麼幾點：跨域

一、PV訪問來量（Page View）
二、UV訪問數（Unique Visitor）
三、記錄操做系統和瀏覽器
四、記錄用戶在頁面的停留時間
五、進入當前頁面的來源網頁（也就是從哪進來的轉化）

如何埋點

知道了埋點的做用之後，咱們再來看看怎麼埋，才能達到效果，其實埋點也有不少講究，接下來解剖！瀏覽器

手動埋點

手動埋點也叫代碼埋點，他的本質其實就是用js代碼拿到一些基本信息，而後在一些特定的位置返回給服務端，好比：bash

如上圖咱們能夠拿到這些內容，再好比:

我還能夠拿到這些，有人就有疑問了，這些我咋拿到呢？

Performance

經過Performance 咱們便能拿到DNS 解析時間、TCP 創建鏈接時間、首頁白屏時間、DOM 渲染完成時間、頁面 load 時間等，等等廢話少說上代碼：服務器

//拿到Performance而且初始化一些參數
let timing = performance.timing,
    start = timing.navigationStart,
    dnsTime = 0,
    tcpTime = 0,
    firstPaintTime = 0,
    domRenderTime = 0,
    loadTime = 0;
//根據提供的api和屬性，拿到對應的時間
dnsTime = timing.domainLookupEnd - timing.domainLookupStart;
tcpTime = timing.connectEnd - timing.connectStart;
firstPaintTime = timing.responseStart - start;
domRenderTime = timing.domContentLoadedEventEnd - start;
loadTime = timing.loadEventEnd - start;

console.log('DNS解析時間:', dnsTime, 
            '\nTCP創建時間:', tcpTime, 
            '\n首屏時間:', firstPaintTime,
            '\ndom渲染完成時間:', domRenderTime, 
            '\n頁面onload時間:', loadTime);
複製代碼

拿到數據之後咱們能夠在提交，或者經過圖片的方式去提交埋點內容

// 頁面加載時發送埋點請求
$(document).ready(function(){
 // ... 這裏存在一些業務邏輯
 sendRequest(params);
});
// 按鈕點擊時發送埋點請求
$('button').click(function(){
   //  這裏存在一些業務邏輯
   sendRequest(params);
});
  // 經過假裝成 Image 對象，傳遞給後端，防止跨域
    let img = new Image(1, 1);
    let src = `http://aaaaa/api/test.jpg?args=${encodeURIComponent(args)}`;
    img.src = src;
//css實現的埋點
    .link:active::after{
    content: url("http://www.example.com?action=yourdata");
}
<a class="link">點擊我，會發埋點數據</a>
//data自定義屬性，rangjs去拿到屬性綁定事件，實現埋點
//<button data-mydata="{key:'uber_comt_share_ck', act: 'click',msg:{}}">打車</button>
複製代碼

這種埋點方式雖然能精準的監控到用戶的行爲，和網頁性能等數據，可是你會發現，很是繁瑣，須要大量的工做量，固然這部分工做也有人幫咱們作了，好比像友盟、百度統計等給咱們其實提供了服務。咱們能夠按照他們的流程使用手動埋點

可視化埋點

這種埋點方案，又叫無痕埋點，解放了前端手動操的工做量，其實本質就是用系統去插入原本須要手動插入的埋點，這種埋點方式因爲自帶技術壁壘，因此開發人員基本基本不用考慮，花錢便可，比較靠譜的服務商國外的Mixpanel，國內較早支持可視化埋點的有TalkingData、諸葛 IO，騰訊 MTA 等

無埋點

無埋點並非沒有任何埋點，所謂無只是不須要工程師在業務代碼裏面插入侵入式的代碼。只須要簡單的加載了一段定義好的SDK代碼，技術門檻更低，使用與部署也簡單，避免了需求變動，埋點錯誤致使的從新埋點。這也是大多網站的選擇，由於實在太簡單了咱們先來看看百度埋點長什麼樣子：

<script>
      var _hmt = _hmt || []
      ;(function() {
        var hm = document.createElement('script')
        hm.src =
          'https://hm.baidu.com/hm.js?<%= htmlWebpackPlugin.options.baiduCode %>'
        var s = document.getElementsByTagName('script')[0]
        s.parentNode.insertBefore(hm, s)
      })()
    </script>
複製代碼

上圖一段代碼插入咱們的html中

咱們便能清晰的看到統計數據，省時省力，就是不省錢！可是缺點就是因爲是自動完成，沒法針對特定場景拿到數據，由後端來過濾和計算出有用的數據。致使服務器壓力山大，不過，既然花了錢了，咱也就無論了！

總結

因爲初學，沒有實戰經驗，除了使用過百度無埋點方案，其餘並未涉及，上述內容也只是，在巨人的肩膀上覆述總結，並沒有本身的思考和看法，如後期實戰時候，定來修改！

再此推薦一位大佬的總結，收益匪淺，因爲埋點着實須要親身實踐才能知其韻味，紙上談兵到底難登大雅，就不給大佬的心得抄過來了，在此附上大佬連接，若有興趣深刻了解，請移駕：

前端埋點的那些事

去大廠，你就應該瞭解前端監控和埋點!

前言