Intersection Observer & Efficient Scroll Handling

What is the most efficient way to track element visibility for analytics?

const analyticsObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const timeVisible = entry.time;
      const visiblePercentage = Math.round(entry.intersectionRatio * 100);
      if (!entry.target.dataset.tracked) {
        trackElementView({
          elementId: entry.target.id,
          timeVisible,
          visiblePercentage
        });
        entry.target.dataset.tracked = 'true';
      }
    }
  });
}, {
  threshold: [0, 0.25, 0.5, 0.75, 1]
});

Check elements periodically
Use scroll event listeners
Track all elements continuously
Use Intersection Observer with multiple thresholds
Using Intersection Observer for analytics tracking is most efficient because: 1) It provides accurate visibility data without performance overhead, 2) Multiple thresholds allow tracking different levels of visibility, 3) The time property enables precise timing measurements, 4) One-time tracking can be implemented using data attributes. The code shows how to track element visibility with percentage calculations and prevent duplicate tracking, ideal for analytics implementations.

Next Question (20/20)