Analytics Web Collector

Bitmovin player

Standard
If you are using the Bitmovin Player the Bitmovin Analytics already comes pre-packaged with the library, you just have to enable it via the embedded Analytics configuration in the Player configuration by defining an analytics key.

For more information about how to setup the Analytics configuration correctly checkout our Configuration Guide.

Please replace ANALYTICS_LICENSE_KEY with a license key from your account. Please checkout How to set up to learn more about how to get to your analytics license.

// This is the player config object
const config = {
  key: '<YOUR PLAYER KEY>',
  analytics: {
    key: '<ANALYTICS_LICENSE_KEY>',
    videoId: 'VIDEO_ID',
  },
};

Modular
If you are using the Modular Bitmovin Player packages, you need to manually add the Bitmovin Analytics Collector to your website and register it with the bitmovin player. This could be handy if you want to use a version other than the one which comes from the player package

Step 1: Add our Bitmovin Analytics Collector to your project

To install our collector you can

• run yarn add bitmovin-analytics or npm i bitmovin-analytics
• add script tag to html head <script type="text/javascript" src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>

Step 2: Add the collector to the player

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

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

After that your are ready to setup the config just like we mentioned before

Integrating 3rd Party Players

For an overview of supported third party players please checkout Supported Platforms and Collectors

Step 1: Add our Bitmovin Analytics Collector to your project

To install our collector you can

• run yarn add bitmovin-analytics or npm i bitmovin-analytics
• add script tag to html head <script type="text/javascript" src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>

Step 2: Create Config

You need to create a config which will provide the collector information about your license but also about the video. For more information checkout our Configuration Guide.

Please replace LICENSE_KEY with a license key from your account. Please see the general how to set up page here to learn more about it.

const analyticsConfig = {
  key: '<LICENSE_KEY>',
  videoId: 'VIDEO_ID',
};

Step 3: Create player and attach collector

HLS.js

import { HlsAdapter } from 'bitmovin-analytics';

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

Shaka

import { ShakaAdapter } from 'bitmovin-analytics';

const player = new shaka.Player(video);
const analytics = new ShakaAdapter(config, player);

Video.js

import { VideojsAdapter } from 'bitmovin-analytics';

const player = videojs('my-video', vjsOptions);
const analytics = new VideojsAdapter(analyticsConfig, player);

Dash.js

In order to track the player startup time correctly please also provide a timestamp created before initialising the player

import { DashjsAdapter } from 'bitmovin-analytics';

const time = new Date().getTime();
const dashjsPlayer = dashjs.MediaPlayer().create();
const analytics = new DashjsAdapter(config, dashjsPlayer, {starttime: time});

Amazon IVS

import { AmazonIVSAdapter } from 'bitmovin-analytics';

const player = IVSPlayer.create();
player.attachHTMLVideoElement(document.getElementById('video-player'));
// important that adapter creation is after player.attachHTMLVideoElement call but before player.load
const adapter = new bitmovin.analytics.adapters.AmazonIVSAdapter(analyticsConfig, player);
player.load("PLAYBACK_URL");

You can see this setup in action on this example github page https://github.com/bitmovin/amazon-ivs-collector-web-example

CAFv3 receiver

import { CAFv3Adapter } from 'bitmovin-analytics';

const context = cast.framework.CastReceiverContext.getInstance();
const analytics = new CAFv3Adapter(analyticsConfig, context);

HTML5

import { HTMLVideoElementAdapter } from 'bitmovin-analytics';

const video = document.getElementById('video');
const analytics = new HTMLVideoElementAdapter(config, video);

Check Statistics in Dashboard

After the setup is done there is nothing more to do. Events are recorded automatically and you can head over to the analytics dashboard to see statistics.