埋點，是指在應(yīng)用中添加代碼，以收集用戶的操作行為和數(shù)據(jù)，以便后續(xù)進行數(shù)據(jù)分析和產(chǎn)品決策。這些代碼通常被稱為埋點代碼，它們將事件（如點擊、滾動、搜索等）和屬性（如時間、位置、設(shè)備等）捕捉并發(fā)送到數(shù)據(jù)平臺。通常情況下，這些數(shù)據(jù)用于分析用戶行為、監(jiān)控應(yīng)用程序性能、改進產(chǎn)品功能等方面。

轉(zhuǎn)轉(zhuǎn) H5 采用的是手動埋點方式，App 內(nèi)的頁面通常需要添加各種埋點，以驗證和輔助產(chǎn)品后續(xù)決策。今天就和大家聊聊令筆者頭疼的埋點，也希望能加深您對埋點的理解～

以下部分內(nèi)容、代碼，來源于 chatGPT，如有錯誤，歡迎指出～

埋點內(nèi)容

首先埋點內(nèi)容一般會包含用戶信息、頁面信息、事件信息、訪問信息等。

• 用戶信息：包括用戶的唯一標識（uid）、設(shè)備標識（token）、訪問設(shè)備、瀏覽器版本以及網(wǎng)絡(luò)狀態(tài)等
• 頁面信息：包括當前頁面的 URL、標題、頁面 ID 等信息
• 事件信息：包括用戶的行為事件，如點擊、滾動、鼠標移動等，以及事件的時間戳、元素路徑、事件類型等信息
• 訪問信息：包括用戶來源、搜索關(guān)鍵詞、渠道信息等，計算整個鏈路的滲透，或者在出現(xiàn)問題時，幫助還原整個用戶操作路徑，幫助開發(fā)者更快的定位、修復(fù)問題。

埋點方式

常見的埋點方式大體可以分為手動埋點、可視化埋點和全埋點三種。

• 手動埋點在代碼中手動加入埋點，相應(yīng)事件觸發(fā)的時候，再上報相關(guān)埋點。當需要精細化數(shù)據(jù)或者希望根據(jù)業(yè)務(wù)訴求，定制化添加埋點的時候，就很適合使用這種方式。但缺點就是額外工作量很大，也需要相關(guān)的 QA 介入測試，一些復(fù)雜的埋點很容易出錯，導(dǎo)致延誤需求數(shù)據(jù)分析的時間
• 可視化埋點 需要頁面/項目預(yù)先接入可視化埋點 SDK，并開啟可視化埋點開關(guān)，然后相關(guān)人員登錄可視化圈選后臺，選擇相應(yīng)的頁面以及圈選需要上報的相關(guān)行為埋點，圈選平臺和 SDK 進行通信，讓 SDK 拿到需要上報的埋點，然后 SDK 自動上報相關(guān)的埋點。
• 全埋點是一種將應(yīng)用程序中所有用戶行為都收集和分析的埋點技術(shù)，例如打開頁面、切入后臺、點擊某個區(qū)域、某個區(qū)域曝光等等，優(yōu)點就是可以更全面、更細致地了解用戶行為和需求，缺點就是由于自動記錄了各種操作行為的數(shù)據(jù)，會導(dǎo)致大量的無意義的行為被上報，對服務(wù)端的壓力比較大，并且也考驗從紛繁復(fù)雜的埋點中找到所需埋點的能力

埋點流程

埋點流程大體可以分為埋點觸發(fā)、上報、校驗以及上報到數(shù)據(jù)平臺后的埋點清洗、過濾和分析，進而產(chǎn)出下一步?jīng)Q策。

1. 埋點觸發(fā)埋點觸發(fā)大致分為自動觸發(fā)和手動觸發(fā)兩種方式，上面提及的頁面展現(xiàn)通常就是自動觸發(fā)，當頁面打開的時候，就自動上報了。但是像點擊埋點就可以用手動觸發(fā)的，只有當區(qū)域被真正點擊時，才會進行上報。
2. 埋點上報其中埋點上報又分為立即上報和延遲上報兩種。立即上報的邏輯相對簡單，在埋點事件觸發(fā)時，就立即上報。但是缺點也很明顯，就是上報的埋點量巨大，會給埋點服務(wù)造成巨大負擔。延遲上報，就是將一段時間內(nèi)的埋點，收集起來，然后一次性上報。這樣無疑就會使上報的次數(shù)，急劇減少，減輕了埋點服務(wù)壓力。但是其中又會涉及埋點上報去重、埋點觸發(fā)時間校準（如果客戶端時間不準怎么辦？）等等其他問題，因此相對立即上報來說，延遲上報邏輯上要復(fù)雜一些。并且需要數(shù)據(jù)層面進行過濾、清洗。
3. 埋點校驗開發(fā)者手動添加了部分埋點，需求上線前需要進行驗證，確保按照要求進行了上報，其中校驗可以使用人工觸發(fā)，抓包進行校驗。也可以通過編寫自動化腳本，模擬使用，進行校驗。轉(zhuǎn)轉(zhuǎn)側(cè)使用相關(guān)的后臺，可以通過篩選相關(guān)用戶、來源以及不同環(huán)境，實時接收相關(guān)的埋點，進行校驗。
4. 埋點分析埋點上報之后，數(shù)據(jù)平臺就會拿到相關(guān)的埋點數(shù)據(jù)，對紛繁復(fù)雜的數(shù)據(jù)，進行過濾、清洗，得到產(chǎn)品需要的數(shù)據(jù)，然后產(chǎn)品就會對數(shù)據(jù)進行分析，有時可以發(fā)現(xiàn)一些問題，以及對后續(xù)決策產(chǎn)生影響。

