@snowplow/browser-plugin-media-tracking NPM

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 (14 or 16) 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 } from 'snowplow-browser-media-tracker';

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

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

enableMediaTracking({ id, options?: { label?, captureEvents?, boundaries?, volumeChangeTrackingInterval? } })

Parameter	Type	Default	Description	Required
`id`	`string`	-	The HTML id attribute of the media element	Yes
`options.label`	`string`	-	An identifiable custom label sent with the event	No
`options.captureEvents`	`string[]`	`['DefaultEvents']`	The name(s) of the events to capture	No
`options.boundaries`	`number[]`	`[10, 25, 50, 75]`	The progress percentages to fire an event at (if enabled)	No
`options.volumeChangeTrackingInterval`	`number`	`250`	The rate at which volume events can be sent	No

Example Usage

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

import { enableMediaTracking } from '@snowplow/browser-plugin-media-tracking'

enableMediaTracking({
  id: 'my-video',
  options: {
    label: "My Custom Video Label",
    captureEvents: ["DefaultEvents"],
    boundaries: [10, 25, 50, 75],
    volumeChangeTrackingInterval: 250,
  }
})

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