Understanding how visitors interact with video content on your website provides valuable insight into engagement. This guide covers tracking playback across three common video formats: native HTML5 video elements, embedded YouTube players, and Vimeo embeds.

What Gets Tracked

For each video format, the goal is to capture four key metrics:

Whether the visitor started playback
The percentage of the video that was watched
Whether the visitor watched the video to completion
Average play time over a period, both in seconds and as a percentage

Tracking Native HTML5 Video

The HTML5 <video> element exposes native events that make tracking straightforward. Listen for the playing, pause, and ended events to calculate how far through the video the viewer progressed. When the visitor leaves the page (on the beforeunload event), send a custom analytics event containing the progress percentage along with flags for whether playback started and whether it completed.

Tracking YouTube Embeds

YouTube provides an IFrame API that fires onStateChange callbacks. The relevant states are PLAYING, PAUSED, and ENDED. To calculate progress, divide the current playback position (getCurrentTime()) by the total duration (getDuration()). Send the resulting metrics as a custom event when the user navigates away or when the video ends.

Tracking Vimeo Embeds

The Vimeo Player SDK offers a cleaner API for this purpose. The timeupdate event provides a data.percent property directly, so there is no need to manually calculate progress. Combine this with the play event to track whether playback was initiated, and fire your analytics event with the accumulated metrics.

Setting Up Conversion Goals

Once video tracking events are flowing into your analytics dashboard, you can create conversion goals based on them. For example, set a goal for visitors who watched at least 75% of a product demo video. This lets you visualize average playback engagement over time and correlate video consumption with other site actions.