अपनी प्रोफ़ाइल बनाना शुरू करें

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

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

IMA क्लाइंट-साइड की खास जानकारी

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

  • AdDisplayContainer: एक कंटेनर ऑब्जेक्ट, जहां विज्ञापन दिखाए जाते हैं.
  • AdsLoader: ऐसा ऑब्जेक्ट जो विज्ञापनों का अनुरोध करता है और विज्ञापनों के अनुरोध के रिस्पॉन्स से इवेंट मैनेज करता है. आपको केवल एक विज्ञापन लोड करने की सुविधा को इंस्टैंशिएट करना होगा, जिसे ऐप्लिकेशन के पूरे जीवनकाल के दौरान फिर से इस्तेमाल किया जा सके.
  • AdsRequest: ऐसा ऑब्जेक्ट जो विज्ञापन अनुरोध के बारे में बताता है. विज्ञापनों के अनुरोधों में, VAST (वीडियो विज्ञापन देने के लिए टेम्पलेट) विज्ञापन टैग के यूआरएल के साथ-साथ, विज्ञापन डाइमेंशन जैसे दूसरे पैरामीटर भी शामिल होते हैं.
  • AdsManager: ऐसा ऑब्जेक्ट जिसमें विज्ञापन अनुरोध का जवाब दिया जाता है, विज्ञापन को कंट्रोल किया जाता है, और SDK टूल से सक्रिय किए गए विज्ञापन इवेंट को सुना जाता है.

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

शुरू करने से पहले, आपको इन चीज़ों की ज़रूरत होगी:

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

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

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

  1. उस डायरेक्ट्री से कमांड लाइन का इस्तेमाल करें, जिसमें index.html फ़ाइल चलती है: 
      python -m http.server 8000
    में उपलब्ध है
  2. वेब ब्राउज़र में, http://localhost:8000/ पर जाएं

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

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

सबसे पहले, रैपिंग एलिमेंट में शामिल, HTML5 वीडियो का आसान एलिमेंट बनाने के लिए, index.html में बदलाव करें. साथ ही, उसे चलाने के लिए बटन भी बनाएं. style.css और ads.js फ़ाइलों को लोड करने के लिए भी ज़रूरी टैग जोड़ें. इसके बाद, मोबाइल डिवाइसों के लिए वीडियो प्लेयर को रिस्पॉन्सिव बनाने के लिए, styles.css में बदलाव करें. आखिर में, ads.js में, 'चलाएं' बटन पर क्लिक करने से वीडियो को ट्रिगर करें.

index.html 

<!doctype html>
<html lang="en">
  <head>
    <title>IMA HTML5 Simple Demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div id="page-content">
      <div id="video-container">
        <video id="video-element">
          <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
          <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
        </video>
      </div>
      <button id="play-button">Play</button>
    </div>
    <script src="ads.js"></script>
  </body>
</html>
style.css 
#page-content {
  position: relative;
  /* this element's width controls the effective height */
  /* of the video container's padding-bottom */
  max-width: 640px;
  margin: 10px auto;
}

#video-container {
  position: relative;
  /* forces the container to match a 16x9 aspect ratio */
  /* replace with 75% for a 4:3 aspect ratio, if needed */
  padding-bottom: 56.25%;
}

#video-element {
  /* forces the contents to fill the container */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
ads.js 
var videoElement;

// On window load, attach an event to the play button click
// that triggers playback on the video element
window.addEventListener('load', function(event) {
  videoElement = document.getElementById('video-element');
  var playButton = document.getElementById('play-button');
  playButton.addEventListener('click', function(event) {
    videoElement.play();
  });
});

इस चरण को पूरा करने के बाद, जब ब्राउज़र में index.html खोला जाता है, तो आपको वीडियो एलिमेंट दिख सकता है. साथ ही, 'चलाएं' बटन पर क्लिक करके भी वीडियो को शुरू किया जा सकता है.

3. IMA SDK इंपोर्ट करें

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

index.html 
...

        </video>
      </div>
      <button id="play-button">Play</button>
    </div>
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="ads.js"></script>
  </body>
</html>

4. पेज और वीडियो प्लेयर हैंडलर अटैच करना

