Exposure Tracking for List Elements in Frontend Development

For many front‑end engineers, "buried points" (埋点) are an unavoidable yet often dreaded task because they are primarily a front‑end responsibility, require invasive code changes, and lack server‑side involvement.

Despite the effort, exposure tracking is crucial for collecting online business data such as purchase behavior and activity conversion, especially during large promotions like 618 or Double‑11, where accurate data supports product strategy adjustments and performance verification.

Method 1: Estimate Visible Elements from Paginated Data

Implementation idea: Use each page of data returned by a pagination API as a rough estimate of currently visible items. This approach is simple but suffers from large errors because a single page may contain more items than fit on one screen and item heights can vary.

Method 2: Listen to Scroll Events and Compute Positions in Real‑Time

Implementation idea: Attach a scroll listener to the list container, use getBoundingClientRect (or equivalent) to obtain each element’s coordinates, and compare them with the viewport to determine visibility. This method offers higher precision but incurs heavy computation, potential performance degradation, and complex logic.

Method 3: Use Browser Standard API – Intersection Observer

Implementation idea: Leverage the IntersectionObserver API (introduced in Chrome 51, 2016) to asynchronously monitor intersection changes between target elements and a root viewport. It provides high performance, low computation overhead, accurate results, and concise code.

Web (H5) Implementation Steps

1. Create an observer: let observer = new IntersectionObserver(callback, options);

2. Define options (root, rootMargin, threshold): interface IntersectionObserverInit { root?: Element | Document | null; rootMargin?: string; threshold?: number | number[]; }

3. Observe a target element: let target = document.querySelector('#listItem'); observer.observe(target);

4. Handle callback results, which include properties such as time , target , rootBounds , boundingClientRect , intersectionRect , intersectionRatio , and isIntersecting .

5. Stop observing when needed: // Stop observing a specific element observer.unobserve(target); // Disconnect the observer entirely observer.disconnect();

WeChat Mini‑Program Implementation

Use wx.createIntersectionObserver to create the observer, then call relativeTo or relativeToViewport to set the reference node, and finally observe target selectors with a callback.

Example creation: Page({ data: {appear: false}, onLoad() { this._observer = wx.createIntersectionObserver(this, { thresholds: [0.2, 0.5] }); }, onUnload() { if (this._observer) this._observer.disconnect(); } });

Observation example: this._observer.observe('.ball', (res) => { console.log(res); this.setData({appear: res.intersectionRatio > 0}); });

Taro (React) Implementation

Taro aligns its IntersectionObserver API with the mini‑program version, internally delegating to the web API on H5 and bridging to native APIs on mini‑programs.

Key pitfalls and solutions:

Listener may not work if added immediately after state updates; use Taro.nextTick to delay registration.

Observer must receive the native component instance; obtain it via Taro.getCurrentInstance().page or props.$scope in mixed mode.

Dataset information is not directly provided; retrieve it by locating the element by its id using document.getElementById and then accessing dataset .

Example of delayed observation and dataset extraction: Taro.nextTick(() => { expoObserver.relativeTo('.clpScrollView').observe('.coupon-item', result => { if (!result?.id) return; const tarElement = document.getElementById(result.id); const dataInfo = tarElement?.dataset; console.log(tarElement, dataInfo); }); });

By combining these methods, developers can reliably implement exposure tracking for long lists across Web, WeChat mini‑programs, and Taro, enabling accurate data collection for analytics, lazy loading, and other advanced use cases.