如何實現元素的曝光監測

来源:https://www.cnblogs.com/dtux/p/18302635
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。 本文作者：霽明 一些名詞解釋 曝光 頁面上某一個元素、組件或模塊被用戶瀏覽了，則稱這個元素、組件或模塊被曝光了。 視圖元素 將頁面上展示的元素、組件或模塊統稱為視圖元素 ...


我們是袋鼠雲數棧 UED 團隊，致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神，探索前端道路，為社區積累並傳播經驗價值。

本文作者：霽明

一些名詞解釋

曝光
頁面上某一個元素、組件或模塊被用戶瀏覽了，則稱這個元素、組件或模塊被曝光了。
視圖元素
將頁面上展示的元素、組件或模塊統稱為視圖元素。
可見比例
視圖元素在可視區域面積/視圖元素整體面積。
有效停留時長
視圖元素由不可見到可見，滿足可見比例並且保持可見狀態的持續的一段時間。
重覆曝光
在同一頁面，某個視圖元素不發生DOM卸載或頁面切換的情況下，發生的多次曝光稱為重覆曝光。例如頁面上某個視圖元素，在頁面來回滾動時，則會重覆曝光。

如何監測曝光

需要考慮的一些問題

曝光條件
頁面上某一視圖元素的可見比例達到一定值（例如0.5），且有效停留時間達到一定時長（例如500ms）,則稱該視圖元素被曝光了。
如何檢測可見比例
使用 IntersectionObserver api 對元素進行監聽，通過 threshold 配置項設置可見比例，當達到可見比例時，觀察器的回調就會執行。
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);

如何監聽動態元素
使用 IntersectionObserver 對元素進行監聽之前，需要先獲取到元素的 DOM，但對於一些動態渲染的元素，則無法進行監聽。所以，需要先監聽DOM元素是否發生掛載或卸載，然後對元素動態使用IntersectionObserver 進行監聽，可以使用 MutationObserver 對 DOM變更進行監聽。
MutationObserver的使用示例：

// 選擇需要觀察變動的節點
const targetNode = document.getElementById("some-id");

// 觀察器的配置（需要觀察什麼變動）
const config = { attributes: true, childList: true, subtree: true };

// 當觀察到變動時執行的回調函數
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.");
    }
  }
};

// 創建一個觀察器實例並傳入回調函數
const observer = new MutationObserver(callback);

// 以上述配置開始觀察目標節點
observer.observe(targetNode, config);

// 之後，可停止觀察
observer.disconnect();

如何監聽停留時長
維護一個觀察列表，元素可見比例滿足要求時，將該元素信息（包含曝光開始時間）添加到列表，當元素退出可視區域時（可見比例小於設定值），用當前時間減去曝光開始時間，則可獲得停留時長。

總體實現

實現一個exposure方法，支持傳入需要檢測曝光的元素信息（需包含className），使用 IntersectionObserver 和 MutationObserver 對元素進行動態監聽。

  • 初始化時，根據className查找出已渲染的曝光監測元素，然後使用IntersectionObserver統一監聽，如果有元素髮生曝光，則觸發對應曝光事件；
  • 對於一些動態渲染的曝光監測元素，需要使用MutationObserver監聽dom變化。當有節點新增時，新增節點若包含曝光監測元素，則使用IntersectionObserver進行監聽；當有節點被移除時，移除節點若包含曝光監測元素，則取消對其的監聽；
  • 維護一個observe列表，元素開始曝光時將元素信息添加到列表，元素退出曝光時如果曝光時長符合規則，則觸發對應曝光事件，併在observe列表中將該元素標記為已曝光，已曝光後再重覆曝光則不進行採集。如果元素在DOM上被卸載，則將該元素在observe列表中的曝光事件刪除，下次重新掛載時，則重新採集。
  • 設置一個定時器，定時檢查observe列表，若列表中有未完成曝光且符合曝光時長規則的元素，則觸發其曝光事件，並更新列表中曝光信息。

初始化流程

file

