Companion banner ads

TVSDK supports companion banner ads, which are ads that accompany a linear ad and often remain on the page after the linear ad ends. Your application is responsible for displaying the companion banners that are provided with a linear ad.

When displaying companion ads, follow these recommendations:

• Attempt to present as many of a video ad’s companion banner ads as will fit in your player’s layout.

• Present a companion banner only if you have a location that exactly matches its specified height and width.

  TIP

  Do not resize the banner.

• Present the companion banner(s) as soon as possible after the ad begins.

• Do not overlay the main ad/video container with companion banners.

• Continue to display companion banners after the ad ends.

  The standard is to display each companion banner until you have a replacement for this banner.

Companion banner data

The content of an AdBannerAsset describes a companion banner.

The AdPlaybackEvent.AD_STARTED event returns an Ad instance that contains a companionAssets property ( Vector.<AdAsset>).
Each AdAsset provides information about displaying the asset.

Display banner ads

To display banner ads, you need to create banner instances and allow TVSDK to listen for ad-related events.

TVSDK provides a list of companion banner ads that are associated with a linear ad through the AdPlaybackEvent.AD_STARTED event event.

Manifests can specify companion banner ads by:

• An HTML snippet
• The URL of an iFrame page
• The URL of a static image or an Adobe Flash SWF file

For each companion ad, TVSDK indicates which types are available for your application.

Add a listener for the AdPlaybackEvent.AD_STARTED event that does the following:

1. Clears existing ads in the banner instance.

2. Gets the list of companion ads from Ad.companionAssets.

3. If the list of companion ads is not empty, iterate over the list for banner instances.

   Each banner instance ( an AdBannerAsset) contains information, such as width, height, resource type (html, iframe, or static), and data that is required to display the companion banner.

4. If a video ad has no companion ads booked with it, the list of companion assets contains no data for that video ad.

   To show a standalone display ad, add the logic to your script to run a normal DFP (DoubleClick for Publishers) display ad tag in the appropriate banner instance.

5. Sends the banner information to a function on your page ,usually JavaScript, by using ExternalInterface, that displays the banners in an appropriate location.

   This is usually a div, and your function uses the div ID to display the banner. For example:

   Add the event listener:

   _player.addEventListener(AdobePSDK.PSDKEventType.AD_STARTED, onAdStarted);
   

   Implement the listener handler:

   private function onAdStarted(event:AdPlaybackEvent):void {
       // check if there are any companion banner
       if (event.ad && event.ad.companionAssets
                    && event.ad.companionAssets.length > 0) {
           for each (var banner:AdBannerAsset in event.ad.companionAssets) {
               if (ExternalInterface.available) {
                   //-- call the java script that will handle the banner display.
                   ExternalInterface.call('addBanner', banner.resourceType,
                       banner.width, banner.height, banner.bannerData);
               }
           }
       }
       //...
   }
   

   Example of JavaScript to handle the display:

   function addBanner(resourceType, width, height, data) {
       console.log(resourceType + "," +  width + "," +  height);
   
   //Assume an html element on the page with id like 'banner300x250'
       var bannerDiv = document.getElementById('banner' + width +
           'x' + height);
       if (bannerDiv != null) {
           if (resourceType == "html") { // for html resource
               bannerDiv.innerHTML = data;
           }
           else if (resourceType == "iframe") { // for iframe resource
               bannerDiv.innerHTML = "<iframe src='" + data +
                   "' width='100%' height='100%'></iframe>";
           }
       }
   }
   

Business.Adobe.com resources