埋點常見類型

埋點的觸發(fā)通常與埋點的類型相關(guān)，接下來列舉幾種常見的埋點類型：

• 頁面展現(xiàn)在頁面展現(xiàn)時進行上報，H5 環(huán)境下一般通過監(jiān)聽 onshow 或者 visibilitychange 事件來實現(xiàn)，但是這兩者都有一定的兼容性問題。而如果是處于 hybrid 環(huán)境，則可以利用宿主環(huán)境（客戶端）暴露的生命周期來實現(xiàn)，借用原生的生命周期來實現(xiàn)，也更加準確些。頁面展現(xiàn)一般用來記錄頁面的 PV/UV，算是一項非常基礎(chǔ)的數(shù)據(jù)了。
• 點擊用戶點擊某個區(qū)域時上報，可以上報相關(guān)業(yè)務(wù)參數(shù)，也可以包含點擊位置信息，其中位置信息可以用來生成熱力圖，確定頁面的熱區(qū)，從而可以知道用戶對哪部分更加感興趣，哪部分的轉(zhuǎn)化效率更高，以便調(diào)整后續(xù)的產(chǎn)品策略。H5 中一般可以通過事件委托來實現(xiàn)，在根結(jié)點監(jiān)聽點擊事件，當事件冒泡到根結(jié)點階段，觸發(fā)相應(yīng)事件。

document.addEventListener('click', function(e) {
   const target = e.target
   // do something
 }, true);

• 區(qū)域曝光當某個區(qū)域出現(xiàn)在視口內(nèi)，一定時間內(nèi)進行上報，一般配合點擊、下單等數(shù)據(jù)，觀察整個路徑的漏斗轉(zhuǎn)化。由于會涉及重復(fù)上報的問題，所以一般區(qū)域都會有一套規(guī)則，生成該區(qū)域的唯一標識，防止重復(fù)上報。以及在商品列表的場景中存在翻頁的情況，就需要再使用 MutationObserver 監(jiān)聽 DOM 的變化，動態(tài)的調(diào)用 IntersectionObserver 進行重復(fù)監(jiān)聽。H5 一般有監(jiān)聽頁面滾動事件和使用 IntersectionObserver 兩種方式來實現(xiàn)

// 1. 監(jiān)聽頁面滾動實現(xiàn)
const element = document.querySelector('.exposure-ele');

window.addEventListener('scroll', () => {
  const elementPosition = element.getBoundingClientRect();
  const windowPosition = {
    top: 0,
    left: 0,
    bottom: window.innerHeight,
    right: window.innerWidth
  };

  if (isElementInViewport(elementPosition, windowPosition)) {
    console.log('Element is in viewport!');
  } else {
    console.log('Element is not in viewport!');
  }
});

function isElementInViewport(elementPosition, windowPosition) {
  return (
    elementPosition.bottom > windowPosition.top &&
    elementPosition.top < windowPosition.bottom &&
    elementPosition.right > windowPosition.left &&
    elementPosition.left < windowPosition.right
  );
}

// 2. 使用 IntersectionObserver 實現(xiàn)
const element = document.querySelector('.exposure-ele');

const options = {
  root: null,
  rootMargin: '0px', // 設(shè)置視口四邊延伸的范圍，可以利用此做列表數(shù)據(jù)的提前加載
  threshold: 0.5     // 區(qū)域與視口相交的閾值
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element has entered the viewport!');
    } else {
      console.log('Element has left the viewport!');
    }
  });
}, options);

observer.observe(element);

