हमारे प्रॉडक्ट के बारे में चर्चा करने और सुझाव/राय देने के लिए, Google विज्ञापन और मेज़रमेंट कम्यूनिटी सर्वर में Ad Manager के आधिकारिक Discord चैनल से जुड़ें.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Ads मैनेजर क्लास बनाना

ads_manager.js में, IMA SDK StreamManager के लिए एक रैपर क्लास तय करें. यह क्लास, स्ट्रीम के अनुरोध करती है, विज्ञापन पॉड मेनिफ़ेस्ट को हासिल करती है, IMA स्ट्रीम इवेंट को सुनती है, और IMA SDK को emsg इवेंट पास करती है.

ads_manager.js में, IMA HbbTV का सैंपल ऐप्लिकेशन इन तरीकों को सेट अप करता है:

requestStream()
onStreamEvent()
onEmsgEvent()
loadAdPodManifest()

विज्ञापन मैनेजर को शुरू करना

विज्ञापन मैनेजर क्लास को शुरू करें और IMA स्ट्रीम इवेंट के लिए लिसनर सेट करें. इस कॉल में, VideoPlayer.setEmsgEventHandler() तरीके से emsg इवेंट हैंडलर सेट करें.

/**
 * Wraps IMA SDK ad stream manager.
 * @param {!VideoPlayer} videoPlayer Reference an instance of the wrapper from
 * video_player.js.
 */
var AdManager = function(videoPlayer) {
  this.streamData = null;
  this.videoPlayer = videoPlayer;
  // Ad UI is not supported for HBBTV, so no 'adUiElement' is passed in the
  // StreamManager constructor.
  this.streamManager = new google.ima.dai.api.StreamManager(
      this.videoPlayer.videoElement);
  this.streamManager.addEventListener(
      [
        google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED,
        google.ima.dai.api.StreamEvent.Type.ERROR,
        google.ima.dai.api.StreamEvent.Type.CLICK,
        google.ima.dai.api.StreamEvent.Type.STARTED,
        google.ima.dai.api.StreamEvent.Type.FIRST_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.MIDPOINT,
        google.ima.dai.api.StreamEvent.Type.THIRD_QUARTILE,
        google.ima.dai.api.StreamEvent.Type.COMPLETE,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
        google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED,
        google.ima.dai.api.StreamEvent.Type.AD_PROGRESS,
        google.ima.dai.api.StreamEvent.Type.PAUSED,
        google.ima.dai.api.StreamEvent.Type.RESUMED
      ],
      this.onStreamEvent.bind(this),
      false);

  this.videoPlayer.setEmsgEventHandler(this.onEmsgEvent, this);
};ads_manager.js

विज्ञापनों के पॉड स्ट्रीम का अनुरोध करना

अपने Google Ad Manager नेटवर्क कोड और स्ट्रीम की कस्टम ऐसेट कुंजी का इस्तेमाल करके, AdManager.requestStream() ऑब्जेक्ट बनाने के लिए, AdManager.requestStream() तरीका बनाएं.PodStreamRequest IMA के सैंपल DASH पॉड की मदद से, अपने HbbTV ऐप्लिकेशन की जांच करें. इसके लिए, स्ट्रीम के इन पैरामीटर का इस्तेमाल करें:

नेटवर्क कोड: '21775744923'
कस्टम ऐसेट का मुख्य हिस्सा: 'hbbtv-dash'

/**
 * Makes a pod stream request.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 */
AdManager.prototype.requestStream = function (networkCode, customAssetKey) {
  var streamRequest = new google.ima.dai.api.PodStreamRequest();
  var secretKey = getStreamSecretKeys();

  streamRequest.networkCode = networkCode;
  streamRequest.customAssetKey = customAssetKey;
  streamRequest.format = 'dash';

  if (secretKey.STREAM_CREATE_SECRET) {
    var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;
    var params = {
      custom_asset_key: customAssetKey,
      exp: expirationTime,
      network_code: networkCode
    };
    streamRequest.authToken =
        this.generateAuthToken(params, secretKey.STREAM_CREATE_SECRET);
    debugView.log('AdsManager: make Auth-PodStreamRequest');
  } else {
    debugView.log('AdsManager: make PodStreamRequest without auth');
  }

  this.streamManager.requestStream(streamRequest);
};ads_manager.js

विज्ञापन स्ट्रीम के इवेंट सुनने की अनुमति

अपने ऐप्लिकेशन के रिस्पॉन्स को IMA स्ट्रीम इवेंट, STREAM_INITIALIZED, AD_BREAK_STARTED, और AD_BREAK_ENDED को हैंडल करने के लिए, AdManager.onStreamEvent() तरीका बनाएं.

