bitmovin-analytics

Bitmovin Analytics Collector

Instruments adaptive streaming video players and collects information to be sent to the Bitmovin Analytics service.

To get started collecting data with Bitmovin Analytics you need a License-Key which you can get for free by signing up for a free Bitmovin account.

Supported Players

The supported video players are shown here: Analytics Collectors - HTML5

Usage

A getting started guide on how to integrate Bitmovin Analytics Collector with the Bitmovin Player is available on our homepage.

For more comprehensive integration documentation please consult the Bitmovin Analytics documentation.

Integrating Bitmovin 8

Bitmovin Player v8 comes with Analtyics pre-installed and just requires an analytics section containing your license key in the player configuration.

A minimal example:

const configWithAnalytics = {
  key: '<YOUR PLAYER KEY>',
  analytics: {
    key: '<YOUR ANALYITICS KEY>',
    videoId: 'VIDEO_ID',
  },
};

const container = document.getElementById('my-player');
const player = bitmovin.player.Player(container, configWithAnalytics);

To ensure you are running a specific version (e.g. when including the bitmovin-analytics package from NPM) override the built-in analytics module:

Using script tag:

<script type="text/javascript" src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>;
bitmovin.player.Player.addModule(bitmovin.analytics.PlayerModule);

Using npm:

import {Player} from 'bitmovin-player/modules/bitmovinplayer-core';
import {PlayerModule as AnalyticsModule} from 'bitmovin-analytics';
Player.addModule(AnalyticsModule);

Integrating 3rd Party Players

To integrate other players pick the appropriate adapter (HlsAdapter, VideojsAdapter, ShakaAdapter, DashjsAdapter or HTMLVideoElementAdapter) and instantiate the adapter by passing the player instance.

An example for HLS.js:

const analyticsConfig = {
  key: '<YOUR ANALYITICS KEY>',
  videoId: 'VIDEO_ID',
};

const player = new Hls();
const analytics = new bitmovin.analytics.adapters.HlsAdapter(config, player);

player.loadSource('https://path.to/your/stream.m3u8');
player.attachMedia(document.getElementById('video'));

Before changing the video source in the player, you need to call sourceChange() on the assotiated analytics adapter. You can pass new configuration properties to this method like videoId or videoTitle

analytics.sourceChange({
  videoID: 'new-video-id',
  videoTitle: 'New Video',
});

// Load the new source into player