Enable linear display ads

Same origin

If IMA SDK shares the same origin as your content player, do either of the following:

• Preferred Pass the video player into the AdsManagerLoadedEvent.getAdsManager() call. Even though getAdsManager() lets you pass an object containing a currentTime property, you must pass an HTMLVideoElement instance into getAdsManager() to support content detection.

  function onAdsManagerLoaded(adsManagerLoadedEvent) {
    // Set any AdsRenderingSettings here.
    const adsRenderingSettings = new google.ima.AdsRenderingSettings();
  
    // Get the ads manager.
    adsManager =
      adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
  }
  

• If you are unable to provide the content player during the AdsManagerLoadedEvent.getAdsManager() call, call the AdsManager.configureAdsManager() method with the video player. For content detection to work, it must be an HTMLVideoElement.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

If you don't set up content detection, Google ad servers might stop serving linear display ads.

If your content player is in the same origin you load the IMA SDK, you don't need any changes to your IMA implementation to handle changing the content player or stopping content signal collection.

Cross origin

If IMA SDK is cross origin to your content player, IMA can collect content detection signals through the CrossOriginProxy class. This class lets IMA SDK verify correct linear display ad placement and collect signals related to subject matter of the video content. If you place the IMA SDK in a cross-domain iframe, you must implement the CrossOriginProxy class.

If you continue to have your content player placed cross origin to the IMA SDK without implementing the CrossOriginProxy class, Google ad servers might stop serving linear display ads.

To load the CrossOriginProxy class into your app, do the following:

1. In your HTML file, import the ima_proxy.js file:

   <html>
     <head>
       <title>IMA HTML5 cross-origin iframe sample</title>
       <link rel="stylesheet" href="style.css">
     </head>
   
     <body>
       <div id="mainContainer">
         <div id="content">
           <video id="contentElement">
             <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
           </video>
         </div>
   
         <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
         <iframe id="adContainerIframe"
                 src="https://cross-origin-domain.com/ads-sandbox.html" >
         </iframe>
   
       </div>
       <button id="playButton">Play</button>
   
       <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
       <script src="main.js"></script>
     </body>
   </html>
   

2. In the main.js file, get the CrossOriginProxy instance.

3. Call the setVideoElements() method with an array of all video players that show ads on your page or app.

Before making an ad request, you must pass the video elements to the CrossOriginProxy instance with the setVideoElements() call. The following example passes an array containing a single content video player:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

Change the content video player

If you change to or add another content video player, you must pass a new array to the setVideoElements() method. When you make the new setVideoElements() call, IMA starts collecting signals for the new content player, and stops collecting signals for any content players passed in previous calls.

The following example passes the new video element to the CrossOriginProxy class:

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Stop collecting signals when ads are complete

When you finish playing ads and call the AdsLoader.destroy() method, you must also call the setVideoElements() method with an empty array. Making the setVideoElements() call with an empty array drops the reference to content players IMA holds and prevents memory leak issues.