@snowplow/browser-plugin-youtube-tracking NPM

Snowplow YouTube Tracking

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

Adds YouTube 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-youtube-tracking

Usage

Initialize your tracker with the YouTubeTrackingPlugin:

import { newTracker } from '@snowplow/browser-tracker';
import { YouTubeTrackingPlugin } from 'snowplow-browser-youtube-tracker';

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

Then, use the enableYouTubeTracking function described below to produce events from your YouTube IFrame(s).

enableYouTubeTracking({ id, options?: { label?, captureEvents?, percentBoundries?, updateRate? } })

Parameter	Type	Default	Description	Required
`id`	`string`	-	The HTML id attribute of the youtube 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.boundries`	`number[]`	`[10, 25, 50, 75]`	The progress percentages to fire an event at (if enabled)	No
`options.updateRate`	`number`	`500`	The rate at which volume/seek events are checked in ms	No

Example Usage

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

import { enableYouTubeTracking } from '@snowplow/browser-plugin-youtube-tracking'

enableYouTubeTracking({
  id: 'my-video',
  options: {
    label: "My Custom Video Label",
    captureEvents: ["pause", "volumechange", "percentprogress"],
    boundries: [10, 25, 50, 75],
  }
})