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.

VideoJS

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

Kaltura

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

Spreaker

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

Brightcove

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

Mediastream

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

Connatix

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

Clappr

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

Voltax

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

Fuel

To listen to this provider add fuel 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 identifier for the video player instance on the page. This can be the DOM element’s id or any other value that uniquely identifies the player, especially when multiple players are present.
  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. A reference to the DOM element of the player. If provided, this will be used to determine whether the player is currently within the viewport—an important factor for accurately measuring engagement time. Example usage: var videoElement = document.getElementById('element-id');

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.