元素髮生掛載或卸載過程

file

元素曝光過程

file

代碼實現

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) {
          // 若已經曝光過，則不進行採集
          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) {
              // 觸發曝光事件，並更新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隊列，若隊列中有符合曝光時長規則的元素，則修改曝光狀態，並觸發曝光事件。
    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;

最後

歡迎關註【袋鼠雲數棧UED團隊】~
袋鼠雲數棧 UED 團隊持續為廣大開發者分享技術成果，相繼參與開源了歡迎 star


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • iOS面試題：tableivew上面展示圖片的時候，在網路還未回來時，將cell滑走，那被划走的cell還會不會顯示圖片？
    當在UITableViewCell中載入網路圖片時，如果在圖片下載完成之前用戶滑動了UITableView，使得對應的UITableViewCell已經滑出屏幕，那麼這個被滑走的UITableViewCell是否還會顯示圖片，取決於如何處理圖片的載入和UITableViewCell的重用。 UITa ...
  • iOS開發-UITableView的重用機制
    UITableView的重用機制避免了頻繁創建和銷毀單元格的開銷，使得在顯示大量數據時，保持流暢的用戶體驗和較低的資源消耗。。 當UITableView滾動時，屏幕上移出視圖的單元格會被回收到一個重用池中。當需要顯示新的單元格時，UITableView會首先檢查重用池中是否有可用的單元格。如果有，就 ...
  • vue3快速上手指南
    1. Vue3簡介 2020年9月18日，Vue.js發佈版3.0版本，代號：One Piece（n 經歷了：4800+次提交、40+個RFC、600+次PR、300+貢獻者 官方發版地址：Release v3.0.0 One Piece · vuejs/core 截止2023年10月，最新的公開版 ...
  • 從0到1打造一個 WebRTC 應用
    ‍ 寫在開頭 點贊 + 收藏 學會 前言 2020 年初突如其來的新冠肺炎疫情讓線下就醫渠道幾乎被切斷，在此背景下，微醫作為數字健康行業的領軍者通過線上問診等形式快速解決了大量急需就醫人們的燃眉之急。而作為微醫 Web 端線上問診中重要的一環-醫患之間的視頻問診正是應用了接下來講 ...
  • Vue 中ref()與 reactive() 的區別
    在 Vue 3 中，組合式 API（Composition API）引入了新的響應式系統，使得狀態管理和邏輯復用變得更加靈活和強大。ref() 和 reactive() 是組合式 API 中兩個重要的響應式工具，它們各自有不同的使用場景和特性。在這篇博客中，我們將深入探討 ref() 和 react ...
  • 【vue深入學習第2章】Vue.js 中的 Ajax 處理：vue-resource 庫的深度解析
    Vue.js 中的 Ajax 處理：vue-resource 庫的深度解析 在現代前端開發中，Ajax 請求是與後端進行數據交互的關鍵技術。Vue.js 作為一個漸進式 JavaScript 框架，提供了多種方式來處理 Ajax 請求，其中 vue-resource 是一個較為常用的庫。儘管 vue ...
  • 【vue深入學習第1章】探索 Vue 2 的生命周期：從創建到銷毀
    Vue.js 是一個漸進式的 JavaScript 框架，用於構建用戶界面。理解 Vue 的生命周期是掌握這個框架的關鍵之一。在這篇博客中，我們將深入探討 Vue 2 的生命周期，並通過代碼示例來展示每個生命周期鉤子的作用。 Vue 實例的生命周期 Vue 實例的生命周期可以分為四個主要階段： 創建 ...
  • 探索Nuxt.js的useFetch：高效數據獲取與處理指南
    摘要：“探索Nuxt.js的useFetch：高效數據獲取與處理指南”詳述了Nuxt.js中useFetch函數的使用，包括基本用法、動態參數獲取、攔截器使用，及參數詳解。文章通過示例展示瞭如何從API獲取數據，處理動態參數，自定義請求和響應，以及useFetch和useAsyncData的參數選項... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類