IMA डीएआई SDK टूल का इस्तेमाल शुरू करना

IMA SDK टूल की मदद से, अपनी वेबसाइटों और ऐप्लिकेशन में आसानी से मल्टीमीडिया विज्ञापन इंटिग्रेट किए जा सकते हैं. IMA SDK टूल, वीएएसटी (वीडियो विज्ञापन देने के लिए टेंप्लेट) का पालन करने वाले किसी भी विज्ञापन सर्वर से विज्ञापनों का अनुरोध कर सकते हैं. साथ ही, आपके ऐप्लिकेशन में विज्ञापन चलाने की सुविधा को मैनेज कर सकते हैं. IMA डीएआई SDK की मदद से, ऐप्लिकेशन विज्ञापन और कॉन्टेंट वीडियो के लिए स्ट्रीम का अनुरोध करते हैं. यह वीओडी या लाइव कॉन्टेंट हो सकता है. इसके बाद, SDK टूल एक साथ कई वीडियो स्ट्रीम दिखाता है, ताकि आपको अपने ऐप्लिकेशन में विज्ञापन और कॉन्टेंट वीडियो के बीच स्विच करने की ज़रूरत न पड़े.

डीआई (डायनामिक विज्ञापन) का वह समाधान चुनें जिसमें आपकी दिलचस्पी है

पूरी सेवा वाला डीएआई

इस गाइड में, IMA डीएआई SDK टूल को किसी सामान्य वीडियो प्लेयर ऐप्लिकेशन में इंटिग्रेट करने का तरीका बताया गया है. अगर आपको इंटिग्रेशन का पूरा सैंपल देखना है या उसका पालन करना है, तो GitHub से सामान्य उदाहरण डाउनलोड करें.

IMA डीएआई की खास जानकारी

IMA DAI SDK टूल को लागू करने के लिए, दो मुख्य कॉम्पोनेंट ज़रूरी होते हैं. इनके बारे में इस गाइड में बताया गया है:

  • StreamRequest— VODStreamRequest या LiveStreamRequest: ऐसा ऑब्जेक्ट जो स्ट्रीम के अनुरोध के बारे में बताता है. स्ट्रीम के अनुरोध, वीडियो ऑन डिमांड या लाइव स्ट्रीम के लिए किए जा सकते हैं. अनुरोधों में कॉन्टेंट आईडी के साथ-साथ, एपीआई पासकोड या पुष्टि करने वाला टोकन और अन्य पैरामीटर भी शामिल होते हैं.
  • StreamManager: यह एक ऐसा ऑब्जेक्ट है जो डाइनैमिक ऐड इंसर्शन स्ट्रीम और डीआई बैकएंड के साथ इंटरैक्शन को मैनेज करता है. स्ट्रीम मैनेजर, ट्रैकिंग पिंग को भी मैनेज करता है. साथ ही, स्ट्रीम और विज्ञापन इवेंट को पब्लिशर को फ़ॉरवर्ड करता है.

ज़रूरी शर्तें

  • तीन खाली फ़ाइलें
    • dai.html
    • dai.css
    • dai.js
  • आपके कंप्यूटर पर Python इंस्टॉल होना चाहिए या टेस्टिंग के लिए इस्तेमाल किया जाने वाला वेब सर्वर होना चाहिए

डेवलपमेंट सर्वर शुरू करना

IMA DAI SDK, उसी प्रोटोकॉल का इस्तेमाल करके डिपेंडेंसी लोड करता है जिसका इस्तेमाल करके उसे लोड किया गया है. इसलिए, अपने ऐप्लिकेशन की जांच करने के लिए, आपको वेब सर्वर का इस्तेमाल करना होगा. लोकल डेवलपमेंट सर्वर को तुरंत शुरू करने के लिए, Python के पहले से मौजूद सर्वर का इस्तेमाल करें.

  1. कमांड लाइन का इस्तेमाल करके, उस डायरेक्ट्री में जाएं जिसमें आपकी index.html फ़ाइल है और यह कमांड चलाएं:

    python -m http.server 8000

  2. किसी वेब ब्राउज़र में, http://localhost:8000/ पर जाएं

    Apache एचटीटीपी सर्वर जैसे किसी भी दूसरे वेब सर्वर का इस्तेमाल भी किया जा सकता है.

आसान वीडियो प्लेयर बनाना

