Multimedia tracking

Implementation Guides Multimedia
1

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 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:
Unlike Reading time, reproduction time is tracked although the user is inactive or the browser tab is in the background.
Note:
The multimedia module is a paid add-on. Contact your account manager for pricing information.

Predefined providers

Compass has some native integrations for some of the most used multimedia providers. In order to load these providers you can:

  1. Use a no code integration via a tag experience
  2. Add the providers property in the multimedia config with the list of providers you want to integrate:
<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, /*accountId*/,{ multimedia: { 
   providers: ['youtube', 'dailymotion']
}} );
</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.

Kaltura

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

STN (Send to News Video)

To listen to this provider add stn 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"...>)

Iframe

Websites that utilize the Marfeel SDK can also include it within an iframe to track all multimedia content while retaining all the information from outside the iframe, including user data, session details, and referrer information.

Note:
To prevent view duplication, ensure that the siteid is identical for both the web and iframe content.
Note:
Please ensure that your iframe is hosted on the same domain to avoid any issues with the iframe's same-origin policy.

Custom provider

To initialize a new video

window.marfeel.cmd.push(['multimedia', function(multimedia) {
	multimedia.initializeItem('ID', 'PROVIDER_NAME' ,'MEDIA_UID', '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, if there's no duration set as -1
	}, 
    HTML_ELEMENT);
}]);
  1. ID: a unique id that that uniquely identifies the video player instance in the page.
  2. PROVIDER_NAME: the name of the video provider. It’s an string that can identify the type, something like: youtube, dailymotion, etc…
  3. MEDIA_UID: identifier of the content being played. It’s usualy and uuid or id coming from the media player instance.
  4. HTML_ELEMENT: Optional. DOM element of the player. If passed it will be used for measuring if the player is or is not in the viewport. Useful for engagement time calculations.

To track a new event

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

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

Notes

  • The id of the registerEvent should be the same as one of already initalized with the initalizeItem method.

  • It’s recomended to implement some kind of logic in order to send the updateCurrentTime every 5 seconds when playing. It could easily be done with a setInterval created on play event and destroyed on end or pause.