Multimedia Tracking: Marfeel SDK Setup and Providers

Compass tracks multimedia events including load, play, pause, mute, unmute, fullscreen, back from fullscreen, and start ad. To enable tracking, add the multimedia property to the SDK 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 provides native integrations for widely used multimedia providers. To load a predefined provider 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

To track YouTube videos, the YouTube IFrame API must be used to load the video:

1. Have the following script in the page:

<script src="https://www.youtube.com/iframe_api"></script>

2. 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 ?enablejsapi=1 at the end of the URL (e.g <iframe src="//www.youtube.com/embed/7VPS0kfmOgk?enablejsapi=1"...>)

Iframe

Websites that use the Marfeel SDK can also include it within an iframe to track all multimedia content while retaining all 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

Use the custom provider API to track multimedia events from players that are not covered by the predefined integrations. 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 a string that identifies the type, such as: youtube, dailymotion, etc.
3. MEDIA_UID: identifier of the content being played. This is usually a UUID or ID from the media player instance.
4. HTML_ELEMENT: Optional. A reference to the DOM element of the player. If provided, this determines 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 in registerEvent must match one already initialized with the initializeItem method.

• Send the updateCurrentTime event every 5 seconds during playback. A practical approach is to create a setInterval on the play event and clear it on end or pause.