Integrating IMA3 SSAI Advertising with Brightcove Web & Smart TV SDK

Overview

Google's Interactive Media Ads (IMA) SDK allows for the easy integration of video advertising into your media players built with the Brightcove Web & Smart TV SDK. The IMA3 integration facilitates pre-roll, mid-roll, and post-roll ad placements, as well as sophisticated ad management capabilities.

Prerequisites

• A Brightcove account with access to the Video Cloud.

• The Brightcove Web & Smart TV SDK installed in your project.

• Access to the Google IMA SDK resources and an Ad Manager account.

Integration

1. Import the Player (with UI) class from the Brightcove SDK.

   import { Player } from '@brightcove/web-sdk';
               

2. Import the ImaServerSide integration class from the Brightcove SDK.

   import { ImaServerSideIntegration } from '@brightcove/web-sdk/integrations/imaServerSide';
               

3. Import the ImaServerSide integration CSS from the Brightcove SDK.

   import '@brightcove/web-sdk/integrations/imaServerSide/styles.css';
               

4. Setup ima-client-side integration.

   Player.addImaServerSideIntegrationFactory(ImaServerSideIntegration);
               

5. Create and Configure the Player.

   const player = new Player();
   
   player.updateConfiguration({
     brightcove: {
       accountId: 'your-account-id',
       auth: { policyKey: 'your-policy-key' }
     }
   });
               

6. Attach a video element to the Player instance.

   const videoElement = document.querySelector('video');
   
   player.attach(videoElement);
               

7. Listen to the SdkLoaded event and configure the ad integration using your specific ad tag URL provided by Google Ad Manager.

   player.one(Player.Event.Integration.ImaServerSide.SdkLoaded, ({ imaServerSideSdk }) => {
     const adTag = 'your-ad-tag-url';
     player.integrations.imaServerSide.adRequest(adTag);
   });
               

Complete snippet:

// Import the Player (with UI) class from the Brightcove SDK
import {Player} from '@brightcove/web-sdk';

// Import the ImaServerSide integration class from the Brightcove SDK
import { ImaServerSideIntegration } from '@brightcove/web-sdk/integrations/ImaServerSide';

// Import the ImaServerSide integration CSS from the Brightcove SDK
import '@brightcove/web-sdk/integrations/ImaServerSide/styles.css';

// Setup ima-client-side integration before creating player
Player.addImaServerSideIntegrationFactory(ImaServerSideIntegration);

// Create a new Player
const player = new Player();

player.updateConfiguration({
  brightcove: {
    accountId: 'your-account-id',
    auth: { policyKey: 'your-policy-key' }
  }
});

// Attach a video element to the Player instance
const videoElement = document.querySelector('video');

player.attach(videoElement);

// Listen to the SdkLoaded event
player.one(Player.Event.Integration.ImaServerSide.SdkLoaded, ({ ImaServerSideSdk }) => {
  // Use the IMA integration (for example: creating on-demand ad request)
  const adTag = 'your-ad-tag';
  player.integrations.ImaServerSide.adRequest(adTag);
});