Multimedia tracking

Compass can track multimedia events such as load, play, pause, mute, unmute, fullscreen, back from fullscreen and start ad.

In order to load the multimedia modules just add the multimedia property to the configuration when loading compass:

<script type="text/javascript">
function e(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],c=document.createElement("script");c.src=e,t?c.type="module":(c.async=!0,c.type="text/javascript",c.setAttribute("nomodule",""));var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(c,n)}function t(t,c,n){var a,o,r;null!==(a=t.marfeel)&&void 0!==a||(t.marfeel={}),null!==(o=(r=t.marfeel).cmd)&&void 0!==o||(r.cmd=[]),t.marfeel.config=n,t.marfeel.config.accountId=c;var i="https://sdk.mrf.io/statics";e("".concat(i,"/marfeel-sdk.js?id=").concat(c),!0),e("".concat(i,"/marfeel-sdk.es5.js?id=").concat(c),!1)}!function(e,c){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};t(e,c,n)}(window,0 /*accountId*/,{ multimedia: {}} /*config*/);
</script>

Note that to track & visualize multimedia events you must have it enabled in your account. Contact your account manager for further information.

Predefined providers

Compass has some already predefined provider listener for some of the most used multimedia providers. In order to load this providers you have to add the providers property in the multimedia config with the list of providers you want to listen:

<script type="text/javascript">
function e(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],c=document.createElement("script");c.src=e,t?c.type="module":(c.async=!0,c.type="text/javascript",c.setAttribute("nomodule",""));var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(c,n)}function t(t,c,n){var a,o,r;null!==(a=t.marfeel)&&void 0!==a||(t.marfeel={}),null!==(o=(r=t.marfeel).cmd)&&void 0!==o||(r.cmd=[]),t.marfeel.config=n,t.marfeel.config.accountId=c;var i="https://sdk.mrf.io/statics";e("".concat(i,"/marfeel-sdk.js?id=").concat(c),!0),e("".concat(i,"/marfeel-sdk.es5.js?id=").concat(c),!1)}!function(e,c){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};t(e,c,n)}(window,0 /*accountId*/,{ multimedia: { providers: ['youtube', 'dailymotion']}} /*config*/);
</script>

Dailymotion

To listen to this provider add dailymotion to the list of providers.

JWPlayer

To listen to this provider add jwplayer to the list of providers.

Youtube

In order to listen youtube videos we have to use the Javascript api to load the video:

  1. Have the following script in the page:
<script src="https://www.youtube.com/iframe_api"></script>
  1. Update the embeds so they:
    2.1. Have an id (e.g <iframe id=“yt-video1”…>)
    2.2. Do not use lazy load, that is, using an src attribute instead of data-src
    2.3. Have an ?enablejsapi=1 at the end of the URL (e.g <iframe src="//www.youtube.com/embed/7VPS0kfmOgk?enablejsapi=1"...>)

Custom provider

To initialize a new video:

window.marfeel.cmd.push(['multimedia', function(compass) {
	multimedia.initializeItem('id', 'PROVIDER_NAME' ,'PROVIDER_ID', 'audio | video', {
		isLive: true | false,
		title: 'MY_TITLE',
		description: 'MY_DESCRIPTION',
		url: 'MEDIA_URL',
		thumbnail: 'MEDIA_THUMBNAIL',
		authors: 'AUTHOR1, AUTHOR2',
		publishTime: 12345, // in seconds
		duration: 120 // in seconds
	});
}]);

To track a new event:

Available events: play, pause, end, updateCurrentTime, adPlay, mute, unmute, fullscreen, backscreen

window.marfeel.cmd.push(['multimedia', function(compass) {
	multimedia.registerEvent('id', 'EVENT_NAME' , 1234 /*current video time in seconds*/);
}]);