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/, typenpm 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 inindex.html.For the Yospace example, add
yospace.htmlto the URL in your browser. Please make sure to addyo-ad-management.min.jsandbitmovinplayer-yospace.jsto the directory first. Please also replace the placeholders with your Yospace stream URLs inyospace.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_KEYwith 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_KEYwith 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[];
}