Audio/Video tracking for Snowplow
npm install @snowplow/browser-plugin-media-tracking[![npm version][npm-image]][npm-url]
[![License][license-image]](LICENSE)
Browser Plugin to be used with @snowplow/browser-tracker.
Adds HTML5 Video and Audio tracking events to your Snowplow tracking.
Part of the Snowplow JavaScript Tracker monorepo.
Build with Node.js (18 - 20) and Rush.
``bash`
npm install -g @microsoft/rush
git clone https://github.com/snowplow/snowplow-javascript-tracker.git
rush update
With npm:
`bash`
npm install @snowplow/browser-plugin-media-tracking
Initialize your tracker with the MediaTrackingPlugin:
`js
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).
`js`
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.
`html`
...
`js
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.
Licensed and distributed under the BSD 3-Clause License ([An OSI Approved License][osi]).
Copyright (c) 2022 Snowplow Analytics Ltd.
All rights reserved.
[npm-url]: https://www.npmjs.com/package/@snowplow/browser-plugin-form-tracking
[npm-image]: https://img.shields.io/npm/v/@snowplow/browser-plugin-form-tracking
[docs]: https://docs.snowplowanalytics.com/docs/collecting-data/collecting-from-own-applications/javascript-tracker/
[osi]: https://opensource.org/licenses/BSD-3-Clause
[license-image]: https://img.shields.io/npm/l/@snowplow/browser-plugin-form-tracking