前端統計利器：Sentry & Matomo

標籤：建立   項目   creat   link   cli   十分   com   async   eid   

今天主要說下兩款前端統計工具的使用，Sentry & Matomo。以下主要是統計代碼接入方式，因此使用前提是你已經在自己的伺服器上搭建好了Sentry和Matomo的伺服器

Sentry統計使用方法

Sentry是一個比較完善的錯誤統計日誌系統，可以純前端調用，在錯誤記錄檔中會記錄報錯內容、使用者用戶端資訊以及使用者發生報錯的步驟（這部分功能在部分情況下會有缺失），如

從可以看到，sentry對錯誤資訊的統計可以說十分細緻了，這對於debug工作來說簡直神器，可能更好更快的複現問題，進而快速解決問題。sentry的使用主要分兩步

1、添加網站，擷取統計代碼

--- 伺服器上新增project


--- 擷取追蹤代碼DSN

這個DSN算是一個加密的統計地址吧，直接關聯了具體的項目，每個地址都是唯一的。我們可以使用基於瀏覽器的SDK進行接入，比如raven-js

2、添加統計代碼

以下以raven-js為例

import Raven from 'raven-js'Raven.config('https://[email protected]/16', {    whitelistUrls: [/test\.com/, /atest\.com/],    ignoreErrors: [        /^Script error\.?$/,        /undefined is not an object$/,        /undefined is not a function$/,        'null is not an object evaluating \'document',        'TypeError: [object HTMLCollection] is not iterable!'    ]}).install()

其中核心就是Raven.config(url).install()了，而在config對象中，除了url，Raven還提供了一系列的參數來加強統計功能的實現，比如我們使用的白名單和錯誤過濾名單等等。有興趣的同學可以去翻一下sentry官網內容，https://docs.sentry.io/clients/javascript/

Matomo/piwik統計添加方法

Matomo是類似於百度統計、友盟統計的一個使用者訪問統計網站。主要用於統計使用者訪問日誌，分析使用者行為等方面，偏運營型輔助統計，以便於運營人員根據即時的使用者訪問資料來指定更加合適的營銷策略。優勢在於可以把整個統計網站搭建到我們自己的伺服器上，避免由於使用者訪問資料存放區在第三方伺服器上而帶來的一些安全問題。以下簡要說一下Matomo統計代碼添加的步驟，當然前提是你已經在自己的伺服器上搭建好了基礎服務，主要分兩步：

1、在Matomo上建立網站

建立網站：

編輯內容

這個項目網址就是你要統計的目標網址，統計代碼添加後凡以此開頭的都會被記錄到Matomo，添加後就會產生如下網站記錄，注意那個ID後面的統計代碼裡面都要用到

2、添加統計代碼

Vue的方式

import Vue from 'vue'import VueMatomo from 'vue-matomo'// matomo使用者統計--類似於友盟Vue.use(VueMatomo, {    // 這裡配置你自己的piwik伺服器位址和網站ID    host: 'https://bayes.test.com/piwik',    siteId: 412,    // 根據router自動註冊    router: router,    // 是否需要在發送追蹤資訊之前請求許可    // 預設false    requireConsent: false,    // 是否追蹤初始頁面    // 預設true    trackInitialView: true,    // 最終的追蹤js檔案名稱    // 預設 'piwik'    trackerFileName: 'piwik'})

純Js的方式

<!-- Matomo --><script type="text/javascript">  var _paq = _paq || [];  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */  _paq.push(['trackPageView']);  _paq.push(['enableLinkTracking']);  (function() {    var u="//bayes.test.com/piwik/";    _paq.push(['setTrackerUrl', u+'piwik.php']);    _paq.push(['setSiteId', '412']); // 注意這裡的setSiteId，後面的數字就是你的網站id，在matomo網站上可以查到    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];    g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);  })();</script><!-- End Matomo Code -->

除此以外，Matomo還提供了很多其它方式，有需要的同學可以自己去翻一下官網整合部分的內容：https://matomo.org/integrate/

古語云：工具善其事，必先利其器，一個好的工具對於提高開發效率來說絕對是非常有用的，大家還有什麼工具利器，歡迎交流。

今天是一個交流群的朋友Robin問到有什麼好的工具推薦，才寫了這些東西，後面我會在寫一寫關於sentry和matomo基礎服務的搭建的內容，如果大家有興趣可以繼續關注以下，心急的同學就先去翻一下官網吧～～

前端統計利器：Sentry & Matomo