Impression Tracking for Product Carousels

Accurate carousel impressions need two conditions at once — the carousel is in the viewport, and the card is visible within the carousel's scrolling track — so use one observer on the carousel with the viewport as root, one on the cards with the track as root, and count an impression only when both hold for a minimum dwell time.

Problem / Scenario Context

A retailer's merchandising team pays attention to "impressions" for products shown in homepage carousels, and rewards categories whose products get more of them. The current tracker observes every card against the viewport. Because the carousel's track clips off-screen cards, those are correctly excluded — but the tracker counts all cards visible in the track the moment the page loads, even when the carousel is two screens down and nobody has scrolled to it (the tracker was only checking the track). A second version fixed that and then counted every card a user swiped past in a fast fling, inflating numbers for products in the middle of each carousel.

A defensible impression needs visibility in both frames and a little time. The Dynamic Visibility Tracking topic describes impression rules in general; tracking ad visibility for analytics compliance covers the ad-industry version.

Mechanics Explanation

A card inside a horizontally scrolling carousel is visible to the user only if:

1. The carousel is on screen — its bounding box intersects the viewport.
2. The card is on screen within the carousel — it intersects the track's visible area.

With the implicit root, the observer already clips the card by the track before intersecting with the viewport, so (1) and (2) are combined — correctly — into one ratio. The first version's bug came from observing with the track as root, which answers only (2). The combined approach works, but has a practical drawback: to pre-load images one slide ahead you want a track-rooted observer with a margin, while for impressions you want no margin at all, so most implementations end up with two concerns in one callback.

The cleaner design separates them: a gate observer (viewport root) knows whether the carousel is visible; a card observer (track root, no margin) knows which cards are visible within the track. An impression timer runs for a card only while both are true, and fires after the dwell threshold — commonly 50% of the card for at least one continuous second.

Comparison Table: Impression Definitions

Minimal Reproducible Example

const track = document.querySelector<HTMLElement>('.carousel-track')!;
new IntersectionObserver((entries) => {
  for (const e of entries) if (e.intersectionRatio >= 0.5) recordImpression(e.target);
}, { root: track, threshold: 0.5 }).observe(...track.querySelectorAll('.card'));

declare function recordImpression(el: Element): void;

Load the page and do not scroll: the first four cards of a carousel far below the fold are recorded as impressions immediately.

Production-Safe Solution

interface CarouselImpressionOptions {
  carousel: HTMLElement;
  track: HTMLElement;
  minRatio?: number;
  dwellMs?: number;
  onImpression: (productId: string) => void;
}

export function trackCarouselImpressions(o: CarouselImpressionOptions): () => void {
  const { carousel, track, minRatio = 0.5, dwellMs = 1000, onImpression } = o;
  let carouselVisible = false;
  const cardVisible = new Set<Element>();
  const timers = new Map<Element, number>();
  const recorded = new Set<string>();

  const sync = (card: Element): void => {
    const should = carouselVisible && cardVisible.has(card) && document.visibilityState === 'visible';
    if (should && !timers.has(card)) {
      timers.set(card, window.setTimeout(() => {
        timers.delete(card);
        const id = (card as HTMLElement).dataset.productId!;
        if (recorded.has(id)) return;
        recorded.add(id);
        onImpression(id);
        cards.unobserve(card);
        cardVisible.delete(card);
      }, dwellMs));
    } else if (!should && timers.has(card)) {
      clearTimeout(timers.get(card));                 // continuity broken: start over next time
      timers.delete(card);
    }
  };
  const syncAll = () => cardVisible.forEach(sync);

  const gate = new IntersectionObserver(([e]) => {
    carouselVisible = e.intersectionRatio >= 0.3;       // most of the carousel on screen
    syncAll();
  }, { threshold: [0, 0.3] });

  const cards = new IntersectionObserver((entries) => {
    for (const e of entries) {
      e.intersectionRatio >= minRatio ? cardVisible.add(e.target) : cardVisible.delete(e.target);
      sync(e.target);
    }
  }, { root: track, threshold: [0, minRatio] });

  const onVis = () => syncAll();
  document.addEventListener('visibilitychange', onVis);

  gate.observe(carousel);
  track.querySelectorAll('.card').forEach((c) => cards.observe(c));

  return () => {
    gate.disconnect(); cards.disconnect();
    timers.forEach((t) => clearTimeout(t));
    document.removeEventListener('visibilitychange', onVis);
  };
}

Each card's timer runs only while all three conditions hold — carousel on screen, card half-visible in the track, tab visible — and is cancelled the moment any fails, so a fling past a card never completes its second. Recorded products are unobserved, and a set of product ids prevents double counting when the same product appears in two carousels or twice in one (looping carousels often clone slides).

Impressions should be batched rather than sent one by one; hand onImpression a queue drained at idle time, as in deferring non-urgent observer work with requestIdleCallback.

Looping and Auto-Advancing Carousels

Two common carousel features need specific handling:

Looping carousels clone slides at both ends so swiping wraps seamlessly. Clones have the same data-product-id as the originals; the recorded set prevents double counting, but clones should also be observed so an impression can be earned on either copy.

Auto-advancing carousels move without user action. Whether an automatically displayed card should count is a business decision; many teams count it only if the user has interacted with the carousel or the page recently, since an auto-advancing carousel on an unattended page would otherwise generate impressions indefinitely. Pausing auto-advance when the carousel leaves the viewport — which the gate observer already knows — is good for users and battery too; see pausing background video to save battery for the same principle applied to media.

Verification Steps

• Load the page without scrolling and confirm no impressions for carousels below the fold.
• Fling through a carousel and confirm no impressions for cards passed in under a second.
• Stop on a card for over a second and confirm exactly one impression.
• Switch tabs mid-dwell and confirm the timer is cancelled.
• Swipe through a looping carousel twice and confirm each product is counted once.

Common Mistakes to Avoid

• Track root alone. Counts cards in carousels nobody has scrolled to.
• No dwell time. Counts every card flicked past.
• Resetting dwell timers without continuity. Pausing and resuming a timer accumulates non-continuous time; restart it instead.
• Ignoring clones. Looping carousels double count or never count cloned positions.

FAQ

Related

• Using a Scroll Container as IntersectionObserver Root — the track-rooted observer
• Detecting Element Visibility Inside overflow: hidden Parents — clipping rules
• Tracking Section Read Time with IntersectionObserver — dwell timing for content

↑ Back to Dynamic Visibility Tracking