JavaScript वाले वीडियो प्लेयर के व्यवहार में बदलाव करने के लिए, ऐसे इवेंट हैंडलर जोड़ें जो नीचे दी गई कार्रवाइयों को ट्रिगर करते हों:

  • जब पेज लोड हो जाए, तो IMA SDK टूल को शुरू करें.
  • वीडियो प्ले बटन पर क्लिक करने से विज्ञापन लोड होंगे, बशर्ते विज्ञापन पहले से लोड न हों.
  • ब्राउज़र विंडो का साइज़ बदलने पर, पेज और मोबाइल डिवाइस के लिए पेज को रिस्पॉन्सिव बनाने के लिए, वीडियो एलिमेंट और adsManager डाइमेंशन को अपडेट करें
ads.js 
var videoElement;
// Define a variable to track whether there are ads loaded and initially set it to false
var adsLoaded = false;

window.addEventListener('load', function(event) {
  videoElement = document.getElementById('video-element');
  initializeIMA();
  videoElement.addEventListener('play', function(event) {
    loadAds(event);
  });
  var playButton = document.getElementById('play-button');
  playButton.addEventListener('click', function(event) {
    videoElement.play();
  });
});

window.addEventListener('resize', function(event) {
  console.log("window resized");
});

function initializeIMA() {
  console.log("initializing IMA");
}

function loadAds(event) {
  // Prevent this function from running on if there are already ads loaded
  if(adsLoaded) {
    return;
  }
  adsLoaded = true;

  // Prevent triggering immediate playback when ads are loading
  event.preventDefault();

  console.log("loading ads");
}

5. विज्ञापन कंटेनर बनाएं

ज़्यादातर ब्राउज़र में, IMA SDK, खास विज्ञापन कंटेनर एलिमेंट का इस्तेमाल, विज्ञापनों और विज्ञापन से जुड़े यूज़र इंटरफ़ेस (यूआई) एलिमेंट को दिखाने के लिए करता है. वीडियो कंटेनर को सबसे ऊपर बाएं कोने से, ओवरले किया जाना चाहिए. इस कंटेनर में विज्ञापनों की ऊंचाई और चौड़ाई, adsManager ऑब्जेक्ट सेट करती है. इसलिए, आपको इन वैल्यू को मैन्युअल तौर पर सेट नहीं करना होगा.

इस विज्ञापन कंटेनर एलिमेंट को लागू करने के लिए, पहले video-container एलिमेंट में एक नया div बनाएं. इसके बाद, एलिमेंट को video-element में सबसे ऊपर बाएं कोने में रखने के लिए, सीएसएस को अपडेट करें. आखिर में, initializeIMA() फ़ंक्शन में मौजूद कंटेनर के लिए एक वैरिएबल तय करें. यह फ़ंक्शन, पेज लोड होने के बाद चलता है.

index.html 
...

  <div id="video-container">
    <video id="video-element" controls>
      <source src="https://storage.googleapis.com/interactive-media-ads/media/android.mp4">
      <source src="https://storage.googleapis.com/interactive-media-ads/media/android.webm">
    </video>
    <div id="ad-container"></div>
  </div>

...
style.css 
...

#ad-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
ads.js 
var videoElement;
var adsLoaded = false;
var adContainer;

...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
}

6. AdsLoader शुरू करें और विज्ञापन अनुरोध करें

विज्ञापनों के सेट का अनुरोध करने के लिए, ima.AdsLoader इंस्टेंस बनाएं. इस उदाहरण में AdDisplayContainer ऑब्जेक्ट को इनपुट के तौर पर लिया जाता है. साथ ही, इसका इस्तेमाल किसी खास विज्ञापन टैग के यूआरएल से जुड़े ima.AdsRequest ऑब्जेक्ट को प्रोसेस करने के लिए भी किया जा सकता है. इस उदाहरण में इस्तेमाल किए गए विज्ञापन टैग में, वीडियो शुरू होने से पहले दिखने वाला 10 सेकंड का विज्ञापन शामिल है. आप आईएमए वीडियो सुइट इंस्पेक्टर का इस्तेमाल करके या किसी भी विज्ञापन टैग के यूआरएल की जांच कर सकते हैं.

सबसे सही तरीका यह है कि किसी पेज की पूरी लाइफ़साइकल के लिए, ima.AdsLoader में से सिर्फ़ एक इंस्टेंस बनाए रखें. ज़्यादा विज्ञापन अनुरोध करने के लिए, एक नया ima.AdsRequest ऑब्जेक्ट बनाएं, लेकिन उसी ima.AdsLoader का दोबारा इस्तेमाल करें. ज़्यादा जानकारी के लिए, IMA SDK के बारे में अक्सर पूछे जाने वाले सवाल देखें.