/**
 * Handles IMA playback events.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onStreamEvent = function(event) {
  switch (event.type) {
    // Once the stream response data is received, generate pod manifest url
    // for the video stream.
    case google.ima.dai.api.StreamEvent.Type.STREAM_INITIALIZED:
      debugView.log('IMA SDK: stream initialized');
      this.streamData = event.getStreamData();
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      break;
    // Hide video controls while ad is playing.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      debugView.log('IMA SDK: ad break started');
      this.adPlaying = true;
      this.adBreakStarted = true;
      break;
    // Show video controls when ad ends.
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      debugView.log('IMA SDK: ad break ended');
      this.adPlaying = false;
      this.adBreakStarted = false;
      break;
    // Update ad countdown timers.
    case google.ima.dai.api.StreamEvent.Type.AD_PROGRESS:
      break;
    default:
      debugView.log('IMA SDK: ' + event.type);
      break;
  }
};ads_manager.js

विज्ञापन स्ट्रीम के मेटाडेटा को मैनेज करना

emsg इवेंट की जानकारी को IMA पर भेजने के लिए, AdManager.onEmsgEvent() तरीके का इस्तेमाल करके StreamManager.processMetadata() तरीका बनाएं. वीडियो प्लेयर क्लास, VideoPlayer.setEmsgEventHandler() तरीके के साथ इस तरीके को कॉल करती है.

/**
 * Callback on Emsg event.
 * Instructs IMA SDK to fire back VAST events accordingly.
 * @param {!Event} event The event object.
 */
AdManager.prototype.onEmsgEvent = function(event) {
  var data = event.event.messageData;
  var pts = event.event.calculatedPresentationTime;
  if ((data instanceof Uint8Array) && data.byteLength > 0) {
    this.streamManager.processMetadata('ID3', data, pts);
  }
};ads_manager.js

विज्ञापनों के पॉड का मेनिफ़ेस्ट लोड करें

वीडियो प्लेयर के साथ विज्ञापनों का पॉड मेनिफ़ेस्ट को पहले से लोड करने के लिए, AdManager.loadAdPodManifest() तरीका बनाएं. तरीका: DASH पॉड मेनिफ़ेस्ट में दिए गए स्ट्रक्चर का इस्तेमाल करके, पुष्टि किया गया मेनिफ़ेस्ट यूआरएल बनाएं.

/**
 * Creates DAI pod url and instructs video player to load manifest.
 * @param {string} networkCode The network code.
 * @param {string} customAssetKey The custom asset key.
 * @param {number} podDuration The duration of the ad pod.
 */
AdManager.prototype.loadAdPodManifest = function (networkCode, customAssetKey, podDuration) {
  if (!this.streamData) {
    debugView.log('AdsManager: No stream data available.');
    return;
  }

  var adBreakId = this.getAdBreakId();
  var expirationTime = Math.trunc(new Date().getTime() / 1000) + 3600;

  var params = {
    ad_break_id: adBreakId,
    custom_asset_key: customAssetKey,
    exp: expirationTime,
    network_code: networkCode,
    pd: podDuration
  };

  var secretKey = getStreamSecretKeys();
  var token = this.generateAuthToken(params, secretKey.MANIFEST_SECRET);
  var encodedToken = encodeURIComponent(token);

  var manifestUrl = 'https://dai.google.com/linear/pods/v1/dash/network/' +
    networkCode + '/custom_asset/' + customAssetKey + '/stream/' +
    this.streamData.streamId + '/ad_break_id/' + adBreakId +
    '/manifest.mpd?pd=' + podDuration + '&auth-token=' + encodedToken;

  this.videoPlayer.preload(manifestUrl);
};ads_manager.js

HbbTV सैंपल ऐप्लिकेशन, किसी भी क्रम में जनरेट की गई यूनीक adBreakId वैल्यू का इस्तेमाल करता है. प्रोडक्शन ऐप्लिकेशन में, adBreakId वैल्यू एक अल्फ़ान्यूमेरिक स्ट्रिंग होती है. उदाहरण के लिए, ab-001. यह हर विज्ञापन ब्रेक के लिए एक से बढ़ती है. पुष्टि करें कि विज्ञापन ब्रेक के सभी दर्शकों के लिए adBreakId की वैल्यू एक जैसी हो. adBreakId वैल्यू पाने के लिए, हमारा सुझाव है कि DAI Ad Break API का इस्तेमाल करें. प्रोडक्शन एनवायरमेंट में, HbbTV स्ट्रीम इवेंट AD_BREAK_ANNOUNCE में adBreakId value और podDuration value शामिल करें.

इसके बाद, अपने HbbTV ऐप्लिकेशन के लिए मुख्य ऐप्लिकेशन क्लास बनाएं. यह क्लास, HbbTV ब्रॉडकास्ट के साथ इंटरैक्ट करती है.

पीछे जाएं

प्लेयर क्लास सेट अप करना

आगे बढ़ें

ऐप्लिकेशन क्लास बनाएं