Radiant Media Player

Companion ads (IMA SDK)



Scope of support for companion ads

While displaying a video ad within Radiant Media Player some ad-service provider can offer the possibility to display companion ads. Those companion ads help to give context to a video ad and can increase viewer engagement.

Radiant Media Player provides two ways to include companions ads on a web page when a VAST response include valid companions ads data:

  • Using Google Publisher Tag
  • Using the player Ads API

This documentation page applies when using the Google IMA SDK with Radiant Media Player. We currently do not support companion ads with rmp-vast.


Using Google Publisher Tag

Google Publisher Tag automates the displaying of HTML companion ads on your site.

For HTML5 video ads please refer to this Google article .


Using the player Ads API

When the player fires the adstarted event through our ads API you can query the getCompanionAds method to obtain companion ads data and display them on your page.

rmp.getCompanionAds(companionAdSlotWidth, companionAdSlotHeight, companionAdsOptions);

This method returns an Array containing companion ads data. If no companion ad is available null is returned. Parameters companionAdSlotWidth and companionAdSlotHeight are required and must be expressed in pixels. companionAdsOptions is an optional Object representing filtering options for the companion ad to be returned. For complete documentation on companionAdsOptions see this Google documentation page.

This method must only be queried after the adstarted event has fired.

Let us run through an example to better understand how this works:

<script src="https://cdn.radiantmediatechs.com/rmp/4.5.15/js/rmp.min.js" 
  integrity="sha384-UOGahVOpoWqVqcgcNFKFOEWH3RV2PoLAq2jmk8g1u9VR/bL8dqsHAsDGwFHPkmuE"
  crossorigin="anonymous"></script>
<div id="rmpPlayer"></div>
<br><br>
<!-- here is where the companion ad will be displayed -->
<div id="companion-ad-300-250" style="width: 300px; height: 250px;"></div>
<script>
var bitrates = {
  hls: 'https://dqwp3xzzbfhtw.cloudfront.net/vod/smil:bbb.smil/playlist.m3u8'
};
var settings = {
  licenseKey: 'your-license-key',
  bitrates: bitrates,
  delayToFade: 3000,
  width: 640,
  height: 360,
  poster: 'https://www.radiantmediaplayer.com/images/poster-rmp-showcase.jpg',
  ads: true,
  adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator='
};
var elementID = 'rmpPlayer';
var rmp = new RadiantMP(elementID);
var rmpContainer = document.getElementById(elementID);
// we wait for the adstarted event
rmpContainer.addEventListener('adstarted', function() {
  // we get our companion ads
  // the following settings are optional
  /*var companionAdsOptions = new google.ima.CompanionAdSelectionSettings();
  companionAdsOptions.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
  companionAdsOptions.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
  companionAdsOptions.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_NEAR_MATCH;*/
  var companionAds = rmp.getCompanionAds(300, 250);
  // or var companionAds = rmp.getCompanionAds(300, 250, companionAdsOptions);
  // if any companion ad we display them
  if (companionAds !== null) {
    var companionAd = companionAds[0]
    // Get HTML content from the companion ad
    var companionAdContent = companionAd.getContent();
    // Write the content to the companion ad slot
    var companionAdDiv = document.getElementById('companion-ad-300-250');
    companionAdDiv.innerHTML = companionAdContent;
  } 
});
rmp.init(settings);
</script>

Let us see this example at work now:



Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License.