ads.js 
var videoElement;
var adsLoaded = false;
var adContainer;
var adDisplayContainer;
var adsLoader;

...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'https://pubads.g.doubleclick.net/gampad/ads?' +
      'iu=/21775744923/external/single_ad_samples&sz=640x480&' +
      'cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&' +
      'gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=';

  // Specify the linear and nonlinear slot sizes. This helps the SDK to
  // select the correct creative if multiple are returned.
  adsRequest.linearAdSlotWidth = videoElement.clientWidth;
  adsRequest.linearAdSlotHeight = videoElement.clientHeight;
  adsRequest.nonLinearAdSlotWidth = videoElement.clientWidth;
  adsRequest.nonLinearAdSlotHeight = videoElement.clientHeight / 3;

  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}

7. AdsLoader इवेंट के बारे में सुनें

जब विज्ञापन सफलतापूर्वक लोड होते हैं, तो ima.AdsLoader एक ADS_MANAGER_LOADED इवेंट भेजता है. कॉलबैक को पास किए गए इवेंट को AdsManager ऑब्जेक्ट को शुरू करने के लिए पार्स करें. AdsManager, विज्ञापन टैग के यूआरएल के रिस्पॉन्स के हिसाब से, अलग-अलग विज्ञापन लोड करता है.

इसके अलावा, लोड होने के दौरान होने वाली सभी गड़बड़ियों को ठीक कर लें. अगर विज्ञापन लोड न हो पाएं, तो पक्का करें कि विज्ञापन के बिना मीडिया प्लेबैक जारी रहे, ताकि उपयोगकर्ता के अनुभव में कोई रुकावट न आए.

ads.js 
var videoElement;
var adsLoaded = false;
var adContainer;
var adDisplayContainer;
var adsLoader;
var adsManager;

...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);
  adsLoader.addEventListener(
      google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED,
      onAdsManagerLoaded,
      false);
  adsLoader.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError,
      false);

...

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Instantiate the AdsManager from the adsLoader response and pass it the video element
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoElement);
}

function onAdError(adErrorEvent) {
  // Handle the error logging.
  console.log(adErrorEvent.getError());
  if(adsManager) {
    adsManager.destroy();
  }
}

8. AdsManager शुरू करें

विज्ञापन दिखाना शुरू करने के लिए, आपको AdsManager को शुरू करना होगा. मोबाइल ब्राउज़र पर पूरी तरह से काम करने के लिए, इसे उपयोगकर्ता के इंटरैक्शन से ट्रिगर किया जाना चाहिए.

ads.js 
...

function loadAds(event) {
  // prevent this function from running on every play event
  if(adsLoaded) {
    return;
  }
  adsLoaded = true;

  // prevent triggering immediate playback when ads are loading
  event.preventDefault();

  console.log("loading ads");

  // Initialize the container. Must be done via a user action on mobile devices.
  videoElement.load();
  adDisplayContainer.initialize();

  var width = videoElement.clientWidth;
  var height = videoElement.clientHeight;
  try {
    adsManager.init(width, height, google.ima.ViewMode.NORMAL);
    adsManager.start();
  } catch (adError) {
    // Play the video without ads, if an error occurs
    console.log("AdsManager could not be started");
    videoElement.play();
  }
}

...

9. AdsManager को रिस्पॉन्सिव बनाएं

यह पक्का करने के लिए कि विज्ञापनों का साइज़, वीडियो प्लेयर के साइज़ के मुताबिक डाइनैमिक तौर पर बदले, अगर स्क्रीन का साइज़ या ओरिएंटेशन बदलता है, तो विंडो का साइज़ बदलने वाले इवेंट को adsManager.resize() को कॉल करना होगा.

ads.js 
...

window.addEventListener('resize', function(event) {
  console.log("window resized");
  if(adsManager) {
    var width = videoElement.clientWidth;
    var height = videoElement.clientHeight;
    adsManager.resize(width, height, google.ima.ViewMode.NORMAL);
  }
});

...

10. AdsManager इवेंट सुनें

