Open Source

HTML Media Elements Tracking

Rastrea automáticamente eventos de reproducción, pausa, progreso y finalización para cada elemento de vídeo y audio HTML5 en tu página. Envía eventos de medios estandarizados a tu data layer sin configuración.

Ver en GitHub All Tools

Características

Tracking de medios, automático

Auto-Detección

Encuentra y rastrea automáticamente todos los elementos de vídeo y audio de la página — incluyendo los añadidos dinámicamente.

Hitos de Progreso

Rastrea hitos de progreso del 10%, 25%, 50%, 75% y 100% de forma predeterminada.

Eventos de Data Layer

Envía eventos estandarizados al data layer, listos para que GTM o cualquier tag manager los recoja.

Sin Configuración

Añádelo y funciona. Sin selectores, sin IDs, sin binding manual de eventos.

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.

Hablemos

Tanto si necesitas una implementación desde cero, una auditoría de tu configuración actual o asesoramiento experto — estamos aquí para ayudarte.

Hablemos Explorar Herramientas Gratuitas