सबसे पहले, dai.html में बदलाव करके, क्लिक मिलने पर खुलने वाले पेज के लिए एक आसान एचटीएमएल5 वीडियो एलिमेंट और एक डायव बनाएं. dai.css और dai.js फ़ाइलों को लोड करने के साथ-साथ, hls.js वीडियो प्लेयर को इंपोर्ट करने के लिए भी ज़रूरी टैग जोड़ें. इसके बाद, पेज के एलिमेंट के साइज़ और पोज़िशन की जानकारी देने के लिए, dai.css में बदलाव करें. आखिर में, dai.js में, स्ट्रीम के अनुरोध की जानकारी को सेव करने के लिए वैरिएबल तय करें. साथ ही, पेज लोड होने पर चलने के लिए initPlayer() फ़ंक्शन तय करें.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2548831";
var TEST_VIDEO_ID = "tears-of-steel";

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

IMA डीएआई SDK टूल लोड करना

इसके बाद, dai.html में स्क्रिप्ट टैग का इस्तेमाल करके IMA फ़्रेमवर्क जोड़ें. यह टैग, dai.js के टैग से पहले होना चाहिए.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager को शुरू करना और स्ट्रीम का अनुरोध करना

विज्ञापनों के किसी सेट का अनुरोध करने के लिए, ima.dai.api.StreamManager बनाएं. यह डीएआई स्ट्रीम का अनुरोध करने और उन्हें मैनेज करने के लिए ज़िम्मेदार होता है. कंस्ट्रक्टर में एक वीडियो एलिमेंट होता है और इससे मिलने वाले इंस्टेंस में विज्ञापन पर होने वाले क्लिक मैनेज करने के लिए, विज्ञापन यूज़र इंटरफ़ेस (यूआई) एलिमेंट होता है.

इसके बाद, स्ट्रीम का अनुरोध करने वाले फ़ंक्शन तय करें. इस उदाहरण में, वीओडी और लाइव स्ट्रीम, दोनों के लिए फ़ंक्शन शामिल हैं. ये फ़ंक्शन, क्रमशः VODStreamRequest और LiveStreamRequest के इंस्टेंस बनाते हैं. इसके बाद, streamRequest पैरामीटर के साथ streamManager.requestStream() को कॉल करते हैं. लाइव स्ट्रीम के लिए, आपको समय के हिसाब से मेटाडेटा इवेंट सुनने और इवेंट को StreamManager पर फ़ॉरवर्ड करने के लिए, एक हैंडलर भी जोड़ना होगा. अपने इस्तेमाल के उदाहरण के हिसाब से, कोड पर टिप्पणी की जा सकती है या उससे टिप्पणी हटाई जा सकती है. दोनों तरीकों में, एपीआई पासकोड का इस्तेमाल करना ज़रूरी नहीं है. अगर सुरक्षित स्ट्रीम का इस्तेमाल किया जा रहा है, तो आपको डीएआई पुष्टि करने की कुंजी बनानी होगी.

इस उदाहरण में, कोई भी स्ट्रीम सुरक्षित नहीं है. इसलिए, apiKey का इस्तेमाल नहीं किया गया है.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

स्ट्रीम इवेंट मैनेज करना

आखिर में, आपको वीडियो के मुख्य इवेंट के लिए इवेंट लिसनर लागू करने होंगे. यह आसान उदाहरण, onStreamEvent() फ़ंक्शन को कॉल करके LOADED, ERROR, AD_BREAK_STARTED, और AD_BREAK_ENDED इवेंट को मैनेज करता है. यह फ़ंक्शन, स्ट्रीम लोड होने और गड़बड़ियों को मैनेज करता है. साथ ही, विज्ञापन चलने के दौरान प्लेयर कंट्रोल को बंद करता है. यह SDK टूल के लिए ज़रूरी है. स्ट्रीम लोड होने के बाद, वीडियो प्लेयर किसी loadUrl() फ़ंक्शन का इस्तेमाल करके, दिए गए यूआरएल को लोड करता है और चलाता है.

आपके पास वीडियो एलिमेंट के pause और start इवेंट के लिए इवेंट लिसनर सेट अप करने का विकल्प भी है. इससे, विज्ञापन के दौरान IMA के रुकने पर, उपयोगकर्ता को वीडियो चलाना फिर से शुरू करने की अनुमति मिलती है.

डीआई के साथ काम करने के लिए, आपके कस्टम प्लेयर को लाइव स्ट्रीम के लिए आईडी3 इवेंट को IMA डीआई SDK टूल में पास करना होगा, जैसा कि सैंपल कोड में दिखाया गया है.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

हो गया! अब आपके ऐप्लिकेशन में IMA DAI SDK का इस्तेमाल करके, विज्ञापनों का अनुरोध किया जा रहा है और उन्हें दिखाया जा रहा है. SDK टूल की बेहतर सुविधाओं के बारे में जानने के लिए, अन्य गाइड या GitHub पर सैंपल देखें.