用戶訪問統計
用戶訪問統計包含 PV（Page View）、UV（Unique Visitor）、VV（Visit View）、IP 等。PV 用來統計一天之內頁面的被訪問次數，機刷也可以造成 PV 數據提升。UV 用來統計一天之內訪問頁面的用戶數量，一般使用 IP 統計（IP 統計並不謹慎，同一個辦公區或校園公用一個 IP）；使用 cookie + IP 統計（cookie 會被刷新，造成用戶數被重復統計）；使用 userAgent + API 統計（userAgent + API 相同的情況也常有發生）。UV 統計的細化點是新訪客數、新訪客比率等。VV 用來統計一天之內網站被用戶訪問的次數；用戶訪問網站到結束訪問視為 1 次，因此同一個用戶在一天之內可能造成多條 VV。IP 用來統計一天之內訪問網站的不重復 IP 數。
用戶行為分析
用戶行為分析包含頁面點擊量、用戶點擊流、用戶訪問路徑、用戶點擊熱力圖、用戶轉化率、導流轉化率、用戶訪問時長分析和用戶訪問內容分析等。用戶點擊量用來統計用戶在某個可點擊或可操作區域的點擊或操作次數。用戶點擊流用來統計用戶在頁面中發生點擊或操作動作的順序；埋點過程中，可先用 localStorage 存儲用戶點擊或操作行為的唯一 id，然后在一次 VV 結束或下一次 VV 開始時上報。用戶訪問路徑用來統計用戶訪問頁面的路徑。用戶點擊熱力圖用來統計用戶在一張頁面中的點擊熱衷區域；埋點過程中，可以對 document 點擊綁定 click 事件，並上報 e.pageX、e.pageY 數據。用戶轉化率指的是訪問頁面的注冊用戶數和頁面 PV 的比值。導流轉化率指的是導流頁面 PV 和源頁面 PV 的比值。用戶訪問時長用來統計用戶在關鍵內容頁面的停留時長，以便分析用戶是否對內容感興趣。
埋點方案
前端埋點分為：代碼埋點、可視化埋點、無痕埋點三種。代碼埋點即侵入式埋點，可以在任意時刻、任意位置精確地發送數據，但是工作量較大，對業務代碼也有較大影響。可視化埋點即以業務代碼為輸入，通過可視化系統配置埋點，最后以耦合的形式輸出業務代碼和埋點代碼，但是可視化系統的埋點控件有限，並不能充分滿足埋點需求。無痕埋點即無差別地對所有事件等進行全埋點，但是沒法定制埋點需求。
埋點上報數據
上報的主要數據包含：appid、userAgent、timestamp（上報的時間戳）、currentUrl（用戶當前的 url）、fromUrl（前一個頁面的 url）、type（上報事件的類型）、element（觸發上報事件的元素）、data（自定義數據）等。數據可通過 OpenSSL 或 crypto 模塊進行加密。
{
// 上報接口本身提供
currentUrl,
fromUrl,
timestamp,
userAgent: {
os,
netWord,
}
// 業務代碼配置和自定義上報數據
type,
appid,
element,
data: {
uid,
uname
}
}mixpanel
按我的個性化解讀，mixpanel 分為三層結構：
- 基本工具層：提供類型判斷、遍歷、繼承、bind 等基本的工具函數；json、base64、utf8 編解碼能力；url 參數讀寫函數；cookie、localStorage 讀寫能力；dom 事件綁定能力；dom 節點查詢能力；info 瀏覽器信息獲取能力。
- 功能模塊層：提供基於 DomTracker 實現的 LinkTracker 跳鏈接埋點、FormTracker 提交數據埋點功能；autotrack 自動埋點功能；基於 cookie 或 localStorage 的 MixpanelPersistence 持久化功能；MixpanelNotification 提示功能；gdbr 依據歐盟《通用數據保護條例》，首先判斷用戶是否設置了 navigator.doNotTrack 避免數據被追蹤，其次判斷持久層是否禁止數據被追蹤，當兩者同時允許追蹤埋點數據時，mixpanel 才會上報埋點數據。
- 核心實現層：MixpanelLib 串聯功能、處理選項、發送埋點數據等；MaxpanelGroup；MaxpanelPeople。
mixpanel 根據用戶配置項，分別使用 img、script 節點、XHR 對象上報數據，這一邏輯實現在 mixpanelLib._send_request(url, data, callback) 方法中。_send_request 方法會附加上報 ip 地址、時間戳等；callback 回調用於處理服務端響應及上傳數據。一般而言，在 _send_reques 方法執行前，mixpanel 會調用 gdbr 模塊校驗用戶或持久層的 token 是否禁止數據被追蹤；在 _send_reques 方法執行后，mixpanel 會調用 _check_and_handle_notifications 上報用戶的唯一標識，並根據返回結果觸發彈窗。基於 _send_request，MixpanelLib 封裝了 track(event_name, properties, callback)、_dom_loaded 等方法。其中，track 方法附加上持久層的數據，並以 { event, properties } 格式發送到遠程服務器中；track_pageview 方法（上報瀏覽器和頁面信息）、LinkTracker、FormTracker 均基於 track 實現（LinkTracker、FormTracker 在上報數據完成后，再觸發原始的跳鏈接、提交操作）。_dom_loaded 在 DOMContentLoaded 事件中觸發執行，為 LinkTracker、FormTracke 相關節點綁定事件。autotrack 自動埋點先須由用戶開啟，其次請求服務器是否允許自動埋點，然后以事件委托的方式在 document 節點層面收集數據並上報。
mixpanel 有其成熟后的復雜度，個別內容不作詳解，另作專題剖析。
<!-- Matomo -->
<script type="text/javascript">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['setUserId', '用戶id/或者手機號']);
_paq.push(['setDocumentTitle','對應頁面名稱']);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//matomo.innoventbio.com/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '14']);
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+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
<!-- End Matomo Code -->