Name	Name	Last commit message	Last commit date
parent directory ..
src	src
test	test
LICENSE	LICENSE
README.md	README.md
banner.js	banner.js
build	build
jest.config.js	jest.config.js
package-lock.json	package-lock.json
package.json	package.json
rollup.config.js	rollup.config.js
tsconfig.json	tsconfig.json

Name

Last commit message

Last commit date

Snowplow Media Tracking

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

Adds Video and Audio tracking events to your Snowplow tracking.

Maintainer quick start

Part of the Snowplow JavaScript Tracker monorepo.
Build with Node.js (12 LTS or 14 LTS) 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 TrackMedia function described below to produce events from your Video/Audio element(s).

TrackMedia( mediaId, [ config ])

Parameters

Argument	Type	Default	Required	Description
`mediaId`	string	-	Yes	The HTML id attribute of the media element
`config`	object	See below	No	The config options for tracking

Config

Parameter	Type	Default	Description
`label`	`string`	-	An identifiable custom label sent with the event
`listenEvents`	`string[]`	`ControlEvents`	The name(s) of the events you want to listen for
`percentageBoundries`	`number[]`	`[10, 25, 50, 75]`	The progress percentages to fire an event at (if enabled)

Pre-Made Event Groups

`ControlEvents`

Event	Description
pause	---
play	---
seeked	---
ratechange	---
volumechange	---
change	---
fullscreenchange	---
enterpictureinpicture	---
leavepictureinpicture	---

Example Usage

<!DOCTYPE html>

<html>
  <head>
    ...
  </head>
  <body>
    <video id="my-video" src="my-video.mp4">
  </body>
</html>

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

TrackMedia(
  "my-video",
  {
    label: "My Custom Video Label",
    listenEvents: ["pause", "volumechange", "percentprogress"],
    percentageBoundries: [10, 25, 50, 75],
  }
)

Copyright and license

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

FilesExpand file tree

browser-plugin-media-tracking

Directory actions

More options