[object Object] Icon

Learn how to create, start, manage and modify Encodings

[object Object] Icon

Learn how to create, start, manage and modify Players

[object Object] Icon

Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Wed Feb 12 2020

Integrating Bitmovin Analytics with Shaka Player

InstallationLink Icon

Firstly you have to add the Bitmovin Analytics Collector to your website. Therefore, please add the following <script></script> tag to the head of your page:

Install from CDN

1<script type="text/javascript" src="https://cdn.bitmovin.com/analytics/web/2/bitmovinanalytics.min.js"></script>

Install via NPM

If you prefer to package the Bitmovin Analytics collector with your own build pipeline please use the bitmovin-analytics package from the NPM registry via npm: npm install bitmovin-analytics.

To import the Shaka Adapter just use regular ES6 style imports. Bitmovin Analytics collector is UMD and ES6 compatible.

1import { ShakaAdapter } from 'bitmovin-analytics';

Integration into Shaka Player

After importing analytics you need to create the ShakaAdapter by passing the analytics configuration and your Shaka Player instance. A typical setup would look like this:

1var video = document.getElementById('my-video');
2var player = new shaka.Player(video);
3new bitmovin.analytics.adapters.ShakaAdapter(analyticsConfig, player);

Where the analytics config is described in the following section

Minimal ConfigurationLink Icon

Bitmovin Analytics requires at least a license key to be configure.

1const config = { key: "INSERT-ANALYTICS-KEY-HERE" };

Optional Fields and Important FieldsLink Icon

While the minimum configuration is the bare minimum to get started, the following fields are strongly recommended to be set:

  • videoId
  • title
  • cdnProvider

VideoId & Title

Supplying a videoId to Analytics makes it easy to distinguish between played contents so it is highly recommended to set this setting to something that corresponds with your System (usually a CMS Id or some string that identifies the Video for you). It is also advised to set the title field to something human-readable so you don't have to remember Ids when searching for things in the Analytics Dashboard)

Setting the videoId as well as the title is simple.

1var analyticsConfig = {
3 videoId: "YOUR-VIDEO-ID",
4 title: "A descriptive video title"

Note that if you are using a player to play multiple videos, you will want to pass videoId and title for subsequent videos through the source config. This is explained at https://bitmovin.com/docs/analytics/tutorials/switching-to-a-new-video-with-web-collector-and-bitmovin-player

CDN Provider

If you are using multiple CDNs or plan to test with different CDNs in the future it's very helpful to set the cdnProvider parameter to be able to compare performance between the CDNs. You can specify any string, but we have built in some constants that are available on bitmovin.analytics.CdnProviders or by importing it with import { CdnProviders } from 'bitmovin-analytics'.


Custom DataLink Icon

It is possible to supply custom data to Bitmovin Analytics. We support 5 fields for custom data as well as experimentName which can be used to A/B Test your setup.

CustomData fields include:

  • customData1
  • customData2
  • customData3
  • customData4
  • customData5

Verify your SetupLink Icon

To test if your setup is working you can just go to your Analytics Dashboard to check if your sessions are being recorded already. If you don't see any sessions, please check if you are using the correct analytics key, and you have added all allowed domains correctly in your analytics license.

Give us feedback