Open Source

HTML Media Elements Tracking

Automatically track play, pause, progress, and completion events for every HTML5 video and audio element on your page. Push standardized media events to your data layer with zero configuration.

View on GitHub All Tools

Features

Media tracking, automatic

Auto-Detection

Automatically finds and tracks all video and audio elements on the page — including dynamically added ones.

Progress Milestones

Tracks 10%, 25%, 50%, 75%, and 100% progress milestones out of the box.

Data Layer Events

Pushes standardized events to the data layer, ready for GTM or any tag manager to pick up.

Zero Config

Drop it in and it works. No selectors, no IDs, no manual event binding needed.

Quick Start

One script tag. That's it.

Add the script

index.html

<script src="https://cdn.jsdelivr.net/gh/analytics-debugger/
html-media-elements-tracking-library/dist/
html-media-elements-tracking.min.js"></script>

Events tracked automatically

events

// That's it. Once loaded, the library
// automatically tracks all <video> and
// <audio> elements on the page.

// Events pushed to dataLayer:
// - html_media_play
// - html_media_pause
// - html_media_progress (10%, 25%, 50%, 75%)
// - html_media_complete (100%)
// - html_media_seeking
// - html_media_volume_change

DataLayer output

dataLayer

// Example dataLayer push:
{
  event: "html_media_progress",
  html_media: {
    type: "video",           // or "audio"
    title: "Product Demo",
    src: "/videos/demo.mp4",
    duration: 120,
    currentTime: 30,
    percent: 25,             // milestone
    volume: 0.8,
    muted: false,
    playbackRate: 1,
    visible: true            // in viewport
  }
}

Use with Google Tag Manager

GTM setup

// In GTM, create a trigger:
// Trigger Type: Custom Event
// Event Name: html_media_progress
//
// Then use these Data Layer Variables:
// - html_media.type
// - html_media.title
// - html_media.percent
// - html_media.duration
//
// Send to GA4 as a custom event
// with all media parameters attached.

Let's Talk

Whether you need an implementation from scratch, an audit of your current setup, or expert advice — we're here to help.

Let's Talk Explore Free Tools