@bitmovin/player-integration-moat

v1.2.3

Published

5 months ago

MOAT analytics integration for the Bitmovin Player

Downloads

0High
0Medium
0Low

bitadmin

Bitmovin Player MOAT Analytics Integration

Limitations

This integration currently is only compatible with the Bitmovin Yospace integration and FreeWheel, or with client-side FreeWheel ads.

Usage

First let's create a fresh build of the integration:

$ git clone https://github.com/bitmovin/bitmovin-player-web-analytics-moat.git
$ cd bitmovin-player-web-analytics-moat
$ npm install
$ npm run build

To run the example, located in example/, type npm start, which will open the client-side ads example per default. Please make sure to replace the placeholders with your stream URLs and VMAP ad tag in index.html.
For the Yospace example, add yospace.html to the URL in your browser. Please make sure to add yo-ad-management.min.js and bitmovinplayer-yospace.js to the directory first. Please also replace the placeholders with your Yospace stream URLs in yospace.html.

Next, obtain the extension file from dist/bitmovinplayer-analytics-moat.js, as well as the MOAT initialization snippet from dist/moat.js', and include them in your page in the following order:

Client-side ads

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bitmovin Player Analytics MOAT Integration</title>
    <script type="text/javascript" src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
    <script type="text/javascript" src="//cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js"></script>
    <script src="moat.js"></script>
    <script src="bitmovin-player-analytics-moat.js"></script>
  </head>
  <body>
    <div id="player"></div>
  </body>
</html>

First, we need to add the Bitmovin Advertising Module (BAM) to the site:

bitmovin.player.Player.addModule(bitmovin.player['advertising-bitmovin'].default);

Then we can initialize the Bitmovin Player with the integration. We already load the VMAP ad tag here as well:

var config = {
  key: 'YOUR-PLAYER-KEY',
  cast: {
    enable: true
  },
  logs: {
    level: 'debug'
  }
  advertising: {
    adBreaks: [{
      tag: {
        url: '//example.tld/path/to/vmap.ad.tag',
        type: 'vmap',
      },
    }],
  },
};

var container = ;

var player = new bitmovin.player.Player(document.getElementById('player'), config);
var moat = new bitmovin.player.analytics.MoatAnalytics(player, 'MOAT_CUSTOMER_KEY');

Please replace MOAT_CUSTOMER_KEY with your key.

Now everything is set up to load the player:

var playerSource = {
  title: 'Video Title',
  description: 'Video Description',
  dash: '//example.tld/path/to/manifest.mpd',
  poster: '//example.tld/path/to/poster.jpg',
};

player.load(playerSource).then(function() {
  console.log('Success loading Bitmovin Player source');
}).catch(function(reason) {
  console.error('Loading Bitmovin Player Source Failed:', reason);
});

If the player is not needed any more, don't forget to destroy it:

player.destroy();

Yospace

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bitmovin Player Analytics MOAT Integration</title>
    <script src="yo-ad-management.min.js"></script>
    <script src="bitmovinplayer-yospace.js"></script>
    <script src="moat.js"></script>
    <script src="bitmovinplayer-analytics-moat.js"></script>
    <script type="text/javascript" src="//cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js"></script>
    <link rel="stylesheet" href="//cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css">
  </head>
  <body>
    <div id="player"></div>
  </body>
</html>

Then we can initialize the Bitmovin Player with the integration:

var playerConfig = {
  key: 'YOUR-PLAYER-KEY',
  cast: {
    enable: true
  },
  logs: {
    level: 'debug'
  }
};

var yospaceConfig = {
  debug: true
};

var container = document.getElementById('player');

var player = new bitmovin.player.ads.yospace.BitmovinYospacePlayer(container, playerConfig, yospaceConfig);
bitmovin.playerui.UIFactory.buildDefaultUI(player);

var moat = new bitmovin.player.analytics.MoatAnalytics(player, 'MOAT_CUSTOMER_KEY');

Please replace MOAT_CUSTOMER_KEY with your key.

Now everything is set up to load the player and schedule ads:

var playerSource = {
  title: 'Video Title',
  description: 'Video Description',
  hls: '//example.tld/path/to/manifest.m3u8',
  poster: '//example.tld/path/to/poster.jpg',
  
  // Yospace config
  // VOD for on demand or LINEAR for live streams
  assetType: bitmovin.player.ads.yospace.YospaceAssetType.VOD
};

player.load(playerSource).then(function() {
  console.log('Success loading Bitmovin Player source');
}).catch(function(reason) {
  console.error('Loading Bitmovin Player Source Failed:', reason);
});

If the player is not needed any more, don't forget to destroy it:

player.destroy();

Configuration Options

A configuration object can be passed as additional, optional parameter to the MoatAnalytics constructor.

new bitmovin.player.analytics.MoatAnalytics(player, 'MOAT_CUSTOMER_KEY', configuration);

Available properties for the configuration:

{
  /**
   * Option to provide a callback function for parsing the string from the VAST AdExtension into
   * a MoatParam object or into MoatIds.
   */
  parseMoatStringsToObjects?: (moatStrings: string[]) => MoatIdsOrParam[];
}

Published

Vulnerabilities

Links

Maintainers

Keywords