一些名詞解釋
曝光
頁面上某一個元素砌溺、組件或模塊被用戶瀏覽了菇曲，則稱這個元素、組件或模塊被曝光了抚吠。
視圖元素
將頁面上展示的元素常潮、組件或模塊統(tǒng)稱為視圖元素。
可見比例
視圖元素在可視區(qū)域面積/視圖元素整體面積楷力。
有效停留時長
視圖元素由不可見到可見喊式，滿足可見比例并且保持可見狀態(tài)的持續(xù)的一段時間孵户。
重復(fù)曝光
在同一頁面，某個視圖元素不發(fā)生DOM卸載或頁面切換的情況下岔留，發(fā)生的多次曝光稱為重復(fù)曝光夏哭。例如頁面上某個視圖元素，在頁面來回滾動時献联，則會重復(fù)曝光竖配。
如何監(jiān)測曝光
需要考慮的一些問題
曝光條件
頁面上某一視圖元素的可見比例達到一定值（例如0.5），且有效停留時間達到一定時長（例如500ms）,則稱該視圖元素被曝光了里逆。
如何檢測可見比例
使用 IntersectionObserver api 對元素進行監(jiān)聽进胯，通過 threshold 配置項設(shè)置可見比例，當達到可見比例時原押，觀察器的回調(diào)就會執(zhí)行胁镐。
IntersectionObserver 使用示例：
let callback = (entries, observer) => {
entries.forEach((entry) => {
// 每個條目描述一個目標元素觀測點的交叉變化：
// entry.boundingClientRect
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target
// entry.time
});
};
let options = {
threshold: 1.0,
};
let observer = new IntersectionObserver(callback, options);
let target = document.querySelector("#listItem");
observer.observe(target);
如何監(jiān)聽動態(tài)元素
使用 IntersectionObserver 對元素進行監(jiān)聽之前，需要先獲取到元素的 DOM诸衔，但對于一些動態(tài)渲染的元素盯漂，則無法進行監(jiān)聽。所以笨农，需要先監(jiān)聽DOM元素是否發(fā)生掛載或卸載就缆，然后對元素動態(tài)使用IntersectionObserver 進行監(jiān)聽，可以使用 MutationObserver 對 DOM變更進行監(jiān)聽谒亦。
MutationObserver的使用示例：
// 選擇需要觀察變動的節(jié)點
const targetNode = document.getElementById("some-id");
// 觀察器的配置（需要觀察什么變動）
const config = { attributes: true, childList: true, subtree: true };
// 當觀察到變動時執(zhí)行的回調(diào)函數(shù)
const callback = function (mutationsList, observer) {
for (let mutation of mutationsList) {
if (mutation.type === "childList") {
console.log("A child node has been added or removed.");
} else if (mutation.type === "attributes") {
console.log("The " + mutation.attributeName + " attribute was modified.");
}
}
};
// 創(chuàng)建一個觀察器實例并傳入回調(diào)函數(shù)
const observer = new MutationObserver(callback);
// 以上述配置開始觀察目標節(jié)點
observer.observe(targetNode, config);
// 之后违崇，可停止觀察
observer.disconnect();
如何監(jiān)聽停留時長
維護一個觀察列表，元素可見比例滿足要求時诊霹，將該元素信息（包含曝光開始時間）添加到列表羞延，當元素退出可視區(qū)域時（可見比例小于設(shè)定值），用當前時間減去曝光開始時間脾还，則可獲得停留時長伴箩。
總體實現(xiàn)
實現(xiàn)一個exposure方法，支持傳入需要檢測曝光的元素信息（需包含className）鄙漏，使用 IntersectionObserver 和 MutationObserver 對元素進行動態(tài)監(jiān)聽嗤谚。
- 初始化時，根據(jù)className查找出已渲染的曝光監(jiān)測元素怔蚌，然后使用
IntersectionObserver統(tǒng)一監(jiān)聽巩步，如果有元素發(fā)生曝光，則觸發(fā)對應(yīng)曝光事件桦踊； - 對于一些動態(tài)渲染的曝光監(jiān)測元素椅野，需要使用
MutationObserver監(jiān)聽dom變化。當有節(jié)點新增時，新增節(jié)點若包含曝光監(jiān)測元素竟闪，則使用IntersectionObserver進行監(jiān)聽离福；當有節(jié)點被移除時，移除節(jié)點若包含曝光監(jiān)測元素炼蛤，則取消對其的監(jiān)聽妖爷； - 維護一個observe列表，元素開始曝光時將元素信息添加到列表理朋，元素退出曝光時如果曝光時長符合規(guī)則絮识，則觸發(fā)對應(yīng)曝光事件，并在observe列表中將該元素標記為已曝光嗽上，已曝光后再重復(fù)曝光則不進行采集次舌。如果元素在DOM上被卸載，則將該元素在observe列表中的曝光事件刪除炸裆，下次重新掛載時垃它，則重新采集鲜屏。
- 設(shè)置一個定時器烹看，定時檢查observe列表，若列表中有未完成曝光且符合曝光時長規(guī)則的元素洛史，則觸發(fā)其曝光事件惯殊，并更新列表中曝光信息。
初始化流程
file
元素發(fā)生掛載或卸載過程
file
元素曝光過程
file
代碼實現(xiàn)
const exposure = (trackElems?: ITrackElem[]) => {
const trackClassNames =
trackElems
?.filter((elem) => elem.eventType === TrackEventType.EXPOSURE)
.map((elem) => elem.className) || [];
const intersectionObserver = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
const entryElem = entry.target;
const observeList = getObserveList();
let expId = entryElem.getAttribute(EXPOSURE_ID_ATTR);
if (expId) {
// 若已經(jīng)曝光過也殖，則不進行采集
const currentItem = observeList.find((o) => o.id === expId);
if (currentItem.hasExposed) return;
}
if (entry.isIntersecting) {
if (!expId) {
expId = getRandomStr(8);
entryElem.setAttribute(EXPOSURE_ID_ATTR, expId);
}
const exit = observeList.find((o) => o.id === expId);
if (!exit) {
// 把當前曝光事件推入observe列表
const trackElem = trackElems.find((item) =>
entryElem?.classList?.contains(item.className)
);
const observeItem = { ...trackElem, id: expId, time: Date.now() };
observeList.push(observeItem);
setObserveList(observeList);
}
} else {
if (!expId) return;
const currentItem = observeList.find((o) => o.id === expId);
if (currentItem) {
if (Date.now() - currentItem.time > 500) {
// 觸發(fā)曝光事件土思，并更新observe列表中的曝光信息
tracker.track(
currentItem.event,
TrackEventType.EXPOSURE,
currentItem.params
);
currentItem.hasExposed = true;
setObserveList(observeList);
}
}
}
});
},
{ threshold: 0.5 }
);
const observeElems = (queryDom: Element | Document) => {
trackClassNames.forEach((name) => {
const elem = queryDom.getElementsByClassName?.(name)?.[0];
if (elem) {
intersectionObserver.observe(elem);
}
});
};
const mutationObserver = new MutationObserver((mutationList) => {
mutationList.forEach((mutation) => {
if (mutation.type !== 'childList') return;
mutation.addedNodes.forEach((node: Element) => {
observeElems(node);
});
mutation.removedNodes.forEach((node: Element) => {
trackClassNames.forEach((item) => {
const elem = node.getElementsByClassName?.(item)?.[0];
if (!elem) return;
const expId = elem.getAttribute('data-exposure-id');
if (expId) {
const observeList = getObserveList();
const index = observeList.findIndex((o) => o.id === expId);
if (index > -1) {
// 元素被卸載時，將其曝光事件從列表刪除
observeList.splice(index, 1);
setObserveList(observeList);
}
}
intersectionObserver.unobserve(elem);
});
});
});
});
observeElems(document);
mutationObserver.observe(document.body, {
subtree: true,
childList: true,
});
const timer = setInterval(() => {
// 檢查observe隊列忆嗜，若隊列中有符合曝光時長規(guī)則的元素己儒，則修改曝光狀態(tài)，并觸發(fā)曝光事件捆毫。
const observeList = getObserveList();
let shouldUpdate = false;
observeList.forEach((o) => {
if (!o.hasExposed && Date.now() - o.time > 500) {
tracker.track(o.event, TrackEventType.EXPOSURE, o.params);
o.hasExposed = true;
shouldUpdate = true;
}
});
if (shouldUpdate) {
setObserveList(observeList);
}
}, 3000);
return () => {
mutationObserver.disconnect();
intersectionObserver.disconnect();
clearInterval(timer);
removeObserveList();
};
};
export default exposure;
