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
ornpm 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
ornpm 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.
Updated 10 months ago