Integrating IMA3 CSAI 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
-
Import the Player (with UI) class from the Brightcove SDK.
import { Player } from '@brightcove/web-sdk';
-
Import the ImaClientSide integration class from the Brightcove SDK.
import { ImaClientSideIntegration } from '@brightcove/web-sdk/integrations/imaClientSide';
-
Import the ImaClientSide integration CSS from the Brightcove SDK.
import '@brightcove/web-sdk/integrations/imaClientSide/styles.css';
-
Setup ima-client-side integration.
Player.addImaClientSideIntegrationFactory(ImaClientSideIntegration);
-
Create and Configure the 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 and configure the ad integration using your specific ad tag URL provided by Google Ad Manager.
player.one(Player.Event.Integration.ImaClientSide.SdkLoaded, ({ imaClientSideSdk }) => { const adTag = 'your-ad-tag-url'; player.integrations.imaClientSide.adRequest(adTag); });
Complete snippet:
// Import the Player (with UI) class from the Brightcove SDK
import {Player} from '@brightcove/web-sdk';
// Import the ImaClientSide integration class from the Brightcove SDK
import { ImaClientSideIntegration } from '@brightcove/web-sdk/integrations/imaClientSide';
// Import the ImaClientSide integration CSS from the Brightcove SDK
import '@brightcove/web-sdk/integrations/imaClientSide/styles.css';
// Setup ima-client-side integration before creating player
Player.addImaClientSideIntegrationFactory(ImaClientSideIntegration);
// 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.ImaClientSide.SdkLoaded, ({ imaClientSideSdk }) => {
// Use the IMA integration (for example: creating on-demand ad request)
const adTag = 'your-ad-tag';
player.integrations.imaClientSide.adRequest(adTag);
});