How to Track Video Engagement with Events

A product demo video on your homepage is an investment with a measurable return — except almost nobody measures it. Did visitors press play? Did they survive the first ten seconds? Did watchers convert better than non-watchers? Three event types answer all of it, for self-hosted video and embeds alike.

The event model

const video = document.querySelector('#demo-video');
const fired = new Set();

video?.addEventListener('play', () => {
  if (!fired.has('play')) {
    fired.add('play');
    window.webanalytics?.track('video_play', { video: 'homepage_demo' });
  }
});

video?.addEventListener('timeupdate', () => {
  const pct = Math.floor((video.currentTime / video.duration) * 100);
  for (const m of [25, 50, 75]) {
    if (pct >= m && !fired.has(m)) {
      fired.add(m);
      window.webanalytics?.track('video_progress', {
        video: 'homepage_demo', milestone: m,
      });
    }
  }
});

video?.addEventListener('ended', () => {
  window.webanalytics?.track('video_complete', { video: 'homepage_demo' });
});

Milestone dedup mirrors scroll-depth tracking: a handful of events per viewer, never a stream.

YouTube and Vimeo embeds

Embeds need the platform's iframe API instead of native events — YouTube's onStateChange gives you play and end; poll getCurrentTime() for milestones. The event names stay identical, so the report does not care where the video is hosted. (The platforms' own studios show watch time but cannot connect it to your conversions — that join is the entire point.)

Reading the funnel

1. Play rate (plays ÷ page visitors): under 10% usually means thumbnail/placement, not content. Above the fold with a human face on the poster frame is the boring fix that works.
2. The 25% cliff: most drop-off happens early. A steep play→25% loss means the opening seconds promise the wrong thing — recut the intro before touching anything else.
3. Completion → conversion: the report that justifies the production budget. Compare signup rates of visitors who hit video_complete against those who never pressed play. If watchers convert 3× better, drive more visitors to press play; if they convert the same, your video is decoration — also worth knowing.

One performance caveat

Video embeds are routinely the heaviest thing on a page — a YouTube iframe loads hundreds of KB before anyone clicks. Use a facade (thumbnail + click-to-load) and your LCP survives; your per-visit load times will confirm the difference within a day of shipping.