@snowplow/browser-plugin-media-tracking

Snowplow Media Tracking

Browser Plugin to be used with @snowplow/browser-tracker.

Adds HTML5 Video and Audio tracking events to your Snowplow tracking.

Maintainer quick start

Part of the Snowplow JavaScript Tracker monorepo. Build with Node.js (18 - 20) and Rush.

Setup repository

npm install -g @microsoft/rush
git clone https://github.com/snowplow/snowplow-javascript-tracker.git
rush update

Package Installation

With npm:

npm install @snowplow/browser-plugin-media-tracking

Usage

Initialize your tracker with the MediaTrackingPlugin:

import { newTracker } from '@snowplow/browser-tracker';
import { MediaTrackingPlugin, startHtml5MediaTracking, endHtml5MediaTracking } from '@snowplow/browser-plugin-media-tracking';

newTracker('sp2', '{{collector}}', { plugins: [ MediaTrackingPlugin() ] }); // Also stores reference at module level

Then, use the startHtml5MediaTracking function described below to produce events from your HTML5 Video/Audio element(s).

startHtml5MediaTracking({ video, id })

Parameter	Type	Description	Required
id	string	A UUID identifier to use as the media session ID	Yes
video	string / HTMLElement	The HTML id attribute, CSS selector, or actual media element to track media events for	Yes

See the full documentation for optional parameters.

Example Usage

  ...
  <video id="my-video" src="my-video.mp4">
  ...

import { startHtml5MediaTracking, endHtml5MediaTracking } from '@snowplow/browser-plugin-media-tracking';

const sessionId = crypto.randomUUID();

startHtml5MediaTracking({
  id: sessionId,
  video: 'my-video',
  label: "My Custom Video Label",
  boundaries: [10, 25, 50, 75],
});

/* ... */

endHtml5MediaTracking(sessionId);

For a full list of parameters and trackable events, head over to the docs page.

Copyright and license

Licensed and distributed under the BSD 3-Clause License (An OSI Approved License).

Copyright (c) 2022 Snowplow Analytics Ltd.

All rights reserved.