埋點(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)的頁(yè)面通常需要添加各種埋點(diǎn)，以驗(yàn)證和輔助產(chǎn)品后續(xù)決策。今天就和大家聊聊令筆者頭疼的埋點(diǎn)，也希望能加深您對(duì)埋點(diǎn)的理解～

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

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

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

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

埋點(diǎn)方式

常見(jià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 介入測(cè)試，一些復(fù)雜的埋點(diǎn)很容易出錯(cuò)，導(dǎo)致延誤需求數(shù)據(jù)分析的時(shí)間
• 可視化埋點(diǎn) 需要頁(yè)面/項(xiàng)目預(yù)先接入可視化埋點(diǎn) SDK，并開(kāi)啟可視化埋點(diǎn)開(kāi)關(guān)，然后相關(guān)人員登錄可視化圈選后臺(tái)，選擇相應(yīng)的頁(yè)面以及圈選需要上報(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ù)，例如打開(kāi)頁(yè)面、切入后臺(tái)、點(diǎn)擊某個(gè)區(qū)域、某個(gè)區(qū)域曝光等等，優(yōu)點(diǎn)就是可以更全面、更細(xì)致地了解用戶行為和需求，缺點(diǎn)就是由于自動(dòng)記錄了各種操作行為的數(shù)據(jù)，會(huì)導(dǎo)致大量的無(wú)意義的行為被上報(bào)，對(duì)服務(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)清洗、過(guò)濾和分析，進(jìn)而產(chǎn)出下一步?jīng)Q策。

1. 埋點(diǎn)觸發(fā)埋點(diǎn)觸發(fā)大致分為自動(dòng)觸發(fā)和手動(dòng)觸發(fā)兩種方式，上面提及的頁(yè)面展現(xiàn)通常就是自動(dòng)觸發(fā)，當(dāng)頁(yè)面打開(kāi)的時(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)的邏輯相對(duì)簡(jiǎn)單，在埋點(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)，收集起來(lái)，然后一次性上報(bào)。這樣無(wú)疑就會(huì)使上報(bào)的次數(shù)，急劇減少，減輕了埋點(diǎn)服務(wù)壓力。但是其中又會(huì)涉及埋點(diǎn)上報(bào)去重、埋點(diǎn)觸發(fā)時(shí)間校準(zhǔn)（如果客戶端時(shí)間不準(zhǔn)怎么辦？）等等其他問(wèn)題，因此相對(duì)立即上報(bào)來(lái)說(shuō)，延遲上報(bào)邏輯上要復(fù)雜一些。并且需要數(shù)據(jù)層面進(jìn)行過(guò)濾、清洗。
3. 埋點(diǎn)校驗(yàn)開(kāi)發(fā)者手動(dòng)添加了部分埋點(diǎn)，需求上線前需要進(jìn)行驗(yàn)證，確保按照要求進(jìn)行了上報(bào)，其中校驗(yàn)可以使用人工觸發(fā)，抓包進(jìn)行校驗(yàn)。也可以通過(guò)編寫(xiě)自動(dòng)化腳本，模擬使用，進(jìn)行校驗(yàn)。轉(zhuǎn)轉(zhuǎn)側(cè)使用相關(guān)的后臺(tái)，可以通過(guò)篩選相關(guān)用戶、來(lái)源以及不同環(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ù)，對(duì)紛繁復(fù)雜的數(shù)據(jù)，進(jìn)行過(guò)濾、清洗，得到產(chǎn)品需要的數(shù)據(jù)，然后產(chǎn)品就會(huì)對(duì)數(shù)據(jù)進(jìn)行分析，有時(shí)可以發(fā)現(xiàn)一些問(wèn)題，以及對(duì)后續(xù)決策產(chǎn)生影響。

埋點(diǎn)常見(jiàn)類型

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

• 頁(yè)面展現(xiàn)在頁(yè)面展現(xiàn)時(shí)進(jìn)行上報(bào)，H5 環(huán)境下一般通過(guò)監(jiān)聽(tīng) onshow 或者 visibilitychange 事件來(lái)實(shí)現(xiàn)，但是這兩者都有一定的兼容性問(wèn)題。而如果是處于 hybrid 環(huán)境，則可以利用宿主環(huán)境（客戶端）暴露的生命周期來(lái)實(shí)現(xiàn)，借用原生的生命周期來(lái)實(shí)現(xiàn)，也更加準(zhǔn)確些。頁(yè)面展現(xiàn)一般用來(lái)記錄頁(yè)面的 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)擊位置信息，其中位置信息可以用來(lái)生成熱力圖，確定頁(yè)面的熱區(qū)，從而可以知道用戶對(duì)哪部分更加感興趣，哪部分的轉(zhuǎn)化效率更高，以便調(diào)整后續(xù)的產(chǎn)品策略。H5 中一般可以通過(guò)事件委托來(lái)實(shí)現(xiàn)，在根結(jié)點(diǎn)監(jiān)聽(tīng)點(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)的問(wèn)題，所以一般區(qū)域都會(huì)有一套規(guī)則，生成該區(qū)域的唯一標(biāo)識(shí)，防止重復(fù)上報(bào)。以及在商品列表的場(chǎng)景中存在翻頁(yè)的情況，就需要再使用 MutationObserver 監(jiān)聽(tīng) DOM 的變化，動(dòng)態(tài)的調(diào)用 IntersectionObserver 進(jìn)行重復(fù)監(jiān)聽(tīng)。H5 一般有監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件和使用 IntersectionObserver 兩種方式來(lái)實(shí)現(xiàn)

// 1. 監(jiān)聽(tīng)頁(yè)面滾動(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);

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

• 性能埋點(diǎn)通過(guò)記錄頁(yè)面加載過(guò)程不同階段的耗時(shí)，幫助開(kāi)發(fā)者發(fā)現(xiàn)性能問(wèn)題，提升頁(yè)面加載速度，發(fā)現(xiàn)可優(yōu)化的點(diǎn)，提升用戶體驗(yàn)。甚至可以與白屏檢測(cè)相結(jié)合，在頁(yè)面出現(xiàn)問(wè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 三種方式。

• 接口方式：通過(guò)接口的形式將埋點(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)，一方面是圖片請(qǐng)求不存在跨域限制（一般而言，埋點(diǎn)發(fā)送域名都不是當(dāng)前域名），另一方面圖片標(biāo)簽不需要真正插入到 DOM 節(jié)點(diǎn)中，只需要實(shí)例化 Image，設(shè)置 src 屬性就會(huì)發(fā)出請(qǐng)求，不會(huì)阻塞頁(yè)面渲染，對(duì)性能影響較小。

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

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

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

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

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

總結(jié)

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

參考及引用

• onshow
• visiblechange
• sendBeacon
• IntersectionObserver
• MutationObserver