Skip to main content

YouTube Tracking

This plugin will allow the tracking of an embedded YouTube IFrame.

Installation‚Äč

  • npm install @snowplow/browser-plugin-youtube-tracking
  • yarn add @snowplow/browser-plugin-youtube-tracking
  • pnpm add @snowplow/browser-plugin-youtube-tracking

Initialization‚Äč

import { newTracker, trackPageView } from '@snowplow/browser-tracker';
import { YouTubeTrackingPlugin, enableYouTubeTracking } from '@snowplow/browser-plugin-youtube-tracking';

newTracker('sp1', '{{collector_url}}', {
appId: 'my-app-id',
plugins: [ YouTubeTrackingPlugin() ],
});

enableYouTubeTracking(/* options */);

Quick Start‚Äč

The snippets below show how to get started with the plugin, after setting up your tracker.

The plugin's id attribute will accept:
  • The id of an iframe element
  • An existing instance of YT.Player, created with the YouTube Iframe API
<iframe
id="yt-player"
src="https://www.youtube.com/embed/zSM4ZyVe8xs"
></iframe>
import { enableYouTubeTracking } from '@snowplow/browser-plugin-youtube-tracking'

enableYouTubeTracking({
id: 'yt-player'
})

The enableYouTubeTracking function‚Äč

The enableYouTubeTracking function takes the form:

enableYouTubeTracking({ id, options?: { label?, captureEvents?, boundaries?, updateRate? } })
ParameterTypeDefaultDescriptionRequired
idstring or YT.Player-The HTML id attribute of the media elementYes
options.labelstring-An identifiable custom label sent with the eventNo
options.captureEventsstring[]['DefaultEvents']The events or Event Group to capture. For a full list of events and groups, check the section belowNo
options.boundariesnumber[][10, 25, 50, 75]The progress percentages to fire an event at (valid values 1 - 99 inclusive) [1]No
options.updateRatenumber250The rate at which seek and volumechange events can occur [2]No

Below is an example of the full enableYouTubeTracking function:

enableYouTubeTracking({
id: 'example-video',
options: {
label: 'My Custom Video Label',
captureEvents: ['play', 'pause', 'ended'],
boundaries: [20, 80],
updateRate: 200,
}
})

Usage‚Äč

For this plugin to find your media element, your IFrame must be given the id that is passed into enableYouTubeTracking:

index.html

 <iframe
id="example-id"
src="https://www.youtube.com/embed/zSM4ZyVe8xs"
></iframe>

main.js

enableYouTubeTracking({
id: 'example-id',
options: {
label: 'My Video Title',
boundaries: [10, 25, 50, 75]
}
})

Events‚Äč

Capturable Events‚Äč

Below is a table of all the events that can be used in options.captureEvents

NameFire Condition
playThe video is played
pauseThe video is paused
seekOn seek
volumechangeVolume has changed
endedWhen playback stops at the end of the video
errorAn error occurs in the player
percentprogressWhen a percentage boundary set in options.boundaries is reached
playbackratechangePlayback rate has changed
playbackqualitychangePlayback quality has changed

Event Groups‚Äč

You can also use a pre-made event group in options.captureEvents:

NameEvents
DefaultEvents['play', 'pause', 'seek', 'volumechange', 'ended', 'percentprogress', 'playbackratechange', 'playbackqualitychange']
AllEventsEvery event listed in Capturable Events

It is possible to extend an event group with any event in the Events table above. This could be useful if you want, for example, all the events contained in the 'DefaultEvents' group, along with the 'error' event. This is expressed in the following way:

enableYouTubeTracking({
id: 'example-video',
options: {
captureEvents: ['DefaultEvents', 'error'],
}
})

Schemas and Example Data‚Äč

Three schemas are used with this plugin:

An unstructured event with identifying information‚Äč

{
"type": "play",
"label": "Identifying Label"
}

Snowplow platform-agnostic media context‚Äč

{
"currentTime": 12.32,
"duration": 20,
"ended": false,
"loop": false,
"muted": true,
"paused": false,
"playbackRate": 1,
"volume": 100
}

YouTube player specific context‚Äč

{
"autoPlay": false,
"avaliablePlaybackRates": [
0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2
],
"buffering": false,
"controls": true,
"cued": false,
"loaded": 17,
"playbackQuality": "hd1080",
"playerId": "example-id",
"unstarted": false,
"url": "https://www.youtube.com/watch?v=zSM4ZyVe8xs",
"yaw": 0,
"pitch": 0,
"roll": 0,
"fov": 100.00004285756798,
"avaliableQualityLevels": [
"hd2160",
"hd1440",
"hd1080",
"hd720",
"large",
"medium",
"small",
"tiny",
"auto"
]
}

  1. To track when a video ends, use the 'ended' event.

  2. seek and volumechange use setInterval to poll the player every n ms. You are able to adjust the poll rate, however, lower values may cause performance issues.

Was this page helpful?