AdsManager कई इवेंट को भी सक्रिय करता है, जिन्हें हैंडल किया जाना ज़रूरी है. इन इवेंट का इस्तेमाल, स्थिति में हुए बदलावों को ट्रैक करने, वीडियो चलाने को रोकने, और वीडियो को रोकने, और गड़बड़ियों को रजिस्टर करने के लिए किया जाता है.

गड़बड़ियों को ठीक करना

AdsLoader के लिए बनाया गया गड़बड़ी हैंडलर, उसी कॉलबैक फ़ंक्शन के साथ एक नया इवेंट हैंडलर जोड़कर AdsManager के लिए गड़बड़ी हैंडलर के रूप में काम कर सकता है.

ads.js 
...

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

  adsManager.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError);
}

...

चलाने और रोकने के इवेंट ट्रिगर करना

जब AdsManager, डिसप्ले के लिए विज्ञापन डालने के लिए तैयार होता है, तब CONTENT_PAUSE_REQUESTED इवेंट को चालू करता है. वीडियो प्लेयर पर रोकने की सुविधा को ट्रिगर करके, इस इवेंट को मैनेज करें. इसी तरह, जब विज्ञापन पूरा हो जाता है, तब AdsManager CONTENT_RESUME_REQUESTED इवेंट चालू करता है. कॉन्टेंट वाले इस वीडियो पर वीडियो चलाने की सुविधा फिर से चालू करके, इस इवेंट को मैनेज करें.

ads.js 
...

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

  adsManager.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
      onContentPauseRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
}

...

function onContentPauseRequested() {
  videoElement.pause();
}

function onContentResumeRequested() {
  videoElement.play();
}

मोबाइल डिवाइस पर क्लिक-टू-पॉज़ ट्रिगर करना

AdContainer, वीडियो एलिमेंट को ओवरले करता है. इसलिए, उपयोगकर्ता दिए गए प्लेयर से सीधे इंटरैक्ट नहीं कर सकते. इससे, मोबाइल डिवाइस इस्तेमाल करने वाले ऐसे लोग गुमराह हो सकते हैं जो वीडियो प्लेयर पर टैप करके वीडियो रोक सकते हैं. इस समस्या को हल करने के लिए, IMA SDK उन सभी क्लिक को पास करता है जिन्हें विज्ञापन ओवरले से AdContainer एलिमेंट में मैनेज नहीं किया जाता है. यहां से उन्हें मैनेज किया जा सकता है. यह नॉन-मोबाइल ब्राउज़र पर लीनियर विज्ञापनों पर लागू नहीं होता, क्योंकि विज्ञापन पर क्लिक करने से क्लिकथ्रू लिंक खुलता है.

क्लिक-टू-पॉज़ लागू करने के लिए, AdContainer में क्लिक हैंडलर जोड़ें और वीडियो पर चलाएं या इवेंट रोकें.

ads.js 
...

function initializeIMA() {
  console.log("initializing IMA");
  adContainer = document.getElementById('ad-container');
  adContainer.addEventListener('click', adContainerClick);
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

...

function adContainerClick(event) {
  console.log("ad container clicked");
  if(videoElement.paused) {
    videoElement.play();
  } else {
    videoElement.pause();
  }
}

...

नॉन-लीनियर विज्ञापनों पर ट्रिगर करना

जब कोई विज्ञापन चलने के लिए तैयार होता है, तो AdsManager सामग्री वीडियो को रोक देता है, लेकिन यह गैर-लीनियर विज्ञापनों पर ध्यान नहीं देता, जहां सामग्री के चलते समय उसे चलाया जाना चाहिए. नॉन-लीनियर विज्ञापनों का समर्थन करने के लिए, LOADED इवेंट भेजने के लिए AdsManager सुनें. इसके बाद, देखें कि विज्ञापन लीनियर है या नहीं. अगर नहीं, तो वीडियो एलिमेंट पर फिर से वीडियो चलाएं.

ads.js 
...

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

  adsManager.addEventListener(
      google.ima.AdErrorEvent.Type.AD_ERROR,
      onAdError);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED,
      onContentPauseRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED,
      onContentResumeRequested);
  adsManager.addEventListener(
      google.ima.AdEvent.Type.LOADED,
      onAdLoaded);
}

...

function onAdLoaded(adEvent) {
  var ad = adEvent.getAd();
  if (!ad.isLinear()) {
    videoElement.play();
  }
}

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