建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
聊聊令人頭疼的埋點
埋點，是指在應(yīng)用中添加代碼，以收集用戶的操作行為和數(shù)據(jù)，以便后續(xù)進行數(shù)據(jù)分析和產(chǎn)品決策。這些代碼通常被稱為埋點代碼，它們將事件（如點擊、滾動、搜索等）和屬性（如時間、位置、設(shè)備等）捕捉并發(fā)送到數(shù)據(jù)平臺。通常情況下，這些數(shù)據(jù)用于分析用戶行為、監(jiān)控應(yīng)用程序性能、改進產(chǎn)品功能等方面。
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、蘇州網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、購物商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為蘇州等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
轉(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策。
- 埋點觸發(fā)埋點觸發(fā)大致分為自動觸發(fā)和手動觸發(fā)兩種方式，上面提及的頁面展現(xiàn)通常就是自動觸發(fā)，當頁面打開的時候，就自動上報了。但是像點擊埋點就可以用手動觸發(fā)的，只有當區(qū)域被真正點擊時，才會進行上報。
- 埋點上報其中埋點上報又分為立即上報和延遲上報兩種。立即上報的邏輯相對簡單，在埋點事件觸發(fā)時，就立即上報。但是缺點也很明顯，就是上報的埋點量巨大，會給埋點服務(wù)造成巨大負擔。延遲上報，就是將一段時間內(nèi)的埋點，收集起來，然后一次性上報。這樣無疑就會使上報的次數(shù)，急劇減少，減輕了埋點服務(wù)壓力。但是其中又會涉及埋點上報去重、埋點觸發(fā)時間校準（如果客戶端時間不準怎么辦？）等等其他問題，因此相對立即上報來說，延遲上報邏輯上要復(fù)雜一些。并且需要數(shù)據(jù)層面進行過濾、清洗。
- 埋點校驗開發(fā)者手動添加了部分埋點，需求上線前需要進行驗證，確保按照要求進行了上報，其中校驗可以使用人工觸發(fā)，抓包進行校驗。也可以通過編寫自動化腳本，模擬使用，進行校驗。轉(zhuǎn)轉(zhuǎn)側(cè)使用相關(guān)的后臺，可以通過篩選相關(guān)用戶、來源以及不同環(huán)境，實時接收相關(guān)的埋點，進行校驗。
- 埋點分析埋點上報之后，數(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，算是一項非?；A(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)
}
})- 發(fā)起一個同步 XMLHttpRequest 來發(fā)送數(shù)據(jù)
- 創(chuàng)建一個 img 元素并設(shè)置 src，大部分用戶代理會延遲卸載（unload）文檔以加載圖像
- 創(chuàng)建一個幾秒的 noop 循環(huán)
總結(jié)
以上從埋點內(nèi)容、方式、流程、常見埋點的類型以及發(fā)送方式等方面，介紹了埋點相關(guān)的基礎(chǔ)概念以及轉(zhuǎn)轉(zhuǎn)采取的方案，希望能對您有所幫助～
參考及引用
- onshow
- visiblechange
- sendBeacon
- IntersectionObserver
- MutationObserver
網(wǎng)站標題：聊聊令人頭疼的埋點
網(wǎng)頁URL：http://www.5511xx.com/article/ccesjpj.html
