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

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

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

埋點(diǎn)內(nèi)容

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

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

埋點(diǎn)方式

常見的埋點(diǎn)方式大體可以分為手動(dòng)埋點(diǎn)、可視化埋點(diǎn)和全埋點(diǎn)三種。

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

埋點(diǎn)流程

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

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

埋點(diǎn)常見類型

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

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

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

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

// 1. 監(jiān)聽頁面滾動(dòng)實(shí)現(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 實(shí)現(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);

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

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

埋點(diǎn)發(fā)送方式

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

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

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

為了追求埋點(diǎn)請求盡可能小，大多采用的是 1*1 像素的透明 GIF 來上報(bào)，因?yàn)樵诟鞣N圖片格式下，這種相對較小。

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

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

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

總結(jié)

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

參考及引用

• onshow
• visiblechange
• sendBeacon
• IntersectionObserver
• MutationObserver