• 頁面停留時長定義用戶從進入頁面到離開頁面的時長，一般需要精確到毫秒級別。停留時間越長，一般代表用戶對當前頁面越感興趣，預(yù)示產(chǎn)品決策是否可以對此進行一些深耕。
• 熱力圖通過顏色深淺，標識用戶對頁面各區(qū)域點擊的頻率。顏色越深，代表點擊頻率越高，是一種直觀、高效發(fā)現(xiàn)吸引用戶區(qū)域的方式。比如常用于商場首頁金剛位，可以清晰發(fā)現(xiàn)用戶對各品類的喜好，就可以動態(tài)調(diào)整金剛位的類目。一般是通過統(tǒng)計點擊埋點上報的位置，進行實現(xiàn)。其中位置又可以分為絕對位置和區(qū)域位置兩種。絕對位置是指點擊時的 x、y 坐標，但是由于各個手機的分辨率不同，點擊同一區(qū)域的 x、y 坐標也不一樣，就需要進行多分辨率的調(diào)整、整合，比較復(fù)雜。轉(zhuǎn)轉(zhuǎn)現(xiàn)在采用的是后者區(qū)域位置，通過頁面ID（pageId）、區(qū)域ID（sectionId）以及區(qū)域次序ID（sortId），對一個區(qū)域進行定位，當點擊時會上報相關(guān)的 pageId、sectionId 以及 sortId，然后就可以統(tǒng)計出頁面某個區(qū)域、某個次序的點擊率，生成相應(yīng)熱力圖了。以下是轉(zhuǎn)轉(zhuǎn)游戲賬號首頁的熱力示意圖：

• 性能埋點通過記錄頁面加載過程不同階段的耗時，幫助開發(fā)者發(fā)現(xiàn)性能問題，提升頁面加載速度，發(fā)現(xiàn)可優(yōu)化的點，提升用戶體驗。甚至可以與白屏檢測相結(jié)合，在頁面出現(xiàn)問題時，及時報警通知相關(guān)人員查看、處理。

埋點發(fā)送方式

埋點發(fā)送即將埋點相關(guān)數(shù)據(jù)發(fā)送給數(shù)據(jù)平臺，一般有接口方式、img 標簽方式和 sendBeacon 三種方式。

• 接口方式：通過接口的形式將埋點的信息進行上報，兼容性比較好，但是一些網(wǎng)站可能會禁用腳本，導(dǎo)致失效。
• 創(chuàng)建 img 標簽：很多公司都采用 img 標簽攜帶埋點信息進行上報，一方面是圖片請求不存在跨域限制（一般而言，埋點發(fā)送域名都不是當前域名），另一方面圖片標簽不需要真正插入到 DOM 節(jié)點中，只需要實例化 Image，設(shè)置 src 屬性就會發(fā)出請求，不會阻塞頁面渲染，對性能影響較小。

const img = new Image()
img.src = 'https://example.com/log?xxx'

為了追求埋點請求盡可能小，大多采用的是 1*1 像素的透明 GIF 來上報，因為在各種圖片格式下，這種相對較小。

• sendBeacon 發(fā)送該 api 是專門被設(shè)計來滿足統(tǒng)計和診斷代碼的需要，通常需要在頁面卸載之前，將相關(guān)埋點發(fā)出。過早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯過收集數(shù)據(jù)的時機，因此需要等到頁面即將卸載時發(fā)送數(shù)據(jù)。在 sendBeacon 出現(xiàn)之前，很難保證在頁面卸載之前，可以將數(shù)據(jù)成功發(fā)送，因為用戶代理通常會忽略在 unload 事件處理器中產(chǎn)生的異步 XHR。過去為了解決這個問題，開發(fā)者們想出了一些 hack 的方法：但是無獨有偶，上述方法都存在一個問題，那就是會延遲當前頁面的卸載，導(dǎo)致下一個頁面出現(xiàn)的更晚。而 sendBeacon 不存在上述問題，它數(shù)據(jù)發(fā)送是可靠的、是異步的，正由于異步發(fā)送數(shù)據(jù)，所以不影響下一導(dǎo)航的載入。一般可以監(jiān)聽 visibilitychange 的 hidden 狀態(tài)來發(fā)送埋點

document.addEventListener('visibilitychange', function logData() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData)
  }
})

1. 發(fā)起一個同步 XMLHttpRequest 來發(fā)送數(shù)據(jù)
2. 創(chuàng)建一個 img 元素并設(shè)置 src，大部分用戶代理會延遲卸載（unload）文檔以加載圖像
3. 創(chuàng)建一個幾秒的 noop 循環(huán)

總結(jié)

以上從埋點內(nèi)容、方式、流程、常見埋點的類型以及發(fā)送方式等方面，介紹了埋點相關(guān)的基礎(chǔ)概念以及轉(zhuǎn)轉(zhuǎn)采取的方案，希望能對您有所幫助～

參考及引用

• onshow
• visiblechange
• sendBeacon
• IntersectionObserver
• MutationObserver