Google Analytics#

This plugin integrates Google Analytics and Google Tag Manager (gtag) with Video.js to enable tracking of video player events. It supports customizable event tracking, progress tracking, and debugging.

Initialization#

To enable plugin need to add in following options:

window.initPlayer('my-video', {
  googleAnalyticsPlugin: {
    assetName: document.title,
    mode: 'GTAG',
    events: [
      {
        name: 'ended',
        label: 'video ended',
        action: 'ended',
        enabled: true,
      },
      {
        name: 'fullscreenchange',
        label: {
          open: 'video fullscreen open',
          exit: 'video fullscreen exit',
        },
        action: 'fullscreenchange',
        enabled: true,
      },
    ],
  },
})

Options#

Option	Type	Description
assetName	`string`	The name of the asset being tracked (e.g., video title). Defaults to the document title if not specified.
debug	`boolean`	Enables debug mode to log additional information to the console for troubleshooting.
mode	`'GA' '\| 'GTAG'`	The tracking mode to use: `GA` for Google Analytics or `GTAG` for Google Tag Manager. If not specified, it is auto-detected based on `gtag` availability.
events	`{ name: string; action: string; label?: string \| { open: string; exit: string }; enabled: boolean; }[]`	An array of objects representing events to be tracked. Each object includes: `name`: The name of the event (e.g., `'play'`, `'pause'`, `'timeupdate'`). `action`: The action associated with the event (e.g., `'Started Video'`). `label`: An optional label for the event, which can be a string or an object with `open` and `exit` for fullscreen events. `enabled`: A boolean indicating whether the event is enabled for tracking.